От автора: один из плюсов стать разработчиков в том, что если вы разобрались с одним языком и получили какие-то знания, вы легко сможете воплотить полученные знания в других сферах разработки. В этой статье мы подробно расскажем про все возможности JQuery и то, что она может нам предложить. Также мы разберем пару успешных проектов, работающих под управлением JQuery.
Все о JQuery
John Resig, выпустив в 2006 году библиотеку JQuery, видел ее, как кроссплатформенную JS библиотеку, призванную облегчить написание программных решений на стороне клиента.
Библиотека была очень нужна в то время, так как на момент релиза в браузерах Internet Explorer, Firefox и позже Google Chrome (вышедший в 2008) были разные подходы к написанию JS кода.
Из Wikipedia: «JQuery – кроссплатформенная JavaScript библиотека, призванная упростить написание скриптов в HTML. На сегодняшний день JQuery является самой популярной JS библиотекой. 65% из 10 миллионов веб-сайтов с самым высоким трафиком используют данную библиотеку. JQuery является абсолютно бесплатным программным обеспечением с открытым исходным кодом, распространяющемся по лицензии MIT License.»
С сайта jQuery: «JQuery – быстрая, легковесная и многофункциональная JavaScript библиотека. С помощью простого и кроссбраузерного API библиотека сильно упрощает перемещение и манипуляции с HTML документами, обработку событий, анимацию, а также работу с технологией Ajax. Благодаря своей гибкости и расширяемости JQuery изменил жизнь миллионов людей, пишущих на JavaScript.»
И что это все значит для нас, разработчиков? Лучший способ понять все возможности библиотеки это посмотреть, что она может нам предложить.
Перемещение по HTML документу
Когда браузер отрисовывает веб-страницу, мы видим перед собой только визуальное представление такого понятия, как DOM (объектной модели документа). Эту модель можно концептуально представить в виде дерева с узлами, корнями и листьями. К примеру, представление модели с сайта Web Step Book:
В JQuery вы легко можете перемещаться по DOM в поисках нужных узлов, элементов или значений, которые нужно получить. Т.е. если вы ищите DIV с каким-либо текстом, у которого задан ID, то это очень просто.
|
1 2 3 4 5 |
/** * Код ищет блок div с ID "my unique element" * и прячет его. */ $( 'div#my-unique-element' ).hide(); |
Если нужно пройтись циклом по всем тегам span, это тоже можно сделать:
|
1 2 3 4 5 6 7 8 |
/** * Основной способ объявления циклов в jQuery. Будут * найдены все теги span на странице, и вы сможете * пройтись по каждому из них в цикле. */ $( 'span' ).each(function() { // Тут можно работать с тегами span }); |
Циклы мы подробнее разберем в следующей секции, там мы покажем кое-какой дополнительный функционал по манипуляциям над страницей. Это простые примеры, но код может стать гораздо сложнее, особенно если использовать сцепку методов. К примеру:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$excerpt.on( 'keydown', function( evt ) { if ( ( 17 === evt.keyCode || 91 === evt.keyCode ) || 86 === evt.keyCode ) { if ( -1 === $.inArray( evt.keyCode, keymap ) ) { keymap.push( evt.keyCode ); } } }).on( 'keyup', function() { if ( user_has_pasted_content( keymap ) ) { resize_textarea( this ); keymap = []; } }); |
На данном этапе вы не должны понимать, что происходит в коде выше, но код должен показать вам то, насколько JQuery может быть полезным в определенных ситуациях при использовании вспомогательных функций и сцепки методов.
Достаточно отметить тот факт, что мощь JQuery лежит в его способности делать запросы в DOM (откуда и название JQuery) и вносить последующие изменения в него при помощи хорошо прописанного API (которое пестрит примерами использования функций).
Кто-то может сказать, что весь остальной функционал исходит из вышеописанной способности. Запомним это и продолжим разбираться в библиотеке.
Манипуляции с HTML документами
Если говорить о реальной манипуляции DOM, в JQuery обширный функционал, с помощью которого можно изменять то, что видят пользователи.
Некоторые из функций совсем простые, такие как show и hide, с помощью которых можно показывать и прятать элементы, которые не должны быть видимыми на странице. С помощью других функций можно создавать новые элементы и вставлять их перед закрывающим тегом существующего элемента (функция append) или вставлять новые теги после открывающего тега существующего элемента (функция prepend). Добавить класс ко всем элементам span можно через цикл:
|
1 2 3 4 5 6 7 8 |
/** * Основной способ объявления циклов в jQuery. Сначала будут * найдены все теги span на странице, потом * к ним будет добавлен специальный класс. */ $( 'span' ).each(function() { $( this ).addClass( 'my-custom-class' ); }); |
Это лишь малая толика того, что можно сделать с DOM в JQuery. Если зайти на сайт API, под разделом Manipulation можно посмотреть весь список доступных манипуляций (а также хорошие примеры). Мы можем:
Задавать высоту и ширину документа в целом, окна или одного элемента
Получать значения заданного элемента (если они у него есть)
Изменять классы
И многое другое
Не забывайте, что множество разработчиков выбирают JQuery из-за полностью кроссбраузерных функций и примеров, которые мы сегодня рассматриваем в нашей статье.
Обработка событий
Если вы совсем новичок в JavaScript, то ключом к пониманию того, как JS взаимодействует со страницей, отображаемой в браузере, является понимание того, как язык обрабатывает различные события.
Т.е. когда пользователь кликает на элемент, нажимает клавишу или просто кликает мышкой, браузер создает сигнал вызванного события. Именно таким образом в языке обрабатываются интерактивные события браузера.
Каждый раз когда пользователь делает что-то с веб-страницей, мы можем ответить ему при помощи пользовательского события. Проблема в том, что не все браузеры одинаково выполняют одни и те же события (именно по этой причине нужна спецификация, но это уже материал для другой статьи).
К счастью в JQuery всем именам присвоены специальные имена, с помощью которых мы можем обрабатывать все события во всех браузерах одинаково.
Анимация
На момент выхода JQuery в сети был довольно популярен Flash с его анимацией. Но когда мы говорим об анимации в JQuery, то там эффекты отличаются от тех, которые были в старых технологиях. Под анимацией в JQuery понимается тот эффект, когда пользователи чувствуют обратную связь от произошедшего на экране. Кроме того, новая анимация не такая агрессивная и может придать странице или приложению стиль при правильном использовании (но не стоит этим злоупотреблять).
По ссылке можно посмотреть все эффекты API. Стоит отметить, что в JQuery эффекты разнятся от обработки простых плавных появлений и исчезновений элементов или слайдов до более сложных вещей типа манипуляции нескольких эффектов, повешенных на элемент.
В последнем случае предполагается некоторый опыт работы с API, который приходит постепенно при работе с библиотекой и документацией.
Ajax
Для тех, кто не знаком с Ajax: с помощью Ajax веб-страница может делать запросы на сервер, обрабатывать ответ и обновлять часть страницы без полного обновления. Технология не нова, но до сих пор хорошо справляется со своими обязанностями. В Ajax есть действительно отличный функционал, который может оказаться полезным при правильно использовании.
Поддержка у Ajax уже намного лучше, чем 5 лет назад, но реализация API все же может чуть-чуть отличаться в разных браузерах. Т.е. нам нужно писать Ajax код под браузеры от Microsoft, Google, Apple, Chrome и т.д. отдельно.
Без JQuery нам бы пришлось писать код под все браузеры, однако благодаря JQuery мы получаем кроссбраузерный способ. По факту, библиотека облегчает обработку GET и POST запросов, а более продвинутые запросы можно делать через метод $.ajax. Как только вы привыкнете к этому API в ваших приложениях, вы не сможете без него обойтись.
Немного о расширяемости
Одна из возможностей, которая есть в серверных фреймворках и библиотеках, это возможность создания расширений к стандартному коду. Во всех современных клиентских библиотеках и фреймворках есть такая возможность, и JQuery не исключение.
К примеру, вы работаете в определенной области и создаете один и тот же функционал для приложений. Или у вас есть продукт, который вы продаете, и у вас есть какой-то код, который нужно интегрировать в JQuery, но для разных проектов будут нужны различные параметры. Что тогда делать?
К нашему счастью в JQuery поддерживаются плагины. Т.е. мы, как разработчики, можем не просто выбирать из списка готовых плагинов (некоторые из них можно посмотреть на сайте jQuery и GitHub), но можем и сами их писать.
Мы можем повторно использовать данный код в других своих проектах, или же можно разместить код на сайтах типа GitHub, чтобы другие пользователи могли вносить в кода правки, улучшения, дополнительные функции и т.д.
Дополнительные проекты JQuery
С момента своего выхода JQuery выросла в нечто большее, чем просто JS библиотека, с помощью которой можно проделывать одновременно простые по коду и сложные по функционалу операции во всех браузерах.
В дополнение к базовой библиотеке JQuery появились два других стоящих проекта, о которых стоит немного рассказать, прежде чем завершать данную статью. Мы не будем вдаваться в детали возможностей проектов, а просто поверхностно рассмотрим каждый проект, чтобы знать о том, что он может нам предложить.
JQuery UI
С домашней страницы jQuery UI: «JQuery UI – готовый набор взаимодействий, эффектов, виджетов и тем с пользовательским интерфейсом на основе последней версии JQuery, библиотеки JS. JQuery UI отлично подходит для создания, как высокоинтерактивных веб-приложений, так и для того, чтобы просто добавить элемент выбора даты.»
Библиотека вышла в 2007, через год после релиза JQuery. Библиотека является дополнительной к JQuery и использует кроссплатформенность родительницы для того, чтобы можно было создавать виджеты, работающие на всех веб-сайтах.
Большая часть виджетов использует распространенный функционал. К примеру:
Элементы выбора даты
Диалоговые окна
Прогресс бары
Тултипы
Автозаполнение
И т.д.
Также есть расширенный функционал, такой как эффекты, утилиты и взаимодействия. В наши знания (а также то, что мы не знаем) на данный момент входят всевозможные колбэк функции, атрибуты, а также функции, которые позволяют нам взаимодействовать с объектами.
Все вышеупомянутые функции поставляются в различных темах для того, чтобы функционал подходил к вашему веб-сайту. К тому же, все описанные в статье и на сайте функции хорошо задокументированы.
JQuery Mobile
С домашней страницы jQuery Mobile: «JQuery Mobile – HTML5 система пользовательского интерфейса, спроектированная для создания адаптивных веб-сайтов и приложений, которые будут доступны на всех смартфонах, планшетах и ПК.»
Библиотека является самым новым продуктом в линейке библиотек с 2010 года (последняя стабильная версия вышла в 2014).
Как и в UI собрате, тут есть хорошо прописанное API и пользовательские темы, которые идеально подходят для различных устройств.
Две предыдущие библиотеки предлагают нам кроссплатформенные функции, с помощью которых можно относительно просто писать JQuery и виджеты, в jQuery Mobile же входит CSS фреймворк, с помощью которого также можно создавать пользовательские интерфейсы, идеально подходящие под наши проекты.
Фреймворк включает в себя:
CSS классы
сетку
адаптивную сетку
темы по умолчанию
Библиотека предлагает все то, что можно ожидать от проекта, направленного на облегчение веб-разработки под различные мобильные устройства. Среди ее возможностей:
Набор иконок
События, работающие на всех устройствах
Свойства активной страницы
Виджеты для мобильных интерфейсов
К тому же, в сети еще полно подходящих для данной технологии браузеров. Мы уже видели снижение доли старых версий Internet Explorer и скачок популярности Chrome, однако еще остаются пользователи, сидящие из-под старых браузеров по тем или иным причинам.
Иногда пользователям приходится работать в старых браузерах из-за особенностей интранета в их компании. Иногда людям выдают на работе какие-то мобильные устройства или телефоны. А иногда это просто связано с невозможностью обновить браузер.
Все это не имеет значения, JQuery Mobile поддерживает большинство существующих браузеров и операционных систем. Если вы не уверены в поддержке выбранной вами платформы, вы можете посмотреть это на странице поддержки.
Заключение
Чтобы понимать возможности библиотеки важно понимать, что такое JQuery (а также чем она не является), и как она связана с JavaScript. Как выше уже говорилось, ведутся дискуссии на тему, что сначала нужно изучать JavaScript и только потом JQuery; другие же могут сказать, что JQuery – отличный способ изучить JavaScript.
Так или иначе, JQuery является довольно старой библиотекой JavaScript, которая используется в ряде популярных проектов (среди которых и WordPress), и ее изучение поможет вам тем или иным способом. Де факто JavaScript стал один из языков работы в интернете. В нем есть свои сложные моменты, а также множество фреймворков и библиотек, которые вы можете изучить.
Если и этого мало, есть большая документация и открытый исходный код. Также есть множество плагинов, а также блог проекта, чтобы вы были в курсе всех последних новостей о разработке библиотеки.
Автор: Tom McFarlin
Источник: //code.tutsplus.com/
Редакция: Команда webformyself.
Комментарии (1)