Фреймворк jquery что это

Обновлено: 05.07.2024

jQuery — это популярный сегодня JavaScript-фреймворк, основной функцией которого является обеспечение взаимодействия между HTML и JavaScript на странице. Был создан Джоном Ресигом и впервые опубликован на конференции BarCamp в 2006 году. jQuery обладает следующими возможностями:

переход по дереву DOM, включая поддержку XPath как плагина;
события;
визуальные эффекты;
AJAX-дополнения;
JavaScript-плагины.

Сама библиотека jQuery включается в веб-страницу как один внешний JavaScript-файл. Инициализация происходит следующим образом:

Вызов методов jQuery может осуществляться двумя способами:

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

jQuery не просто упрощает работу с JavaScript — он даже немного расширяет функциональность языка

Типичным примером манипуляции несколькими узлами DOM одновременно может являться вызов функции $ со строкой селектора CSS, что возвращает объект jQuery, содержащий некоторое количество элементов страницы. Эти элементы после обрабатываются методами jQuery. Например:

Это найдет все элементы div с классом test и все элементы p с классом quote, а затем добавит им всем класс blue и визуально плавно опустит вниз.

Методы, которые начинаются с $., удобно применять для обработки глобальных объектов, например, следующий код добавит на страницу 234:

$.each([1,2,3], function() document.write(this + 1);
>);

Использование $.ajax и соответствующей функции позволит использовать методы Ajax.

Как уже упоминалось, еще недавно jQuery заметно уступал подобным ему решениям типа Prototype по причине отсутствия грамотного ООП-подхода. Однако в конце марта Джон Ресиг, автор библиотеки jQuery, дополнил ее classy query. Как ни странно, сам создатель пока не советует использовать подобный подход, аргументируя это недостаточной проработанностью class query. Но в любом случае с точки зрения синтаксиса языка код на jQuery теперь будет выглядит вполне (фанатам Rails и Django ниже лучше не смотреть, дабы сохранить психическое равновесие на остаток дня) читабельно, например, так:

Для работы с jQuery программисту или дизайнеру понадобятся знания не только JavaScript, но и CSS. Не думаю, что это кому-то может показаться странным: CSS нынче распространен очень широко, а селектор jQuery отталкивается именно от принципов CSS. Например:

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

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

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

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

Символ $, столь широко используемый в jQuery, согласно легенде, взят далеко не наобум

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

jQuery вводит только один объект в глобальное пространство имен — это объект jQuery. Все остальное — это или свойство библиотеки, или метод объекта. Некоторые библиотеки напрямую расширяют встроенные в JS классы String и Array, что может быть небезопасно. String.prototype и Array.prototype являются самостоятельными глобальными пространствами имен, добавление каких-либо свойств в них может ввести опасность коллизий, связанных с использованием одних и тех же переменных. В jQuery имеются некоторые функции, расширяющие возможности JavaScript, но каждая из них является доступной как свойство объекта jQuery: .each; .extend; .grep; .map; .merge; .trim. Они по определению не могут конфликтовать с каким-либо другим кодом.

$, по сути, является сокращением для jQuery. Ввод этого символа производится достаточно мягко: если вам вдруг потребуется ваша прежняя функция $ (если есть, к примеру, часть кода на Prototype), вы можете просто вызвать jQuery.noConflict(), для того чтобы вернуть свою старую функцию $. Ну а если требуется ограничить использование функции $ для jQuery, не забивая себе голову переживаниями о возможных коллизиях при другом использовании функции $, документация jQuery предлагает следующее решение:

(function($) // Внутри этого блока $ относится к jQuery
// Изящно, правда?
>)(jQuery);

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

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

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

jQuery предоставляет разработчику неслыханную свободу действий в использовании JavaScript по полной

Некоторые разработчики считают, и вполне обоснованно, что лучшие веб-приложения — это те, которые могут полноценно функционировать при отключенных скриптах. Конечно же, лучшим решением для достижения такой цели является ненавязчивый JavaScript, когда события назначаются элементам только после того, как вся HTML-страница у пользователя загрузится полностью. И jQuery замечательно поддерживает этот подход. Парадигма селекторов для выбора узла является основополагающей как для jQuery, так и для ненавязчивого программирования в целом. jQuery обеспечивает решение проблемы window.onload, основанное на исследованиях Дена Эдвардса по работе события DOM loaded в различных браузерах. Вы можете выставить функцию-обработчик тогда, когда DOM будет к ней готов:

И даже больше, вы можете сократить эту запись, назначив вашу функцию напрямую jQuery:

Нельзя обойти стороной и модный Ajax. У jQuery, по мнению некоторых, лучший API для работы с Ajax среди больших библиотек. Наиболее простая форма Ajax-вызова выглядит так:

Но как поведет себя фреймворк, если потребуется что-то более сложное, скажем, индикатор Ajax-загрузки? jQuery предоставляет набор собственных событий: ajaxStart, ajaxCompete, ajaxError и других для использования. Присутствует и более продвинутый API низкого уровня для сложных Ajax-взаимодействий:

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

Как и было обещано — далеко не полный список интересных плагинов и расширений для jQuery.

Изображения

ThickBox — галерея, аналог lightbox.
FancyBox — еще одна галерея.
Galleria — галерея.
Multimedia portfolio — горизонтальный слайдер с видео, картинками и звуком.
imgAreaSelect — выделение области для вырезания.
Анимированный блок изображений, подходит при портфолио и панорамах.
Lightbox с более плавной анимацией, чем в Рrototype.

Таблицы

InGrid — Ajax-таблица, но не на JSON, а на открытом HTML.

Формы

DamnSmallRTE — маленький WYSIWYG.
NiceForms — обрамляет элементы input элементами div с закругленными углами, стилизует radio и checkbox.
FaceBook like — автоподсказки.
JQuery select — конвертирует все элементы select в ul, которые можно более гибко стилизовать.
MaskedInput — маска заполнения input-форм.
Закачка файлов с созданием элементов iframe.
Манипуляция checkbox и radio с превращением в iРhone-стиль.
jGrow — размер textarea в зависимости от размера текста.
jWYSIWYG — простейший редактор.
ajaxForm — формы для использования пересылки через Ajax.
DatePicker — показывает и генерирует календарик под указанными полями.

Layout

RoundedCorners — закругленные углы при помощи генерации элемента canvas.
CodaSlider — слайды в дополнение к вкладкам (tabs).

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

Что такое jQuery и её поддержка браузерами

jQuery — это быстрая, лёгкая и многофункциональная JavaScript библиотека, основанная на принципе «пиши меньше, делай больше».

Её создал Джон Резиг в начале 2006 года. В настоящее время jQuery разрабатывается и поддерживается распределенной группой разработчиков как проект с открытым исходным кодом.

Сейчас последней версией jQuery является 3.5.1. Она поддерживается во всех основных браузерах: Chrome, Firefox, Safari, Edge, Opera и Internet Explorer 9+.

Преимущества и недостатки jQuery

Преимущества, которые даёт нам библиотеки jQuery при её использовании для написания клиентских сценариев:

компактность кода . Позволяет писать код более компактно чем на чистом javaScript, т.е. за гораздо меньшее количество строк кода.
простой и понятный синтаксис . Значительно упрощает написание многих вещей, например, таких как манипулирование DOM элементами, обработку событий, добавление эффектов анимации на страницу, AJAX запросов и т.д.
кроссбраузерность . Код написанный на jQuery будет гарантированно работать во всех основных браузерах. В то время как код, написанный на чистом JavaScript надо будет однозначно проверять во всех браузерах. Т.к. некоторые фрагменты кода могут не поддерживаться и их реализацию для этих браузеров нужно будет выполнять как-то по-другому, или например, использовать полифиллы.
открытый код . Библиотека jQuery является полностью бесплатной как для личных, так и для коммерческих проектов.

Кроме преимуществ, приведённых выше, у библиотеки jQuery имеются конечно и недостатки.

К недостаткам jQuery можно отнести то, что она может немного увеличивать скорость загрузки веб-страницы (её сжатый размер составляет около 30КБ), а также немного снижать производительность выполнения кода, чем если он был бы написан на чистом JavaScript.

Статистика использования jQuery

Если перейти к статистике, то многие крупные компании, используют jQuery в своих приложениях и сайтах. При этом растущий тренд продолжается, несмотря на очень горячие дискуссии в ИТ сообществах на тему: «Стоит ли использовать jQuery или нет в 2021 году?»

Что можно делать с jQuery

jQuery позволяет очень легко:

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

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

Как скачать jQuery

Для загрузки нам доступны 2 версии: полная и slim . Отличается slim от полной только тем, что в ней отсутствует часть модулей, а именно ajax и effects . Если функции входящие в эти модули нужны, то тогда следует выбрать полную версию. В противном случае – slim .

Кроме этого, каждая из них доступна нам как в сжатом (с суффиксом min ) так и в несжатом виде.

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

На продакшене лучше применять сжатый вариант jQuery (с расширением min.js ). Он меньше весит, и, следовательно, быстрее загружается. А это очень важно для производительности сайта.

Уменьшение объема JavaScript кода библиотеки jQuery осуществляется за счёт минимизации. Минимизация – это процесс, который заключается в удалении из исходного кода всего лишнего (комментариев, незначащих пробелов, переносов строк, символов табуляции) и замене имен функций и переменных на более короткие.

Кроме этого, существуют разные ветки jQuery: 1.x , 2.x и 3.x .

jQuery 1.x следует использовать если нужна поддержка IE 6 – 8.

jQuery 2.x построено на том же API, что 1.x. Но имеет меньший размер и более высокую производительность. Это было достигнуто благодаря тому, что из неё был удалён устаревший код, необходимый для поддержки IE 6 – 8. Таким образом 2.x можно использовать только в том случае, если вам не нужна поддержка этих старых браузеров.

jQuery 3.x – последняя ветка (3.5.1 – последняя версия). В большинстве случаев рекомендуется выбирать её, если конечно вам не нужна поддержка IE 6 – 8. В отличие от предыдущих веток она имеет множество улучшений (поддержку промисов, работу с анимацией через requestAnimationFrame и др.) и исправлений. Кроме этого, она доступна как в полном формате, так и slim .

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

Для скачивания jQuery с официального сайта нажмите правой кнопкой мыши на нужную ссылку и выберите пункт «Сохранить ссылку как. ».

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

Как подключить скрипт jQuery в html

Подключение jQuery к странице осуществляется также как и любого другого JavaScript файла. Т.е. посредством добавления в HTML тега <script> с атрибутом src , в котором необходимо задать полный или относительный путь к файлу.

Подключение последней версии jQuery:

При этом разместить <script> можно как секции в <head> , так и в <body> . Но где же лучше?

Раньше (до появления режимов async и defer ) это рекомендовалось делать перед закрывающим тегом body :

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

Если бы мы сделали это по-другому, например, поместили script в раздел head , то создали бы «задержку» при обработке страницы в самом её начале. А это привело бы к тому, что пользователю пришлось бы дольше ждать отображения контента страницы.

Но сейчас так делать не рекомендуется. Лучше размещать скрипты как можно выше (в разделе <head> ) с добавлением к ним атрибута defer или async . Эти атрибуты будут «говорить» браузеру, что скрипт нужно загрузить в фоне, не останавливая при этом основной поток обработки страницы. Это позволит сделать сайт более производительным.

При этом, если на странице имеется несколько внешних скриптов с атрибутом defer , то они будут выполняться строго в том порядке, в котором они расположены в коде.

Пример отложенного подключения jQuery и своего внешнего скрипта, зависящего от этой библиотеки:

При непосредственном размещении JavaScript кода в HTML документе его необходимо поместить в обработчик события DOMContentLoaded (в этом случае его код выполнится после загрузки библиотеки jQuery):

Как подключить jQuery с CDN

