9187

jQuery — библиотека JavaScript

Контрольная

Информатика, кибернетика и программирование

jQuery jQuery - библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM (Document Object Model - объектная модель документа), обращаться к...

Русский

2013-02-25

152.9 KB

27 чел.

jQuery

jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM(Document Object Model — «объектная модель документа»), обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API по работе с AJAX.


HTML была одной из первых вещей, которую Джон Резиг освоил, когда он только начал заниматься программированием. Резиг программировал на QBasic, когда один его знакомый показал ему, как создать веб-страницу (используя Angelfire), а также основы HTML. Отец подарил ему на Рождество две книги по HTML. Именно тогда, когда он только начал программировать на Visual Basic, HTML и веб-дизайн очень заинтересовали его.

Но страсть к JavaScript пришла значительно позже, примерно в 2004 году. Тогда Резиг получал степень в области компьютерных наук и работал на полставки в местной фирме Brand Logic. Он занимался дизайном сайта, в котором создавался пользовательский скроллинг. Джон был разочарован и расстроен, особенно потому, что использовал код других разработчиков, после чего решил серьёзно изучить JavaScript. Изучив, пришел к выводам, что JavaScript — это простой, но изящный язык, который является невероятно мощным для решения многих задач. В течение ближайшей пары лет Джон создал множество различных JavaScript-приложений, прежде чем закончить создание jQuery. Основной целью создания jQuery Резиг видел возможность закодировать многоразовые куски кода, которые позволят упростить JavaScript и использовать их так, чтобы не беспокоиться о кросс-браузерных вопросах. Библиотека была представлена общественности на компьютерной конференции «BarCamp» в Нью-Йорке в 2006 году.

Точно так же, как CSS отделяет визуализацию от структуры HTML, JQuery отделяет поведение от структуры HTML. Например, вместо прямого указания на обработчик события нажатия кнопки управление передаётся JQuery идентифицирующей кнопки и затем преобразовывающей его в обработчик события клика. Такое разделение поведения и структуры также называется принципом ненавязчивого JavaScript.

Библиотека jQuery содержит функциональность, полезную для максимально широкого круга задач. Тем не менее, разработчиками библиотеки не ставилась задача совмещения в jQuery функций, которые подошли бы всюду, поскольку это привело бы к большому коду, бо́льшая часть которого не востребована. Поэтому была реализована архитектура компактного универсального ядра библиотеки и плагинов[3]. Это позволяет собрать для ресурса именно ту JavaScript-функциональность, которая на нём была бы востребована.

Использование

jQuery, как правило, включается в веб-страницу как один внешний JavaScript-файл:

<head>

   <script type="text/javascript" src="путь/к/jQuery.js"></script>

</head>

Вся работа с jQuery ведётся с помощью функции $. Если на сайте применяются другие JavaScript библиотеки, где $ может использоваться для своих нужд, то можно использовать её синоним — jQuery. Второй способ считается более правильным, а чтобы код не получался слишком громоздким, можно писать его следующим образом:

jQuery(function($) {

 // здесь код скрипта, где в $ будет находиться объект, предоставляющий доступ к функциям jQuery

})

А основные моменты в диаграмме:

Работу с jQuery можно разделить на 2 типа:

  1.  Получение jQuery-объекта с помощью функции $(). Например, передав в неё CSS-селектор, можно получить jQuery-объект всех элементов HTML, попадающих под критерий и далее работать с ними с помощью различных методов jQuery-объекта. В случае, если метод не должен возвращать какого-либо значения, он возвращает ссылку на jQuery объект, что позволяет вести цепочку вызовов методов согласно концепции текучего интерфейса.
  2.  Вызов глобальных методов у объекта $, например, удобных итераторов по массиву.

В следующем примере реализуем эффект растворение:

$(document).ready(function(){

 

    $(".pane .delete").click(function(){

        $(this).parents(".pane").animate({ opacity: "hide" }, "slow");

    });

 

});

Когда мы кликаем по картинке <img class=”delete”>, будет найден родительский элемент <div class=”pane”>, и его прозрачность будет медленно изменяться от opacity= 1.0 до opacity=hide

