Задачи jQuery

• упрощать работу манипулирования элементами DOM
• упрощать работу обработки событий
• упрощать работу с AJAX-запросами
• поддерживать единый интерфейс для различных браузеров

Подключение jQuery

Функция $ имеет несколько целей

• $(function(){ ... }); — запускает код, когда документ готов.
• $(selector) — поиск элементов по CSS-селектору. Они будут доступны как jQuery-объект с коллекцией элементов
• $(element) — обернуть элемент в jQuery-объект
• $(htmlCode) — создать HTML-элемент

$(function(){ ... });

Запускает код, когда документ готов (безопасно манипулировать DOM).

Это сработает быстрее, чем document.onload (не дожидается загрузки картинок).

И надёжнее, чем обработка события DOMContentLoaded — это сработает, даже если событие случилось до того как обработчик был задан.

$(selector)

Поиск элементов по (расширенному) CSS-селектору. Выборка будет доступна как jQuery-объект с коллекцией элементов

Этой коллекцией можно манипулировать как единым целым

Пример:

$('.message > span.time')       // найти элементы по селектору
  .css('font-size', '0.8em')    // каждому элементу добавить стиль
  .css('color', 'gray');        // и ещё один

$('.message')                   // найти сообщения
  .find('.user')                // внутри сообщений найти имена пользователей
  .hide();                      // скрыть их все

Селекторы

• Все CSS-селекторы, включая псевдоклассы
• Селектор :button, соответствующий сразу паре селекторов: button, input[type='button']
• Селектор :contains(), проверяющий, что элемент содержит некоторый текст
• Селекторы :has(), :parent, :empty, проверяющие, что элемент содержит некий другой элемент или содержит хоть что-то / не содержит ничего

Цепочки методов

Большинство методов можно стыковать друг с другом в длинные цепочки.

Это работает, потому что методы работают с jQuery-коллекцией (selection) и возвращают тоже jQuery-коллекцию. Например:

selection.css(key, value) -> selection

Цепочки методов

Чтобы это работало функции выглядят примерно так:

    function(...) {
        this.set(...)  // что-нибудь поменять в объекте
        return this;   // но вернуть его же
    }

Геттеры-сеттеры

Многие методы имеют две формы вызова:

• selection.attr(key) — прочитать значение атрибута
• selection.attr(key, value) — записать значение атрибута

Геттеры-сеттеры

Чтобы это работало функции выглядят примерно так:

    function(key, value) { // функция принимает два аргумента
        if (value === undefined) { // если второй из них не задан
            return this.get(key);  // используем её как геттер 
                                   // и возвращаем результат
        }
        this.set(key, value);      // в противном случае что-то меняем
        return this;               // и возвращаем сам объект, чтобы с ним работать и дальше
    }

Геттеры-сеттеры

Если геттер применён к коллекции элементов, обычно он возвращает значение, соответствующее первому из них

$(element) — обернуть элемент в jQuery-объект

Иногда мы получаем обычный HTMLElement в качестве объекта, но хотим вызвать с ним jQuery-метод.

Тогда его надо обернуть в объект

$('button').on('click', function(event) {       // каждой кнопке добавить обработчик кликов
    $(this)                                     // this — HTMLElement кнопки. $(this) — его jQuery-версия
        .prop('disabled', true);                // сделаем нажатую кнопку выключенной
})

$(htmlCode) — создать HTML-элемент

Бывает удобно из кода создать такой элемент и что-то с ним сделать специфичное для jQuery

    $( "
My new text
" ).appendTo( "body" );

Основные методы выбора элементов DOM

• find — отфильтровать элементы в поддереве (дочерние любого уровня)
• filter, not — отфильтровать элементы в выборке по критерию или его отрицанию
• has — отфильтровать элементы по наличию дочернего элемента
• add — добавить элемент к выборке
• first, last, eq(n) — взять только первый/последний/n-ный элемент
• end — отменить последнюю фильтрацию

Пример использования end

$( "ul.first" )
  .find( ".foo" )
    .css( "background-color", "red" )
  .end()
  .find( ".bar" )
    .css( "background-color", "green" );

Перемещение по дереву DOM

• children — непосредственные потомки (дочерние элементы)
• parent, parents — родитель и дальние предки
• closest — подняться вверх до ближайшего элемента с нужным селектором
• sublings, next/prev, nextAll, nextUntil — родственные элементы

Основные методы манипуирования DOM

• length — количество элементов в выборке
• hasClass, addClass, removeClass, toggleClass — получать и менять классы тегов
• attr, prop, data, val — получать или менять атрибуты, свойства, dataset-значения тэгов, значения элементов формы
• text, html — получать или менять текст/html элементов. html для первого элемента выборки, text — склейка по всем элементам
• css — менять css-стили

Основные методы манипуирования DOM

• hide, show, toggle — скрывать или показывать элементы
• append, appendTo, prepend, prependTo, remove — добавлять или удалять элементы (append — в конец, prepend — в начало)
• wrap, wrapInner, wrapAll, unwrap — обернуть элементы в контейнер

Обработка событий

• Добавить обработчик: selection.on(eventTypes, handler)
• Удалить обработчик(и): selection.off(eventTypes [, handler])
• Добавить однократный обработчик: selection.one(eventTypes, handler])

Обработка событий

• Можно передавать в обработчик данные и фильтровать события по селектору дочернего элемента:
  selection.on(eventTypes [, childSelector] [, data], handler)

Обработка событий

• selection.trigger(event) — вызвать событие: trigger('focus'), trigger('click'), etc

Анимация

• animate(cssProperties, duration, easing) — динамически изменять свойства
• show, hide, slideUp, slideDown, slideToggle, fadeOut, fadeIn, fadeToggle, fadeTo — скрыть/показать
• delay — подождать
• queue, dequeue, clearQueue — запланировать/исполнить запланированное действие / очистить очередь
• stop/finish — досрочно прервать анимацию

Анимация

let div = $( "div" );
 
function runIt() {
  div
    .show( "slow" )
    .animate({ opacity: "0.5" }, 2000 )
    .animate({ left: "+=200" }, 2000 )
    .slideToggle( 1000 )
    .slideToggle( 1000 )
    .animate({ left: "-=200" }, 1500 )
    .queue(function() {
      alert( "Animation almost complete." );
      $( this ).dequeue();
    }
    .hide( 1200 )
    .slideUp( "normal", runIt );
}
 
function showIt() {
  let n = div.queue( "fx" );
  $( "span" ).text( n.length );
  setTimeout( showIt, 100 );
}
 
runIt();
showIt();