CDN (Content Delivery Network) – это технология, которая позволяет увеличить скорость доставки контента конечным пользователям.

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

Т.е. CDN предоставляет ещё один способ подключить библиотеку jQuery. При этом непосредственно загружать его себе на сервер не нужно, он будет браться с CDN.

Загрузку jQuery с CDN предоставляют множество компаний, например, таких как Google, Microsoft, Cloudflare, jQuery, Yandex и т.д.

Подключить jQuery с CDN очень просто. Для этого нужно вставить script с атрибутом src , в котором прописать путь до этой библиотеки.

Код для онлайн подключения jQuery последней версии (3.5.1) с Google CDN:

Если нужна не эта, а какая-то другая версия, то тогда следует перейти страницу Google CDN и выбрать её.

Например, ссылка для подключения версии из ветки 1.x (1.12.4):

Google CDN для последней версии из ветки 2.x (2.2.4):

Другие популярные CDN

Yandex CDN (последняя опубликованная версия 3.3.1):

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

Как проверить подключён ли jQuery

Проверить подключён ли jQuery к странице можно так:

Если нужно выполнить те или иные действия в зависимости от того подключен jQuery к странице или нет:

Пример, в котором показано как можно добавить jQuery на страницу, если он ещё не загружен:

Узнать версию jQuery, которая у вас подключена к странице можно следующим образом:

Как использовать jQuery на странице

Синтаксис jQuery начинается с функции jQuery или с более короткого и красивого псевдонима - знака $ (как в этом примере).

Что делать при конфликте jQuery с другой библиотекой

Но что делать если знак $ у вас занят и используется другой библиотекой?

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

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

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

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

Все о jQuery

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

В то время, когда это было выпущено, это было особенно полезно из-за несоответствий, которые существовали среди реализаций 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:

Когда вы работаете с 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-интерфейсами эффектов, но это естественно, если у вас есть достаточно времени для работы с библиотекой и документацией.

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

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

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

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

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

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

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

jQuery Mobile

С домашней страницы 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. Вы также можете просмотреть все мои курсы и учебные материалы на моей странице профиля.

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

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

Разберёмся со значением термина, сферами и случаями использования, а также сделаем краткий экскурс в историю.

Содержание:

Историческая справка

jQuery – это фреймворк, библиотека, созданная для взаимодействия языка программирования JavaScript и языка гипертекстовой разметки HTML. Представлен общественности он был в 2006 году на одной из конференций, посвященных разработкам в области соцсетей и браузеров, которая проходила в Нью-Йорке. Автор проекта – молодой программист Джон Резиг, возглавляющий проект и ныне.

Джон освоил HTML и начал программировать на Basic, и это пришлось парню по душе. Со временем Джон перешел на Visual Basic и занялся дизайном веб-сайтов.

Когда пришло время создать страницу с пользовательским скроллингом, программист очень разочаровался в возможностях используемых языков программирования, и принялся за JavaScript.

Уж его потенциал показался неисчерпаемым в решении появившихся за время использования VB проблем.

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

Это и упростит разработку, и снимет все вопросы о браузерной и кроссплатформенной совместимости. Отсюда и началась разработка фреймворка.

Понятия

Фреймворк (русский аналог термина – каркас) представляет собой программную платформу, служащую средством определения структуры приложения. Используется в разработке ПО, где необходимо обращаться к значительным и малым фрагментам кода и компонентам, которые и были объединены платформой, в данном случае jQuery.

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

Ясность в понимании предыдущего предложения внесёт определения DOM – это универсальный кроссплатформенный (не зависит от используемой операционной системы и используемого языка программирования) пользовательский интерфейс, посредством коего программы и мини-программы (скрипты) способны открывать HTML и XML-файлы для их корректировки.

При этом правила, условия или ограничения фактически отсутствуют, что открывает перед юзером неограниченные возможности по обработке и изменению содержимого HTML.

Любой известный документ представляется в виде иерархического дерева, в коем каждая ветка и её дочерние элементы – это атрибуты, графические или текстовые объекты.

Читайте также: