В последнее время у меня стало уже традицией публиковать статьи, посвященные ответам на те вопросы, которые довольно часто встречаются как в комментариях, так и в письмах. Сегодняшнюю статью я хочу посвятить рассказу о структуре и терминологии jQuery, и надеюсь, что эта статья поможет тем, кто только собирается познакомиться с библиотекой.

Основная функциональность библиотеки jQuery сосредоточена в файле jquery-1.3.2.js, где 1.3.2 – версия файла. В этот файл включены наиболее часто используемые возможности:

- функции ядра

- работа с селекторами

- работа с атрибутами

- обход дерева DOM

- манипуляции элементами

- работа с CSS-свойствами элементов

- работа с событиями

- визуальные эффекты

- взаимодействие с ajax

- утилиты

Таким образом, чтобы использовать базовую функциональность, необходимо всего лишь подключить один-единственный файл:

<script src=»jquery-1.3.2.js» type=»text/javascript»></script>

Последняя версия библиотеки jQuery на сайте разработчиков доступна по адресу http://docs.jquery.com/Downloading_jQuery

Разработчики jQuery предусмотрели возможность расширения функциональности с помощью подключения дополнительных модулей – плагинов. На сегодняшний день имеется набор официальных плагинов, расширяющих возможности библиотеки в направлении построения пользовательских интерфейсов – jQuery UI.

Для использования любого расширения из приведенного ниже списка, кроме самой библиотеки, понадобится файл ui.core.js, т.е. это файл, от которого зависит работа любого UI-расширения из приведенного ниже списка:

взаимодействие с элементами

- draggable

- droppable

- resizable

- selectable

- sortable

виджеты

- accordion

- dialog

- slider

- tabs

- datepicker

- progressbar

Существует также интересный набор дополнительных визуальных эффектов, для применения которых, кроме самой библиотеки, необходим файл effects.core.js, т.е. это файл от которого зависит работа любого дополнительного визуального эффекта: blind, bounce, clip, drop, explode, fold, highlight, pulsate, scale, shake, slide, transfer.

По адресу http://jqueryui.com/download можно обнаружить очень удобный интерфейс настраиваемой закачки. Здесь всегда можно найти самые свежие версии расширений, рекомендации по использованию версий расширений с соответствующей версией библиотеки jQuery.

Кроме того существует огромное количество неофициальных расширений, как удачных и вполне полезных, так и не очень. Поискать нужное можно по адресу http://plugins.jquery.com/

Если в общем и целом по структуре все ясно, попробуем разобраться с терминологией (по большому счету – это условность, но все же…) и для этого посмотрим на два небольших кусочка jQuery-кода, которые делают практически одно и тоже, но немного по-разному:

$('#someId').load('test.html'

и

$.ajax({
  url: "test.html",
  success: function(data){
    $('#someId').html(data);
  }
});

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

В jQuery практически любой метод возвращает набор элементов (объект jQuery). Благодаря этому имеется возможность использования цепочек вызовов.

Давайте посмотрим еще один небольшой пример:

$('div').css('border', '1px solid #F00')
        .add('p')
        .css('background', '#00F');

В приведенном примере мы создали набор элементов, содержащий все элементы div на странице, указав в селекторе название элемента и применили к этому набору элементов цепочку вызовов, состоящую из методов css(), add() и снова css(), передавая каждому из методов некоторые параметры.

Вооружившись терминологией, вернемся опять к расширениям (если хотите – плагинам)…
В большинстве случаев любой плагин для jQuery – это всего-навсего метод, использовать который становится возможным после его подключения к нужной странице.

Например после подключения расширений отвечающих за взаимодействие с элементами (draggable, droppable…) мы используем их функциональность точно так же, как использовали бы обычный, «штатный» метод jQuery.

Давайте посмотрим еще пару строк кода:

$('#someId').load('test.html');

и

$('#someId').draggable();

Не будем сейчас обращать внимание на то, что это совершенно разные методы. Обратим внимание на то, что принципиальной разницы между их использованием нет. Просто в первом случае мы используем метод load(), который входит в состав самой библиотеки, а во втором случае используется метод draggable(), который становится доступен после подключения соответствующего расширения.

Если после прочтения статьи Вы захотите что либо уточнить, то я рекомендую воспользоваться разделом карта сайта, где Вы сможете легко обнаружить ссылку на ту статью, которая Вам окажется нужна.