Так же можно сделать хорошую связную анимацию:

$(document).ready(function(){

    $(".run").click(function(){

 

        $("#box").animate({opacity: "0.1", left: "+=400"}, 1200)

        .animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")

        .animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")

        .animate({top: "0"}, "fast")

        .slideUp()

        .slideDown("slow")

        return false;

    }); 

});

Line 0: когда прогрузилась страница (DOM готов к манипуляциям)

Line 1: привязываемся к событию click для элемента <a class=”run”>

Line 2: манипулируем элементом <div id=”box”> – уменьшаем его прозрачность до 0.1, наращиваем позицию left еще на 400px, со скоростью 1200 (milliseconds)

Line 3: затем медленно изменяем следующие параметры: opacity=0.4, top=160px, height=20, width=20; скорость анимации указывается вторым параметром : “slow”, “normal”, “fast” или в миллисекундах

Line 4: затем opacity=1, left=0, height=100, width=100, скорость – “slow”

Line 5: затем top=0, скорость – “fast”

Line 6: затем slideUp (с дефолтной скоростью анимации – “normal”)

Line 7: затем slideDown, скорость – “slow”

Line 8: возвращаем false для того чтобы браузер не перешел по ссылке

Использование jQuery позволяет сделать складывающиеся панели:

$(document).ready(function(){

 

    //hide message_body after the first one

    $(".message_list .message_body:gt(0)").hide();

 

    //hide message li after the 5th

    $(".message_list li:gt(4)").hide();

 

    //toggle message_body

    $(".message_head").click(function(){

        $(this).next(".message_body").slideToggle(500)

        return false;

    });

 

    //collapse all messages

    $(".collpase_all_message").click(function(){

        $(".message_body").slideUp(500)

        return false;

    });

 

    //show all messages

    $(".show_all_message").click(function(){

        $(this).hide()

        $(".show_recent_only").show()

        $(".message_list li:gt(4)").slideDown()

        return false;

    });

 

    //show recent messages only

    $(".show_recent_only").click(function(){

        $(this).hide()

        $(".show_all_message").show()

        $(".message_list li:gt(4)").slideUp()

        return false;

    });

 

});

  1.  скрываем все элементы <div class=”message_body”> после первого.
  2.  скрываем все элементы <li> после пятого
  3.  клик по <p class=”message_head”> – вызывает метод slideToggle для следующего элемента <div class=”message_body”>
  4.  клик по <a class=”collpase_all_message”> – вызывает метод slideUp для всех <div class=”message_body”>
  5.  клик по <a class=”show_all_message”> – скрывает элемент, и отображает <a class=”show_recent_only”>, так же вызывается метод slideDown для всех <li> послепятого
  6.  клик по <a class=”show_recent_only”> – скрывает элемент, и отображает <a class=”show_all_message”>, так же вызывается метод slideUp для всех <li> после пятого

На сегодняшний день на сайтах очень часто встречается галереи изображений на главной странице, большая часть из сделана при помощи jQuery:

$(document).ready(function(){

 

    $("h2").append('<em></em>')

 

    $(".thumbs a").click(function(){

 

        var largePath = $(this).attr("href");

        var largeAlt = $(this).attr("title");

 

        $("#largeImg").attr({ src: largePath, alt: largeAlt });

 

        $("h2 em").html(" (" + largeAlt + ")"); return false;

    });

  

 });

Для начала добавим тэг <em> в заголовки <h2>

По клику на изображения в <p class=thumbs> выполняем следующие действия:

  1.  сохраняем значение атрибута “href” в переменной “largePath”
  2.  сохраняем значение атрибута “title” в переменной “largeAlt”
  3.  заменяем в элементе <img id=”largeImg”> значение атрибута “scr” и “alt” значениями из переменных “largePath” и “largeAlt”
  4.  так же присваиваем элементу “h2 em” значение из “largeAlt”


 

А также другие работы, которые могут Вас заинтересовать

18282. ЛОГІКА ПРЕДИКАТІВ 172.5 KB
  Лекція 9 ЛОГІКА ПРЕДИКАТІВ Поняття про зміну в математиці. Предикат висловлювальна форма та його основні характеристики. Тотожно істинні тотожно хибні і рівносильні предикати. Операції логіки висловлень над предикатами. Області істинності результат
18283. МІРКУВАННЯ ТА ПЕРЕВІРКА ЇХ ПРАВИЛЬНОСТІ 87.5 KB
  Лекція 10 МІРКУВАННЯ ТА ПЕРЕВІРКА ЇХ ПРАВИЛЬНОСТІ Поняття про міркування. Правильні і неправильні міркування. Перевірка правильності міркувань за допомогою кругів Ейлера або наведення контрприкладу. Теореми і їх будова. Твердження що повязані з даною те
18284. РІЗНІ ПІДХОДИ ДО ПОБУДОВИ МНОЖИНИ ЦІЛИХ НЕВІД’ЄМНИХ ЧИСЕЛ 70 KB
  Лекція 11 РІЗНІ ПІДХОДИ ДО ПОБУДОВИ МНОЖИНИ ЦІЛИХ НЕВІДЄМНИХ ЧИСЕЛ Короткі історичні відомості про виникнення натурального числа і нуля. Різні підходи до побудови множини цілих невідємних чисел. Скінченні множини та їх властивості: а Теоретикомн
18285. МНОЖИНА ЦІЛИХ НЕВІД’ЄМНИХ ЧИСЕЛ 53.5 KB
  Лекція 12 МНОЖИНА ЦІЛИХ НЕВІДЄМНИХ ЧИСЕЛ Натуральне число як спільна властивість класу скінченних непорожніх рівнопотужних множин. Поняття про нуль. Множина цілих невідємних чисел. Відношення рівності на множині цілих невідємних чисел та його властив
18286. ДОДАВАННЯ І ВІДНІМАННЯ ЦІЛИХ НЕВІД’ЄМНИХ ЧИСЕЛ 74 KB
  Лекція 13 ДОДАВАННЯ І ВІДНІМАННЯ ЦІЛИХ НЕВІДЄМНИХ ЧИСЕЛ Означення суми цілих невідємних чисел через обєднання множин. Існування і єдність суми. Операція додавання цілих невідємних чисел та їх властивості. Формування понять суми і додавання в початкові...
18287. МНОЖЕННЯ І ДІЛЕННЯ ЦІЛИХ НЕВІД’ЄМНИХ ЧИСЕЛ 85 KB
  Лекція 14 МНОЖЕННЯ І ДІЛЕННЯ ЦІЛИХ НЕВІДЄМНИХ ЧИСЕЛ Означення добутку цілих невідємних чисел через декартів добуток множин. Існування і єдність добутку. Означення добутку цілих невідємних чисел через суму. Операція множення цілих невідємних чисел та...
18288. АКСІОМИ ПЕАНО 93 KB
  Лекція 15 АКСІОМИ ПЕАНО Поняття про аксіоматичний метод побудови теорії. Аксіоматична побудова множини цілих невідємних чисел; неозначувані поняття аксіоми Пеано та деякі наслідки з них. Аксіоматичне означення операції додавання цілих невідємних чисел...
18289. ВЛАСТИВОСТІ МНОЖИНИ ЦІЛИХ НЕВІД’ЄМНИХ ЧИСЕЛ 124 KB
  Лекція 16 ВЛАСТИВОСТІ МНОЖИНИ ЦІЛИХ НЕВІДЄМНИХ ЧИСЕЛ Ділення з остачею. Теорема про ділення з остачею. Операції ділення з остачею. Формування поняття ділення з остачею в початковій школі. Принцип і метод математичної індукції. б Натуральне число як р...
18290. НАТУРАЛЬНЕ ЧИСЛО ЯК МІРА ВІДРІЗКА 87 KB
  Лекція 17 НАТУРАЛЬНЕ ЧИСЛО ЯК МІРА ВІДРІЗКА Поняття про величини та їх вимірювання. Поняття про відрізок. Відношення дорівнює менше більше на множині відрізків та їх властивості. Поняття про додавання і віднімання над відрізками та їх властивос...