15. Введение в jQuery
Что это такое
«jQuery — библиотека JavaScript, фокусирующаяся на
взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко
получать доступ к любому элементу DOM, обращаться к атрибутам и
содержимому элементов DOM, манипулировать ими. Также библиотека
jQuery предоставляет удобный API по работе с Ajax.» |
jQuery — это не просто набор полезных функций, написанный на JavaScript (хотя это так), — это целая система программирования, надстроенная над клиентской частью JavaScript. Думаю, можно рассматривать jQuery, как новый высокоуровневый язык программирования, который в сравнении с JavaScript занимает примерно такое же положение, что Си или Паскаль в сравнении с Ассемблером. Не зря книга Бер Бибо и Иегуды Кац (которую я рекомендую) называется «jQuery. Подробное руководство по продвинутому JavaScript» (Символ, 2009). |
Продвинутый JavaScript — вот что такое jQuery, и использование этой искусно спроектированной библиотеки позволяет существенно повысить скорость и качество разработки динамичных web-приложений, в том числе и динамичных web-сайтов, разумеется.
|
Пример бесконечной анимации старых времен:
Проведите такой эксперимент. Попробуйте прочитать текст, рядом с которым беспрерывно в цикле анимируется какой-нибудь зайчик-попрыгайчик. Вы сразу оцените воздействие анимации на ваши глазные рецепторы. Зайчик с периферии вашего внимания упорно скачет в её центр. Сосредоточиться на тексте невозможно. Колбочки и палочки беснуются вместе с зайчиком! Примеры современных интерфейсных элементов с элементами анимации: инлеи, оверлеи, гармоники. Это инлей
Инлей — область на странице для показа данных
по запросу пользователя (щелчок на заголовке). Раскрываясь, инлей
раздвигает другие блоки, освобождая для себя место.
Ниже приводится пример оверлея. Открыть оверлей А это гармоника: Раздел 1
Описание первого раздела.
Раздел 2
Описание второго раздела.
Раздел 3
Описание третьего раздела.
Оверлей — «облегчённая» версия
всплывающего окна. Последнее представляет собой новое окно браузера,
а оверлей — обычный блок с абсолютным позиционированием.
|
Замечание. Времена, когда верхом динамики на страницах были анимированные в бесконечном цикле gif-зайчики и, что самое ужасное, сверкающие петушиной расцветкой бегущие строки текста, давно прошли. Современные сайты используют динамику для создания удобного интерфейса, как с функциональной, так и с визуальной точек зрения. Визуально такой интерфейс повторяет привычную физику реального мира. Например, реальные предметы не исчезают мгновенно в одном месте и не возникают ниоткуда в другом (нуль-транспортировка, пока еще, увы, встречается только у фантастов). Современный web-интерфейс использует для имитации физических сущностей экранных объектов такой прием, как «плавный переход» (постепенное растворение, раздвижка/схлопывание с конечной скоростью и т. п.). В арсенале современного web-интерфейса такие приемы, как прямое редактирование данных на странице, перетаскивание, всплывающие контекстные инструменты и приглашения, оверлеи, инлеи, виртуальные страницы, автозаполнение и другие приемы, направленные на создание комфортной среды для пользователя, среды, которая не требует от него чтения длинных инструкций, становится понятной в ассоциации с привычной деятельностью в обычном реальном мире. Компьютер, изначально являясь инструментом для избранных, все более усложняется, становясь проще для пользователя. Получается, компьютер становится одновременно сложнее и проще! Чтобы он и далее эволюционировал в том же духе, необходимы люди, которые разбираются в компьютере гораздо больше обычного пользователя. В частности, необходимы люди, которые умеют компьютер программировать. |
Суть работы с jQuery очень проста:
- Отбираем элементы страницы.
- Выполняем их обработку (всех сразу в совокупности, или каждый по отдельности).
В библиотеке есть только одна (!) функция, естественно, с именем jQuery. Гораздо чаще, правда, вместо имени jQuery используют односимвольный синоним $. В качестве аргумента этой функции задается строка, содержащая выражение для отбора элементов (селектор).
$(селектор)
Допустимо указывать не один, а два аргумента:
$(селектор, контекст)
Второй аргумент указывает узел DOM дерева, в котором будет выполняться отбор, заданный первым аргументом. По умолчанию отбор выполняется по всей странице (то есть по умолчанию контекст совпадает с объектом document). В качестве аргумента контекст может быть указан и обёрнутый набор jQuery (понятие «обёрнутый набор» рассматривается ниже).
Функция возвращает объект, подобный массиву, с набором найденных элементов. Кроме самих элементов, возвращаемый объект снабжается комплектом методов, которыми эти элементы можно обрабатывать (все в совокупности, или каждый по отдельности).
Таким образом, работа с jQuery выполняется по формуле:
$(селектор).метод()
Функция $(селектор) возвращает объект, подобный массиву, с набором элементов, отобранных по заданному селектору. Этот объект в терминологии jQuery называется обёрткой или обернутым набором. Далее вызывается какой-либо метод обёртки и выполняется обработка элементов. В терминологии jQuery методы обёртки называются командами.
Например, можно написать:
$("a").addClass("link");
Работает это так. Отбираются все элементы A (гиперссылки), и в каждый такой элемент добавляется класс с именем link. Метод addClass, в свою очередь, возвращает изменённую обертку и c ней можно продолжить работу, например, добавить к первому элементу обертки атрибут title.
В приведенном ниже примере сначала вызывается метод addClass, затем метод filter — его аргумент-селектор ":first" оставляет в обертке только первый элемент и, наконец, вызывается метод attr, который устанавливает значение атрибута title:
$("a").addClass("link").filter(":first").attr("title","Это первая ссылка");
Отметим, что члены обернутого набора являются, конечно, не HTML-элементами, а ссылками на DOM-объекты, построенные для этих элементов. Мы будем и далее для простоты речи называть эти члены элементами, но читатель должен помнить, что собираются не HTML-элементы, и даже не DOM-объекты, а лишь ссылки на DOM-объекты. Набор ссылок занимает мало место в памяти, кроме того, при отборе не происходит копирования объектов, а при изменении объектов, ссылки на них остаются прежними.
Кроме формулы отбор.обработка:
$(селектор).метод()
или формулы отбор.цепочка_обработок:
$(селектор).метод1().метод2().метод3()...
представляющей цепочку работы над отобранными элементами, функцию $ можно использовать и по формуле
$.метод()
В последнем случае вызывается не метод обертки, а метод самой функции (вспомним, что функции в JavaScript — это объекты, значит, у них могут быть собственные свойства и методы).
Например, можно написать:
$.trim(" текст ")
Функция trim выполняет усечение строки, то есть удаляет начальные и конечные пробелы. Записанное выше выражение вернет строку "текст".
Методы самой функции $ называются в jQuery вспомогательными функциями. Вспомогательные функции расширяют основную функциональность библиотеки.