3.10. Введение в jQuery
jQuery — библиотека JavaScript, содержащая в себе готовые функции языка JavaScript, все операции jQuery выполняются из кода JavaScript.
Библиотека jQuery производит манипуляции с html-элементами, управляя их поведением и используя DOM для изменения структуры веб-страницы. При этом исходные файлы HTML и CSS не меняются, изменения вносятся лишь в отображение страницы для пользователя.
Для выбора элементов используются селекторы CSS. Выбор осуществляется с помощью функции $(). При вызове функция $() возвращает новый экземпляр объекта JQuery, который оборачивает ноль или более элементов DOM и позволяет взаимодействовать с ними различными способами.
Выполнение различных сценариев возможно только после окончания загрузки структуры документа document, когда браузер преобразует html-код страницы в дерево DOM. Управление процессом загрузки обеспечивает конструкция
jQuery(document).ready(function() {
...
});
Сначала производится обертывание экземпляра document в функцию jQuery(), после применяется метод ready(), которому передается функция function() {...}, исполняемая после загрузки документа.
На практике обычно используется сокращенная форма такой записи jQuery(function() {...});, или $(function() {...});.
Для хранения информации при работе с библиотекой jQuery используются переменные JavaScript. В переменных могут храниться элементы. Имена переменных, предназначенных для хранения возвращаемых элементов, начинаются со знака $, например:
$h = $(".list").parent().parent().detach();
Для хранения нескольких элементов используются массивы JavaScript:
$k[3] = 15;
Правила работы с библиотекой jQuery
1. Как добавить jQuery на веб-страницу
Добавить библиотеку jQuery на свою веб-страницу можно двумя способами:
Использовать версию файла jQuery, размещенную на ресурсах Google, Microsoft или jQuery.com.
Данный метод использует «Сеть дистрибуции контента» (CDN, content distribution network), т.е. файл jQuery расположен на другом веб-сайте, который при запросе пользователем отправляет данный файл на его компьютер. Очевидные преимущества данного способа — снижение нагрузки на собственный веб-сервер и ускорение загрузки файла в силу разветвленности сети серверов дистрибьютора.
Чтобы воспользоваться данным способом, необходимо перейти по одной из ссылок:
После перехода на сайт ресурса вам потребуется всего лишь скопировать ссылку на jQuery-файл и добавить её на свою веб-страницу между тегами <script>...</script>. В результате у вас должно получиться, например,
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Загрузить последнюю версию библиотеки jQuery с официального сайта. Для этого вам необходимо перейти по адресу jQuery.com и выбрать интересующую вас версию библиотеки. Для загрузки предлагается две версии jQuery-файла — минимизированный и несжатый. Размер несжатого файла около 300 Кб, он содержит комментарии, поэтому его лучше использовать с целью разработки и отладки кода.
Минимизированная версия файла весит около 100Кб, в ней удалены все комментарии и ненужные пробелы, что ускоряет загрузку файла браузером.
Для загрузки нужно перейти по ссылке, и в открывшемся окне щелкнуть правой кнопкой мыши и выбрать «Сохранить как …». После этого поместить файл в нужную папку (обычно для этого используется папка «scripts») и добавить его на вашу страницу:
<script src="scripts/jquery-2.0.0.min.js"></script>
2. Правила добавления jQuery на страницу
Размещайте ссылки на jQuery-файл внутри тега <head>.
Размещайте ссылки на jQuery-файл после ссылок на стили CSS, так как зачастую библиотека jQuery производит манипуляции со стилями элементов веб-страницы.
Размещайте другие теги <script>...</script> только после ссылки на файл jQuery, если данный скрипт использует библиотеку jQuery.
3. Как создать новый html-элемент
Создать пустой html-элемент, например, блок, можно несколькими способами:
1) с помощью краткой формы записи $("<div>")
2) с помощью инструкции $("<div></div>")
3) с помощью инструкции $("<div/>")
Все три способа рабочие, но, тем не менее, рекомендуется включать открывающие и закрывающие теги, чтобы показать, что данный элемент может содержать другие элементы.
При создании нового элемента методу $() можно передать второй параметр в виде объекта JavaScript, определяющий дополнительные атрибуты элемента:
$("<img/>",
{src: "images/flower.jpg",
title: "Rose_in_garden",
click: function() {...}
}).appendTo("body");
Таким образом создается элемент <img> с заданными атрибутами и включается в дерево DOM.