jQuery — кроссбраузерная javascript-библиотека, упрощающая взаимодействие с HTML. Девиз библиотеки - "write less, do more".
В настоящее время существует 3 основные ветки версий jQuery: ветка 1.х включает поддержку старых браузеров, в т.ч. IE6-8; ветка 2.х ориентирована на более современные браузеры, код ее версий меньше по размеру, чем у соответсвующих версий ветки 1.x; ветка 3.х - это переписанная вторая версия jQuery, которая учитывает современные изменения в Javascript и HTML5 API. Параллельно с версией 3.0.alpha была выпущена версия 3.0.alpha-compat, которая была наследников ветки 1.х, но в дальнейшем разработчики отказались от релизов compat-версий.
Библиотека подключается как внешний файл локально, либо с помощью CDN (пример).
<script src="SOME_PATH/jquery.js"></script>
Для разработки и отладки обычно полную версию библиотеки, а для продакшна используют минимизированную версию (min). Начиная с версии 1.9 появилась возможность отлаживать минифицированный файл jquery.min.js благодаря map-файлам. Начиная с третьей версии появилась возможность использовать урезанную версию (slim) без поддержки Ajax и визуальных эффектов.
Функционал можно расширять, подключая различные плагины jQuery (официальный сайт плагинов, в настоящее время не поддерживается).
Т.к. в процессе своего развития в jQuery не только добавлялись новые методы, но и удалялись старые, то для возможности использования старых методов в новых версиях подключают плагин jQuery Migrate.
Для поиска элементов DOM разработчиком был создан специальная библиотека Sizzle, выделенный в отдельный проект. Он позволяет находить элементы используя как селекторы CSS, так и свои встроенные специальные методы.
Объект jQuery доступен на странице в виде переменной $. Если какая-либо другая библиотека использует этот символ в своих целях, то к объекту jQuery обращаются по его имени jQuery, либо используют встроенный метод noConfict() для указания нового алиаса для jQuery.
Перед получением элементов DOM необходимо убедиться, что DOM-дерево уже построено. Чтобы поиск работал из любого места страницы код оборачивают в функцию обратного вызова события готовности DOM-дерева, которая для jQuery выглядит так:
$(document).ready(function() {
// your code
});
Альтернативный способ (а с версии 3.0 - рекомендуемый) навесить обработчик:
$(function() {
// your code
});
Сам поиск элемента осуществляется передачей параметра селектора в функцию jQuery:
$('div') // найдет все div на странице
В качестве селектора может быть указан любой CSS-селектор либо специальные встроенные типы селекторов:
$('div') // все div на странице
$('.block') // все элементы с классом 'block'
$('#block') // первый элемент с id 'block'
$('div,span') // все div и span на странице
$(':header') // все элементы, являющиеся заголовками (h1, h2, ...)
$('[href]') // все элементы, имеющие атрибут 'href'
$('[class][href]') // все элементы, имеющие атрибуты 'class' и 'href'
$('[href="/"]') // все элементы, имеющие атрибут 'href' равный '/'
$('[href!="/"]') // все элементы, имеющие атрибут 'href' не равный '/'
$('[href^="http"]') // все элементы, имеющие атрибут 'href' начинающийся с 'http'
$('[href$="com"]') // все элементы, имеющие атрибут 'href' заканчивающийся на 'com'
$('[href*="site"]') // все элементы, имеющие атрибут 'href' содержащий строку 'site'
$('[class|="my"]') // все элементы, имеющие атрибут 'class' имеющий префикс 'my'
$(':focus') // все элементы, находящиеся в фокусе
$(':empty') // все элементы c пустым содержимым
$(':contains(text)') // все элементы, седержащие текст
$(':text') // все элементы 'input' типа 'text'
При использовании метасимволов в качестве значений атрибутов при использовании в селекторе их необходимо экранировать обратным слэшем.
Такой поиск возвращает коллекцию элементов собственном jQuery-представлении. Элементы коллекции можно получить следующим образом:
$('div')[0] // первый div на странице в "представлении javascript"
$('div').eq(0) // первый div на странице в "представлении jQuery"
Метод eq принимает в качестве параметра индекс искомого элемента и возвращает сам элемент. Если индекс - отрицательное число, то поиск ведется с конца коллекции. Коллекция имеет другие методы для выборок внитри нее:
Функция jQuery обладает еще одним свойством: при использовании внутри аргумента треугольных скобок будет создан указанный элемент.
Некоторые методы работы с элементами, например text, имеют смысл только при работы с одним экземпляром коллекции. Для перебора всех найденных элементов используют метод each, принимающий в качестве параметра функцию отбратного вызова. Внутри функции каждый найденный элемент доступен с помощью this. Для поиска внутренних элементов относительно текущего используют:
Использование второго аргумента, по сути, позволяет задать контекст, в рамках которого будет осуществляться поиск.
Метод find, как и большинство методов jQuery, "чейнятся", т.е. помимо "полезной работы" метод возвращает коллекцию или элемент, и можно сразу вызывать следующий метод:
$('div').not(':contains("Hello")').find('span').text();
Операции с DOM-деревом относятся к медленным операциям в JavaScript, потому при выборке больших коллекций и дальнеших манипуляций с ними используют прием кэширования коллекций. Коллекцию сохраняют в переменную и все дальнейшие действия производят над этой переменной.
Для манипуляций с найденными элементами используют следубщие методы:
Работа с атрибутом class элемента осуществляется следующими методами:
Работа с остальными атрибутами производится с помощью:
Работа со стилевыми настройками осуществляется использованием методов:
Для добавления обработчиков событий функции вызывается метод bind c аргументами типа события и функции обратного вызова:
$('button').bind('click', function(e) {
// code
});
В качестве первого аргумента может быть указано несколько типов событий, тогда обработчик навесится на все.
Возможна и более короткая запись добавления обработчика события одного типа:
$('button').click(function(e) {
// code
});
Если выполнить такой метод без аргумента, то будет сэмулировано указанное событие. Для эмуляции также используется метод trigger, которому в качестве второго и т.д. параметров можно передать каки-либо данные, которые в дальнейшем могут быть перехвачены обработчиком события:
$('button').bind('click', function(e, data1, data2) {
alert(data1 + data2);
});
$('button').trigger('click', ["Hello", "world"]);
Как и в случае обычного onclick добавление с помощью bind навесит обработчики только на существующие в DOM-дереве элементы. Для динамического добавления обработчиков используют метод on:
$('button').on('click', function(e) {
// code
});
Для оптимизации работы обработчиков можно воспользоваться делегированием событий, которое работает аналогично делегированию в JavaScript:
$('body').on('click', 'button', function(e) {
// code
});
Удаление обработчиков осуществляется методами unbind и off. Без параметров эти методы удаляют все навешанные обработчики, с одним аргументов - все обработчики для указанного типа событий, а с двумя - удаляют указанный обработчик.
С версии jQuery 3.0 методы bind и unbind считаются deprecated.
Если необходимо, чтобы обработчик сработал только один раз, то оборачивают его в метод one. Если в качестве типа события указано несколько типов, то one вызовит обработчик по разу на каждый тип.
Перечень возможных событий: