jQuery – это наверное одна из самых популярных библиотек JavaScript, позволяющая вам быстро приступить к работе, обрабатывая многие нудные детали программирования на JavaScript за вас. jQuery – девиз которого «пиши меньше, делай больше» – делает программирование увлекательным, быстрым и полезным. С помощью jQuery вы можете за одну строчку кода достичь десятков (если не больше) строк программирования на чистом JavaScript.
Библиотеки JavaScript
Многим программам на JavaScript приходится сталкиваться с одним и тем же набором задач веб-страницы снова и снова: выбор элемента, добавление нового содержимого, скрытие и отображение содержимого, изменение атрибутов тега, определение значения полей формы и обеспечение реакции программ на взаимодействия разных пользователей. К счастью, библиотеки JavaScript предлагают возможность обойти многие трудоемкие детали программирования.
Библиотека JavaScript – это сборник кода JavaScript, который предоставляет простые решения для многих часто встречающихся задач JavaScript. Думайте об этом как о коллекции предварительно написанных функций JavaScript, которые вы добавляете на свою веб-страницу. Эти функции облегчают выполнение общих задач. Часто у вас будет возможность заменить многие строки вашего собственного JavaScript-кода (и часы, необходимые для их тестирования) одной функцией из библиотеки JavaScript. Существует множество библиотек JavaScript, и многие из них помогают создавать крупные веб-сайты, такие как Yahoo!, Amazon, CNN, Apple и Twitter.
jQuery считается одной из самых популярных таких библиотек и добилась она этого благодаря своим преимуществам:
- Относительно небольшой размер файла. Сжатая версия библиотеки составляет всего около 96 КБ для версии 1.11 и 83 КБ для версии 2.1. (Если ваш веб-сервер использует сжатие "gzip", вы можете уменьшить размер файла аж до 38 КБ!);
- Дружелюбный к веб-дизайнерам. JQuery не считает вас за ученого. Он использует возможности CSS, о которых знают большинство веб-дизайнеров;
- Проверенный и верный инструмент. jQuery используется на миллионах сайтов, включая многие популярные веб-сайты с высокой посещаемостью, такие как Pinterest, MSN.com, Amazon, Microsoft.com, Craigslist и ESPN. Фактически, он используется на более чем 57 процентах сайтов по всему миру. Тот факт, что jQuery настолько популярен, является свидетельством того, насколько он хорош;
- Он бесплатен. А это из самых любимых наших аргументов;
- Большое сообщество разработчиков. Пока вы это читаете, множество людей работают над проектом jQuery: пишут код, исправляют ошибки, добавляют новые функции и обновляют веб-сайт документацией и учебными пособиями. Библиотека JavaScript, созданная одним программистом (или предоставленная одним автором), может легко исчезнуть, если программист (или автор) устает от проекта. С другой стороны, jQuery просуществует долгое время, ведь он разрабатывается усилиями программистов по всему миру. Даже крупные компании, такие как Microsoft и Adobe, предоставляют своих инженеров для помощи в написании программного кода. Это как если бы куча программистов писали бы JavaScript-код для вас за бесплатно;
- Плагины, плагины и еще раз плагины. jQuery позволяет другим программистам создавать подключаемые модули – дополнительные JavaScript-программы, которые работают вместе с jQuery и добавляют в него новые возможности, эффекты или функции на веб-страницу. Буквально тысячи разнообразных плагинов доступны для интеграции с jQuery.
Установка jQuery
jQuery – это просто набор кода JavaScript во внешнем файле JavaScript. Как и любой другой внешний файл JavaScript, вам необходимо связать его с вашей веб-страницей. Однако, поскольку jQuery очень популярен, у вас есть несколько возможностей прикрепления его на веб-страницу: вы можете использовать версию, размещенную в Google, Microsoft или jQuery.com или же можете загрузите файл jQuery на свой компьютер и уже после добавить его на веб-сайт.
Первый метод использует CDN или сеть распространения контента. То есть на другом веб-сайте размещается файл jQuery и отправляется всем, кто его запрашивает. У этого подхода есть несколько плюсов: во-первых, вы можете сэкономить веб-серверу несколько миллисекунд, позволяя Google, Microsoft или jQuery обрабатывать передачу файла посетителям вашего сайта. Кроме того, CDN имеет дополнительное преимущество, поскольку серверы расположены по всему миру. Так что, если кто-то в Сингапуре посетит ваш сайт, он получит файл jQuery с сервера, который, вероятно, намного ближе к нему, чем ваш веб-сервер, а это значит, что он получит файл быстрее, и ваш сайт отобразится тоже намного быстрее. И, наконец, поскольку другие дизайнеры также используют этот CDN, весьма вероятно, что кто-то, посетивший ваш сайт, уже сохранил файл jQuery в кэше своего браузера. Поскольку он уже загрузил файл jQuery из Google при посещении другого сайта, ему не нужно будет делать этого снова при посещении вашего сайта.
Однако есть и несколько недостатков в использовании CDN: во-первых, чтобы этот метод работал, пользователи должны быть подключены к интернету. Это становится проблемой, если вам нужно убедиться в том, что ваш сайт работает в автономном режиме, например, в киоске в музее или во время демонстрации программирования в классной комнате без интернета. В этом случае вам нужно будет скачать файл jQuery с jQuery.com и добавить его на свой веб-сайт. Добавление собственного файла jQuery также гарантирует, что ваш сайт продолжит работу, если серверы CDN выйдут из строя (Впрочем, если серверы Google когда-либо выйдут из строя, в мире могут возникнуть более серьезные проблемы, чем работа вашего веб-сайта).
Добавление jQuery на страницу
Если вы используете одну из CDN-версий jQuery, вы можете указать на нее с помощью одного из фрагментов кода. Например, чтобы использовать версию jQuery для Google CDN, вы должны добавить теги <script> в заголовок страницы следующим образом:
После того, как вы загрузили jQuery на свой компьютер, вы сообщаете веб-странице, что хотите использовать его. Файл jQuery – это просто внешний файл .js, поэтому вы присоединяете его, как и любой внешний файл JavaScript. Например, вы сохранили файл jquery.js в папке с именем js в корневой папке вашего сайта. Чтобы прикрепить файл к домашней странице, вы должны добавить следующий тег сценария в ее заголовок:
После того, как вы прикрепите файл jQuery, можно будет добавить свои собственные сценарии, которые используют расширенные функции jQuery. Следующим шагом является добавление второго набора тегов <script> с небольшим количеством программирования на jQuery:
Второй набор тегов <script> содержит любые элементы программирования, которые вы хотите добавить на определенную веб-страницу; однако вы наверняка задаетесь вопросом, что это за $(document).ready()? Функция $(document).ready() – это интегрированная функция jQuery, которая ждет, пока HTML-страница загрузится, прежде чем запустить ваш скрипт.
Зачем это делать? Потому что большая часть программирования на JavaScript направлена на манипулирование содержимым веб-страницы: например, анимация div, постепенное исчезновение изображения, отображение меню, когда посетитель перемещается по ссылке и так далее. Чтобы сделать что-то веселое и интерактивное с элементом страницы, JavaScript должен выбрать его. Однако JavaScript не может выбрать тег HTML, пока веб-браузер не загрузит его. Веб-браузер немедленно запускает любой JavaScript, с которым он сталкивается, поэтому остальная часть страницы не загружается немедленно.
Несколько вещей, о которых не стоит забывать
- Ссылка на файл jQuery должна предшествовать любому программированию, которое использует jQuery. Другими словами, не помещайте никакие другие теги скрипта перед тегом <script>, который загружает jQuery.
- Помещайте свой JavaScript-код после любых таблиц стилей CSS (как связанных, внешних таблиц стилей, так и внутренних). Поскольку программирование jQuery часто ссылается на стили из таблицы стилей, вы должны поместить свое программирование JavaScript после того, как веб-браузер загрузит любые стили. Хорошее практическое правило – размещать свои программы на JavaScript (все свои теги <script>) после любого другого содержимого внутри тега <head>, но перед закрывающим тегом </head>.
- Добавьте комментарий JavaScript – например, //end ready – после }); это отмечает конец функции ready(). Например:
Лучшие плагины для jQuery
Effect
Effect – это простой плагин, который позволяет назначать несколько эффектов анимации для элемента на веб-странице. Нажатие назначенной кнопки с выбранным желаемым эффектом приведет к тому, что элемент страницы будет вести себя по-разному: отскок, исчезновение в виде сгиба, скольжение, исчезновение и т. д.
Autocomplete
Вы знаете, что на панели поиска на крупных веб-сайтах, таких как Google.com, есть функция автозаполнения, которая начинает предлагать варианты завершения ввода текста? Вы можете добавить одну из этих красот JavaScript в свой собственный проект с помощью этого плагина автозаполнения jQuery.
ScrollMagic
Плагин ScrollMagic использует код jQuery для анимации элементов веб-страницы на основе расположения полосы прокрутки пользователя (полоса в правой части окна браузера, которая позволяет перемещаться вверх и вниз по странице). Вы можете либо вызвать анимацию при прокрутке страницы, либо синхронизировать анимацию с позицией прокрутки.
blueimp Gallery
Blueimp Gallery – это адаптивная (то есть настраиваемая для отображения на настольных и мобильных экранах) галерея изображений, которой можно управлять при помощи мыши на рабочем столе или проводя пальцем по телефону или планшету. Этот плагин может быть настроен для отображения изображений или видео в формате карусели, а также может отображать изображения в режиме лайтбокса.
Slider
Еще одна вездесущая функция веб-страницы, предоставленная вам JavaScript – это ползунки, используемые для регулировки громкости и других уровней на веб-странице. Плагин Slider использует библиотеку jQuery для назначения числовых значений на горизонтальной полосе. Затем ползунок можно перемещать вверх и вниз по панели с помощью клавиш со стрелками мыши или клавиатуры.