Что такое JQuery?

Что такое JQuery?

От автора: один из плюсов стать разработчиков в том, что если вы разобрались с одним языком и получили какие-то знания, вы легко сможете воплотить полученные знания в других сферах разработки. В этой статье мы подробно расскажем про все возможности 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, то это очень просто.

/**
 * Код ищет блок div с ID "my unique element"
 * и прячет его.
 */
$( 'div#my-unique-element' ).hide();

Если нужно пройтись циклом по всем тегам span, это тоже можно сделать:

/**
 * Основной способ объявления циклов в jQuery. Будут
 * найдены все теги span на странице, и вы сможете
 * пройтись по каждому из них в цикле.
 */
$( 'span' ).each(function() {
    // Тут можно работать с тегами span
});

Циклы мы подробнее разберем в следующей секции, там мы покажем кое-какой дополнительный функционал по манипуляциям над страницей. Это простые примеры, но код может стать гораздо сложнее, особенно если использовать сцепку методов. К примеру:

$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 можно через цикл:

/**
 * Основной способ объявления циклов в 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

Источник: http://code.tutsplus.com/

Редакция: Команда webformyself.

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Владимир

    Молодцы. Долго иска, что бы кто-нибудь рассказал о начинке этой библиотеки. Первый шаг сделан
    Спасибо

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree