Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. jQuery
Code

Что такое jQuery?

by
Difficulty:BeginnerLength:LongLanguages:

Russian (Pусский) translation by Sergey Zhuk (you can also view the original English article)

Многие читатели Envato Tuts + имеют богатый опыт работы, культуры и того, чему они хотят научиться. Когда дело доходит до технологии, легко принять как должное тех, кто только начинает, особенно если вы сделали какой-либо тип развития в течение длительного времени.

Тем не менее, одним из приятных моментов становления разработчика является то, что как только вы освоили определенный язык и набор навыков, легко перевести их в другие области разработки.

Стремясь обеспечить максимально широкую аудиторию, мы стремимся публиковать контент, нацеленный непосредственно на новичков, которые интересуются языком, платформой или приложением.

И в этой статье мы собираемся сосредоточиться исключительно на jQuery. В частности, мы собираемся взглянуть на все, что предлагает jQuery, и на то, как оно может нам помочь, и посмотреть на некоторые из проектов, которые также были реализованы в исходной библиотеке.

Все о jQuery

Впервые выпущенный в 2006 году Джоном Ресигом, jQuery представляет собой кросс-платформенную JavaScript-библиотеку, которая упростила создание клиентских решений.

The jQuery Homepage

В то время, когда это было выпущено, это было особенно полезно из-за несоответствий, которые существовали среди реализаций JavaScript в Internet Explorer, Firefox и, в конечном счете, Google Chrome (который не был выпущен до 2008 года).

Определение в Википедии:

JQuery - это кроссплатформенная JavaScript-библиотека, предназначенная для упрощения клиентского сценария HTML. JQuery - самая популярная в настоящее время библиотека JavaScript, которая устанавливается на 65% из 10 миллионов самых посещаемых сайтов в Интернете. JQuery - это бесплатное программное обеспечение с открытым исходным кодом, лицензированное по лицензии MIT.

Кроме того, сам сайт jQuery гласит:

JQuery - быстрая, небольшая и многофункциональная библиотека JavaScript. Она делает такие вещи, как обход и манипулирование документами HTML, обработка событий, анимация и Ajax намного проще с простым в использовании API, который работает во множестве браузеров. Благодаря сочетанию универсальности и расширяемости, jQuery изменил способ, которым миллионы людей пишут JavaScript.

Но что это означает для нас как разработчиков? Возможно, лучший способ понять, что предлагает вся библиотека, - это проверить, что она предлагает.

1. Обход документа HTML

Когда браузер отображает веб-страницу, это визуальное представление того, что известно как DOM (или объектная модель документа). Эта модель может быть концептуально смоделирована как структура данных дерева, где есть определенные узлы с корнями и листьями.

Например, см. Это изображение, предоставленное в Web Step Book:

An example of the DOM for a basic web page

Когда вы работаете с jQuery, вы можете легко перемещаться по содержимому DOM, чтобы достичь или найти узлы, элементы или значения, которые вы хотите получить.

Это означает, что если вы ищете текст элемента div с уникальным идентификатором, это легко сделать.

Если вы пытаетесь перебрать все элементы span, вы можете сделать это:

Мы рассмотрим эту конкретную функциональность немного больше в следующем разделе, поскольку она показывает некоторые дополнительные действия, которые вы можете сделать, чтобы манипулировать страницей.

Конечно, эти примеры просты, и все может усложниться, особенно когда мы вводим цепочку методов. Например:

На данном этапе вы не должны знать, что происходит с кодом, но он должен показать вам, какой полезной jQuery может быть в определенных ситуациях с помощью вспомогательных функций и цепочек методов.

Достаточно сказать, что мощь jQuery заключается в его способности запрашивать DOM (отсюда и имя jQuery), а затем вносить в нее корректировки с помощью хорошо документированного API (который изобилует примерами использования каждой функции) .

Можно было бы утверждать, что все остальное проистекает только из этой функции. Так что с учетом сказанного, давайте продолжим смотреть на то, как это выглядит.

2. Манипуляция документами HTML

Когда дело доходит до фактического манипулирования DOM, у jQuery есть много функций, которые позволяют нам изменять то, что видят наши посетители.

Некоторые из этих функций просты, например, позволяют нам показывать (show) или скрывать (hide) элементы, которые не отображаются при загрузке страницы. Другие функции позволяют нам создавать новые элементы и добавлять (append) их к существующему элементу или добавлять их перед (prepend) всем списком.

Если вы пытаетесь перебрать все элементы span, чтобы добавить к ним атрибут класса, вы также можете это сделать:

Это все едва лишь затрагивает поверхность того, что какая функциональность манипуляции DOM доступна в jQuery. Просмотрев API, в разделе Manipulation вы можете увидеть, сколько вариантов доступно нам (наряду с хорошими примерами).

Чтобы привести дальнейшие примеры, мы также можем:

  • Определить высоту или ширину документа, окна или любого заданного элемента
  • получить значения из любого заданного элемента (при условии, что он предлагает эту возможность)
  • Переключать имена классов
  • и многое другое

Помните, что одна из вещей, которые делают jQuery привлекательным решением для столь многих разработчиков, состоит в том, что все функции и примеры, которые мы рассматриваем в этой статье, совместимы с несколькими браузерами.

3. Обработка событий

Если вы новичок в JavaScript, то одна вещь, которая имеет ключевое значение для понимания того, как она работает со страницей, отображаемой в веб-браузере, состоит в том, что она реагирует на различные события.

То есть, когда пользователь нажимает на элемент, нажимает клавишу или щелкает мышью, тогда браузер выдает сигнал, соответствующий произошедшему событию. Это позволяет нам использовать преимущества взаимодействия пользователя с браузером.

В частности, каждый раз, когда пользователь что-то делает на странице, мы можем реагировать с помощью пользовательского события. Проблема заключается в том, что не каждый браузер реализует события одинаково (поэтому существует потребность в спецификации, но это контент для другой статьи).

К счастью, jQuery делает это намного проще, определяя последовательное имя для всех событий, чтобы мы могли использовать одно и то же имя для события, на которое мы пытаемся ответить, и оно будет работать во всех основных браузерах.

4. Анимация

Когда jQuery впервые вышел, Flash все еще был относительно популярен, и общие анимации в Интернете не были полностью мертвыми.

Когда мы говорим об анимации в контексте jQuery, мы не говорим о том же типе эффектов или поведения, которые мы привыкли видеть со старой технологией. Вместо этого мы говорим об эффектах, которые дают пользователям обратную связь, что-то случилось на экране. Кроме того, он менее инвазивный и может придать правильное чувство стиля странице или приложению при правильном использовании (хотя конечно чем-то можно и злоупотреблять).

Вы можете просмотреть API всех эффектов на этой странице, но стоит заметить, что эффекты jQuery могут варьироваться в любом месте от обработки простого выцветания и выхолащивания элементов или скользящих элементов до более сложного, например манипулирования очередью зарегистрированных эффектов для запуска потом на определенном элементе.

Конечно, в последнем случае предполагается, что у вас есть небольшой опыт работы с API-интерфейсами эффектов, но это естественно, если у вас есть достаточно времени для работы с библиотекой и документацией.

5. Ajax

Если вы не знакомы с Ajax, то, по сути, веб-страница может сделать вызов на сервер, обработать ответ и обновить часть страницы, не обновляя всю страницу. Хотя технология существует уже довольно давно, это все еще что-то действительно крутое и может обеспечить некоторые действительно аккуратные функциональные возможности в контексте страницы или веб-приложения при правильном и эффективном использовании.

Хотя поддержка Ajax не так плоха, как это было пять или десять лет назад, реализация API в разных браузерах может немного меняться. Это означает, что нам нужно написать код Ajax специально для браузера, который корпорация Майкрософт предоставляет, который Google предоставляет, который предоставляет Apple, предоставляемый Chrome, и так далее.

По крайней мере, так обстоит дело без jQuery. Благодаря поддержке Ajax, мы можем использовать Ajax несколькими способами, не сталкиваясь с несогласованностью кросс-браузера. На самом деле тривиально легко обрабатывать запросы GET и POST, а также возможность совершать гораздо более сложные вызовы с помощью метода $.ajax.

Как только вы привыкли к тому, что API доступен в ядре вашего приложения или в вашем распоряжении, трудно представить, что вы не работаете с ним (или с чем-то подобным).

Слово о расширяемости

Одной из особенностей, которую предлагает множество серверных фреймворков и библиотек, является возможность создания расширений для базовой кодовой базы. Современные клиентские библиотеки и платформы позволяют это, и jQuery не является исключением.

Скажем, например, вы работаете в определенной нише, в которой вы создаете одни и те же функции для каждого проекта. Или что у вас есть продукт, который вы продаете, и у вас есть немного пользовательского кода, который необходимо интегрировать с jQuery, но для него могут потребоваться различные параметры в зависимости от проекта.

Что вы будете делать?

К счастью, jQuery поддерживает плагины. Это означает, что мы, как разработчики, не только можем использовать плагины, которые другие написали (некоторые из них доступны на веб-сайте jQuery, другие доступны на GitHub), но мы также можем разрабатывать собственные плагины .

Затем мы можем повторно использовать этот код в наших собственных проектах или сделать их доступными на сайтах, таких как GitHub, чтобы другие могли предлагать исправления, функции и т.д.

Дополнительные проекты jQuery

С момента своего создания jQuery превратился в нечто большее, чем просто библиотека JavaScript, которая предлагает нам возможность выполнять как простые, так и мощные операции в кроссплатформенном режиме.

В дополнение к основной библиотеке jQuery также привел к двум другим заметным проектам, о которых стоит упомянуть, прежде чем мы завершим эту статью. Хотя мы не собираемся рассматривать детали того, что дает каждый проект, мы возьмем высокоуровневое представление о каждом проекте, если только по какой-либо другой причине, кроме осознания того, что доступно для нас, нам нужно это для будущей работы.

jQuery UI

The jQuery UI Homepage

С домашней страницы jQuery UI:

JQuery UI - это кураторский набор взаимодействий, эффектов, виджетов и тем пользовательского интерфейса, встроенных в библиотеку jQuery JavaScript. Если вы создаете интерактивные веб-приложения или вам просто нужно добавить средство выбора даты в элемент управления формы, jQuery UI - это идеальный выбор.

Эта библиотека была впервые опубликована в 2007 году, примерно через год после самой jQuery. Он работает как дополнительная библиотека для jQuery, поскольку он повышает кроссплатформенную совместимость библиотеки, чтобы помочь создавать виджеты, которые можно использовать на всех веб-сайтах.

Многие из виджетов включают часто используемые функциональные возможности. Например:

Существуют также расширенные функции, такие как эффекты, утилиты и взаимодействия. Все, что мы рассмотрели до сих пор (а также что еще не успели), включает широкий спектр обратных вызовов, атрибутов и функций, которые позволяют нам взаимодействовать с ними в полной мере.

Все вышеупомянутые функции также предлагают различные темы, чтобы убедиться, что они соответствуют внешнему виду вашего веб-сайта. Наконец, все функции, описанные здесь и включенные в сайт, хорошо документированы.

jQuery Mobile

The jQuery Mobile Homepage

С домашней страницы jQuery Mobile:

JQuery Mobile - это система пользовательского интерфейса на основе HTML5, предназначенная для создания гибких веб-сайтов и приложений, которые доступны на всех смартфонах, планшетах и настольных устройствах.

Эта библиотека является самым последним введением в семейство библиотек, выпущенных в 2010 году (последний стабильный релиз - в 2014 году).

Подобно своему коллеге по пользовательскому интерфейсу, она предлагает хорошо документированный API и настраиваемые темы, которые идеально подходят для различных устройств, на которые может ориентироваться ваш проект.

В то время как предыдущие две библиотеки предлагают набор кросс-платформенных функций, которые позволяют нам сравнительно легко писать jQuery и сопутствующие виджеты, jQuery Mobile включает в себя фреймворк CSS, которая позволяет нам также создавать пользовательские интерфейсы, которые идеально подходят для характера наших Соответствующего проекта.

Фреймворк включает в себя:

Библиотека предлагает то, что вы ожидаете от проекта, направленного на то, чтобы сделать веб-разработку намного проще для различных мобильных устройств. К ним относятся такие вещи, как:

Наконец, количество браузеров, которые все еще доступны и используются, велико. Хотя мы наблюдали уменьшение использования более ранних версий Internet Explorer и более широкое внедрение Chrome, у нас все еще есть определенные пользователи, которые придерживаются старых браузеров по ряду причин.

Иногда эти пользователи находятся в более старых браузерах из-за характера их внутренней сети. Иногда это связано с мобильными устройствами и / или телефонами, которые они используют для своей работы. И иногда это просто связано с невозможностью перейти на что-то лучшее.

Неважно, однако. JQuery Mobile предлагает поддержку большинства существующих браузеров и операционных систем. Если вы не уверены, поддерживается ли ваша платформа  библиотекой, вы всегда можете проверить страницу поддержки браузера.

Дополнительные ресурсы

Заключение

Понимание того, что такое jQuery (и чем она не является) и как это связано с JavaScript, необходимо для того, чтобы вы знали, что делается для вас и что вы можете делать, когда вам нужно работать с библиотекой.

Как уже упоминалось ранее, некоторые могут возразить, что вам нужно сначала изучить JavaScript, а затем изучить jQuery; Другие могут возразить, что изучение jQuery - отличный способ проложить свой путь назад к JavaScript.

В любом случае, jQuery - это давняя библиотека в экосреде JavaScript, и она используется в ряде очень популярных проектов (таких как WordPress), поэтому ее стоит изучить.

JavaScript стал одним из языков де-факто работы в Интернете. Это не без кривых обучения, а также множество фреймворков и библиотек, которые заставляют вас быть занятыми. Если вы ищете дополнительные ресурсы для изучения или использования в своей работе, ознакомьтесь с имеющимися у нас на рынке Envato.

Если этого недостаточно, есть много документации и кода с открытым исходным кодом, который также доступен для просмотра и чтения. Есть также широко доступные плагины и активный блог, чтобы держать вас в курсе всех новостей, происходящих с развитием библиотеки.

Для тех, кто интересуется JavaScript (особенно в контексте WordPress), не стесняйтесь следовать за мной в моем блоге и/или Twitter в @tommcfarlin. Вы также можете просмотреть все мои курсы и учебные материалы на моей странице профиля.

Не стесняйтесь оставлять любые вопросы или комментарии в фиде ниже, и я постараюсь ответить на каждый из них.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.