что значит в jquery
jQuery — javascript библиотека, использование которой делает разработку на javascript кода намного быстрее и проще. В недалеком прошлом эта библиотека позволяла быстро разрабатывать скрипты. В настоящее время чистый javascript продвинулся настолько, что использование jQuery для многих проектов становится ненужным. Например: как обойтись без jQuery.
Подключение jQuery к вашему сайту
Можно скачать библиотеку jQuery с официального сайта и положить у себя на сайте, после этого подключить следующей командой:
Можно воспользоваться хостингом библиотек от гугла или яндекса, тогда соответственно вызов будет следующий:
Особенно актуально, если используете метрику или аналитику.
Возможности библиотеки jQuery
Формат запроса jQuery выглядит следующим образом:
$(‘селектор’).действие(‘свойства действия’);
Поиск элемента на странице (селекторы)
Комбинированные селекторы
Селекторы, находящиеся в одном выражении, взаимодействуют между собой практически так же, как в правилах CSS
next»
Селекторы по атрибутам
= value]»
Простые фильтры
Фильтры, с помощью которых можно уточнить результат других селекторов. По назначению и синтаксису они очень похожи на псевдоклассы в CSS
| «:focus» | элемент, находящийся в фокусе |
| «:first» | первый найденный элемент |
| «:last» | последний найденный элемент |
| «:eq( )» | элемент идущий под заданным номером среди выбранных |
| «:not(selector)» | все найденные элементы, кроме указанных в selector |
| «:even» | элементы с четными номерами позиций, в наборе выбранных элементов |
| «:odd» | элементы с нечетными номерами позиций, в наборе выбранных элементов |
| «:gt( )» | элементы с индексом превышающим n |
| «:lt( )» | элементы с индексом меньшим, чем n |
| «:header» | элементы, являющиеся заголовками (с тегами h1, h2 и.т.д.) |
| «:animated» | элементы, которые в данный момент задействованы в анимации |
| «:hidden» | невидимые элементы страницы |
| «:visible» | видимые элементы страницы |
| «:lang(language)» | элементы, в которых указаны языки содержимого |
| «:root» | элемент, который является корневым в документе |
Фильтры по содержимому
| «:contains(text)» | элементы, содержащие заданный текст |
| «:empty» | элементы без содержимого (без текста и других элементов) |
| «:has(selector)» | элементы, которые содержат хотя бы один элемент из selector |
| «:parent» | непустые элементы |
Фильтры дочерних элементов
Данные селекторы отфильтровывают элементы по их расположению в родительских элементах
Азы jQuery
Библиотека jQuery позволяет легко манипулировать кодом HTML после его отображения в браузере. Она также предоставляет инструменты, которые помогут пользователю взаимодействовать с вашей страницей; инструменты, которые помогут вам создавать анимацию; и инструменты, которые позволяют вам общаться с сервером без перезагрузки страницы. Мы вскоре до всего этого доберёмся. Для начала рассмотрим некоторые основы jQuery, а также применим jQuery для его основной работы: получить какие-то элементы и что-то с ними сделать.
Это руководство предполагает, что вы знакомы с HTML и селекторами CSS. Если вы не знаете, как применять селекторы к определённым элементам, то должны потратить некоторое время и быстро войти в курс дела, прежде чем приступать к работе с этим руководством.
Конечно, если вы уже видели любой jQuery-код, то, вероятно, больше привыкли к чему-то вроде этого:
$(document).ready()
Получаем некоторые элементы
Другие способы создания объекта jQuery
Моя выборка содержит что-нибудь?
Внимание! Ошибочный код
Мы можем сократить проверку ещё больше, если вспомним, что 0 это ложное значение:
Получение отдельных элементов из выборки
Заметьте, что вы не можете вызвать методы jQuery для исходных элементов DOM. Поэтому следующий пример работать не будет:
Создание новых элементов
Вы также можете создать элемент, передавая объект с информацией о его создании:
Обратите внимание, что мы должны указать свойство class в кавычках, поскольку class это зарезервированное слово в JavaScript и написание без кавычек вызовет ошибки в некоторых браузерах. Смотрите документацию jQuery для получения подробной информации о разных свойствах, которые можно включать в объект.
Мы рассмотрим как добавлять созданные элементы на страницу в следующем разделе, в котором рассказывается о передвижении по документу и манипуляции c ним.
Работа с выборкой
После создания объекта jQuery содержащего вашу выборку, вы, вероятно, хотите что-то с ней сделать. Но до этого рассмотрим несколько принципов, которые являются ключевыми для понимания того, что делает jQuery.
Проверка выборки
Получение, установка и неявный перебор
Неявный перебор означает, что jQuery автоматически перебирает все элементы в выборке, когда вы вызываете для выборки устанавливающий метод. Это означает, что если вы хотите сделать что-то для всех элементов в выборке, то не должны вызывать метод для каждого элемента в вашей выборке — просто вызываете метод для самой выборки и jQuery обработает элементы для вас.
Вы также можете передать функцию в метод установки jQuery. Возвращаемое значение этой функции используется в качестве нового значения и оно получает два аргумента: индекс элемента в выборке и старое значение, которое вы пытаетесь изменить. Это полезно, когда вам необходима информация о текущем состоянии элемента, чтобы правильно установить новое состояние.
Явный перебор
Цепочки
Одной из самых выгодных частей jQuery является способность «сцеплять» методы вместе. Это означает, что мы можем вызвать набор методов для выборки без её повторения или сохранения выборки в переменной. Мы даже можем сделать новые выборки на основе предыдущих и всё без разрыва цепочки.
Цепочки возможны, потому что каждый устанавливающий метод в jQuery возвращает выборку, с которой он был вызван. Это чрезвычайно мощная особенность и многие библиотеки взяли её на вооружение. Тем не менее, она должна применяться с осторожностью. Большие цепочки могут сделать код чрезвычайно трудным для чтения, изменения и отладки. Нет жёстких правил, насколько длинной должна быть цепочка, но даже для простой цепочки выше, вероятно, следует провести рефакторинг для удобства чтения.
Резюме
У нас получился отличный обзор как тикает jQuery. В следующем разделе мы рассмотрим как на деле начать выполнять с ним разные штуки!
jQuery изнутри — введение
По работе мне несколько раз приходилось участвовать в собеседовании кандидатов на должность клиент-сайдера у нас в компании, смотреть на их познания в Javascript. Удивительно что никто из них не знал толком как же работает jQuery изнутри, даже те, кто отметил свои знания jQuery уровнем «отлично», увы.
У jQuery очень низкий порог вхождения, о нем часто пишут и используют всюду, где только можно (и даже там, где, в общем-то, не нужно), поэтому некоторые даже не смотрят на чистый Javascript. Зачем, мол, его знать, когда есть jQuery, а по нему — тонны примеров и готовых плагинов? Даже на Хабре видел статью про рисование на Canvas, где автор подключил jQuery и использовал его только один раз — для того, чтобы получить доступ к Canvas по его идентификатору. И не считал это чем-то ненормальным.
Извините, отвлекся. Суть поста и следующих частей серии в том, чтобы рассказать о том, как же работает библиотека изнутри и что же в ней происходит по мере выполнения каких-то методов.
Исходники
Исходники проекта лежат вот тут. Все разбито на несколько модулей, собирается (у кого-то даже успешно) в одно целое с помощью Grunt. Для разбора в статье я буду использовать код последней стабильной версии (на момент написания статьи это — 1.8.3).
Образно, в этой статье мы рассмотрим скрипт, который можно получить склейкой intro.js. core.js, [sizzle] (мельком), sizzle-jquery.js, support.js (так же, мельком) и outro.js.
Скрипты intro.js и outro.js нужны просто чтобы обернуть код библиотеки в анонимную функцию, дабы не мусорить в window. В функцию передаются параметрами window и undefined (этот параметр — не передается, оттого и undefined). Зачем? У таких переменных не меняется названия в ходе минификации, а названия параметров функции — сжимаются и от таких манипуляций в итоге получается серьезный профит.
Инициализация
Первым делом при загрузке jQuery у нас отрабатывается core.js, ядро фреймворка. Что же происходит на этапе инициализации кроме объявления тонны использованных далее RegExp’ов и переменных:
Внимание, магия:
Именно поэтому из результата работы этого самого «конструктора» всегда можно достучаться до всех методов jQuery.
Собственно, jQuery.fn расширяется базовыми методами, среди которых jQuery.extend, с помощью которого осуществляется расширение объектов, в том числе и дальнейшее расширение функционала самого же jQuery.
Вроде бы все и относительно просто, но все это касается только core.js. Любой модуль что-то делает при загрузке и их лучше рассматривать отдельно. Отдельно упомянем support.js, в котором сразу же при инициализации проводится масса тестов для определения возможностей браузера.
Объект jQuery
Итак, что же представляет из себя объект jQuery и зачем?
Именно из-за свойства length многие почему-то заблуждаются и думают о том, что это — на самом деле массив. На самом деле свойство length поддерживается внутри jQuery вручную и является количеством возвращенных элементов, которые располагаются в нумерованных с нуля ключах-индексах объекта. Делается это именно за тем, чтобы с этим объектом можно было работать как с массивом. В свойство selector помещается строка-селектор, если мы искали по ней, а в context — контекст, по которому искали (если не задан, то он будет — document ).
jQuery.fn.init
Сначала в функции будет проверено, передан ли ей вообще селектор и в случае, если не передан (или передана пустая строка, null, false, undefined) — в этом случае нам вернется пустой объект jQuery, как если бы мы обратились к нему через window.$.
В случае, если селектор является строкой, то относительно контекста (если контекста нет, то это — document, см. о rootjQuery выше) будет выполнен метод find указанного селектора, т.е.:
Йо-хо-хо
Обратите внимание на span внутри параграфа — в результатах он тоже будет внутри него, в элементе с индексом 1.
jQuery.find
Если Вас чем-то не устраивает Sizzle, а такое бывает, вместо нее можно использовать что-то свое (или чужое), см. sizzle-jquery.js, именно там создаются ссылки на методы из Sizzle. Не забудьте в этом случае выкинуть Sizzle из билда.
Заключение
jQuery все растет и растет, уже сейчас библиотека разрослась почти до 10 тысяч строк кода (без учета Sizzle). Тем не менее исходники разбиты на несколько файлов, аккуратно написаны и даже местами прокомментированы. Не бойтесь подсматривать туда, а даже наоборот — если чувствуете, что не знаете как работает то, что Вы хотите использовать, не поленитесь посмотреть в исходники библиотеки. Это касается не только jQuery, но и вообще любой библиотеки.
Помните, что jQuery — это библиотека, цель которой не только облегчить разработчику жизнь лаконичностью кода, который получается с ее помощью, но и сделать один интерфейс для работы во всех возможных браузерах, включая доисторические, что добавляет определенный оверхед. Именно поэтому важно знать, что же делает за тебя библиотека. В некоторых случаях можно обойтись и без этих ста килобайт (помните что до сих пор видите значок Edge на своих телефонах) и без оверхеда на вызовах и тестировании возможностей браузера. К примеру, при написании расширения для Chrome или Firefox вам с вероятностью в 90% оно не принесет какого-то профита.
Статья вышла у меня не такая большая, как я боялся и это очень хорошо — читать будет легче (надеюсь). В области профессиональной веб-разработки я всего лишь лет 7, поэтому, как новичок, конечно, могу чего-то не знать, а что-то знать — не совсем (совсем не) правильно или не до конца. Не стесняйтесь меня поправлять, дополнять, критиковать, спрашивать.
Что такое jQuery?
Russian (Pусский) translation by Sergey Zhuk (you can also view the original English article)
Многие читатели Envato Tuts + имеют богатый опыт работы, культуры и того, чему они хотят научиться. Когда дело доходит до технологии, легко принять как должное тех, кто только начинает, особенно если вы сделали какой-либо тип развития в течение длительного времени.
Тем не менее, одним из приятных моментов становления разработчика является то, что как только вы освоили определенный язык и набор навыков, легко перевести их в другие области разработки.
Стремясь обеспечить максимально широкую аудиторию, мы стремимся публиковать контент, нацеленный непосредственно на новичков, которые интересуются языком, платформой или приложением.
И в этой статье мы собираемся сосредоточиться исключительно на jQuery. В частности, мы собираемся взглянуть на все, что предлагает jQuery, и на то, как оно может нам помочь, и посмотреть на некоторые из проектов, которые также были реализованы в исходной библиотеке.
Все о jQuery
Впервые выпущенный в 2006 году Джоном Ресигом, jQuery представляет собой кросс-платформенную JavaScript-библиотеку, которая упростила создание клиентских решений.
В то время, когда это было выпущено, это было особенно полезно из-за несоответствий, которые существовали среди реализаций JavaScript в Internet Explorer, Firefox и, в конечном счете, Google Chrome (который не был выпущен до 2008 года).
Определение в Википедии:
Кроме того, сам сайт jQuery гласит:
1. Обход документа HTML
Когда браузер отображает веб-страницу, это визуальное представление того, что известно как DOM (или объектная модель документа). Эта модель может быть концептуально смоделирована как структура данных дерева, где есть определенные узлы с корнями и листьями.
Например, см. Это изображение, предоставленное в Web Step Book:
Когда вы работаете с jQuery, вы можете легко перемещаться по содержимому DOM, чтобы достичь или найти узлы, элементы или значения, которые вы хотите получить.
Это означает, что если вы ищете текст элемента div с уникальным идентификатором, это легко сделать.
Мы рассмотрим эту конкретную функциональность немного больше в следующем разделе, поскольку она показывает некоторые дополнительные действия, которые вы можете сделать, чтобы манипулировать страницей.
Конечно, эти примеры просты, и все может усложниться, особенно когда мы вводим цепочку методов. Например:
На данном этапе вы не должны знать, что происходит с кодом, но он должен показать вам, какой полезной jQuery может быть в определенных ситуациях с помощью вспомогательных функций и цепочек методов.
Можно было бы утверждать, что все остальное проистекает только из этой функции. Так что с учетом сказанного, давайте продолжим смотреть на то, как это выглядит.
2. Манипуляция документами HTML
Когда дело доходит до фактического манипулирования DOM, у jQuery есть много функций, которые позволяют нам изменять то, что видят наши посетители.
Некоторые из этих функций просты, например, позволяют нам показывать ( show ) или скрывать ( hide ) элементы, которые не отображаются при загрузке страницы. Другие функции позволяют нам создавать новые элементы и добавлять ( append ) их к существующему элементу или добавлять их перед ( prepend ) всем списком.
Это все едва лишь затрагивает поверхность того, что какая функциональность манипуляции DOM доступна в jQuery. Просмотрев API, в разделе Manipulation вы можете увидеть, сколько вариантов доступно нам (наряду с хорошими примерами).
Чтобы привести дальнейшие примеры, мы также можем:
Помните, что одна из вещей, которые делают jQuery привлекательным решением для столь многих разработчиков, состоит в том, что все функции и примеры, которые мы рассматриваем в этой статье, совместимы с несколькими браузерами.
3. Обработка событий
Если вы новичок в JavaScript, то одна вещь, которая имеет ключевое значение для понимания того, как она работает со страницей, отображаемой в веб-браузере, состоит в том, что она реагирует на различные события.
То есть, когда пользователь нажимает на элемент, нажимает клавишу или щелкает мышью, тогда браузер выдает сигнал, соответствующий произошедшему событию. Это позволяет нам использовать преимущества взаимодействия пользователя с браузером.
В частности, каждый раз, когда пользователь что-то делает на странице, мы можем реагировать с помощью пользовательского события. Проблема заключается в том, что не каждый браузер реализует события одинаково (поэтому существует потребность в спецификации, но это контент для другой статьи).
К счастью, jQuery делает это намного проще, определяя последовательное имя для всех событий, чтобы мы могли использовать одно и то же имя для события, на которое мы пытаемся ответить, и оно будет работать во всех основных браузерах.
4. Анимация
Когда jQuery впервые вышел, Flash все еще был относительно популярен, и общие анимации в Интернете не были полностью мертвыми.
Когда мы говорим об анимации в контексте jQuery, мы не говорим о том же типе эффектов или поведения, которые мы привыкли видеть со старой технологией. Вместо этого мы говорим об эффектах, которые дают пользователям обратную связь, что-то случилось на экране. Кроме того, он менее инвазивный и может придать правильное чувство стиля странице или приложению при правильном использовании (хотя конечно чем-то можно и злоупотреблять).
Вы можете просмотреть API всех эффектов на этой странице, но стоит заметить, что эффекты jQuery могут варьироваться в любом месте от обработки простого выцветания и выхолащивания элементов или скользящих элементов до более сложного, например манипулирования очередью зарегистрированных эффектов для запуска потом на определенном элементе.
Конечно, в последнем случае предполагается, что у вас есть небольшой опыт работы с API-интерфейсами эффектов, но это естественно, если у вас есть достаточно времени для работы с библиотекой и документацией.
5. Ajax
Если вы не знакомы с Ajax, то, по сути, веб-страница может сделать вызов на сервер, обработать ответ и обновить часть страницы, не обновляя всю страницу. Хотя технология существует уже довольно давно, это все еще что-то действительно крутое и может обеспечить некоторые действительно аккуратные функциональные возможности в контексте страницы или веб-приложения при правильном и эффективном использовании.
Хотя поддержка Ajax не так плоха, как это было пять или десять лет назад, реализация API в разных браузерах может немного меняться. Это означает, что нам нужно написать код Ajax специально для браузера, который корпорация Майкрософт предоставляет, который Google предоставляет, который предоставляет Apple, предоставляемый Chrome, и так далее.
Как только вы привыкли к тому, что API доступен в ядре вашего приложения или в вашем распоряжении, трудно представить, что вы не работаете с ним (или с чем-то подобным).
Слово о расширяемости
Одной из особенностей, которую предлагает множество серверных фреймворков и библиотек, является возможность создания расширений для базовой кодовой базы. Современные клиентские библиотеки и платформы позволяют это, и jQuery не является исключением.
Скажем, например, вы работаете в определенной нише, в которой вы создаете одни и те же функции для каждого проекта. Или что у вас есть продукт, который вы продаете, и у вас есть немного пользовательского кода, который необходимо интегрировать с jQuery, но для него могут потребоваться различные параметры в зависимости от проекта.
Что вы будете делать?
Затем мы можем повторно использовать этот код в наших собственных проектах или сделать их доступными на сайтах, таких как GitHub, чтобы другие могли предлагать исправления, функции и т.д.
Дополнительные проекты jQuery
С момента своего создания jQuery превратился в нечто большее, чем просто библиотека JavaScript, которая предлагает нам возможность выполнять как простые, так и мощные операции в кроссплатформенном режиме.
В дополнение к основной библиотеке jQuery также привел к двум другим заметным проектам, о которых стоит упомянуть, прежде чем мы завершим эту статью. Хотя мы не собираемся рассматривать детали того, что дает каждый проект, мы возьмем высокоуровневое представление о каждом проекте, если только по какой-либо другой причине, кроме осознания того, что доступно для нас, нам нужно это для будущей работы.
jQuery UI
С домашней страницы jQuery UI:
Эта библиотека была впервые опубликована в 2007 году, примерно через год после самой jQuery. Он работает как дополнительная библиотека для jQuery, поскольку он повышает кроссплатформенную совместимость библиотеки, чтобы помочь создавать виджеты, которые можно использовать на всех веб-сайтах.
Многие из виджетов включают часто используемые функциональные возможности. Например:
Существуют также расширенные функции, такие как эффекты, утилиты и взаимодействия. Все, что мы рассмотрели до сих пор (а также что еще не успели), включает широкий спектр обратных вызовов, атрибутов и функций, которые позволяют нам взаимодействовать с ними в полной мере.
Все вышеупомянутые функции также предлагают различные темы, чтобы убедиться, что они соответствуют внешнему виду вашего веб-сайта. Наконец, все функции, описанные здесь и включенные в сайт, хорошо документированы.
jQuery Mobile
С домашней страницы jQuery Mobile:
Подобно своему коллеге по пользовательскому интерфейсу, она предлагает хорошо документированный API и настраиваемые темы, которые идеально подходят для различных устройств, на которые может ориентироваться ваш проект.
В то время как предыдущие две библиотеки предлагают набор кросс-платформенных функций, которые позволяют нам сравнительно легко писать jQuery и сопутствующие виджеты, jQuery Mobile включает в себя фреймворк CSS, которая позволяет нам также создавать пользовательские интерфейсы, которые идеально подходят для характера наших Соответствующего проекта.
Фреймворк включает в себя:
Библиотека предлагает то, что вы ожидаете от проекта, направленного на то, чтобы сделать веб-разработку намного проще для различных мобильных устройств. К ним относятся такие вещи, как:
Наконец, количество браузеров, которые все еще доступны и используются, велико. Хотя мы наблюдали уменьшение использования более ранних версий Internet Explorer и более широкое внедрение Chrome, у нас все еще есть определенные пользователи, которые придерживаются старых браузеров по ряду причин.
Иногда эти пользователи находятся в более старых браузерах из-за характера их внутренней сети. Иногда это связано с мобильными устройствами и / или телефонами, которые они используют для своей работы. И иногда это просто связано с невозможностью перейти на что-то лучшее.
Неважно, однако. JQuery Mobile предлагает поддержку большинства существующих браузеров и операционных систем. Если вы не уверены, поддерживается ли ваша платформа библиотекой, вы всегда можете проверить страницу поддержки браузера.
Дополнительные ресурсы
Заключение
Понимание того, что такое jQuery (и чем она не является) и как это связано с JavaScript, необходимо для того, чтобы вы знали, что делается для вас и что вы можете делать, когда вам нужно работать с библиотекой.
JavaScript стал одним из языков де-факто работы в Интернете. Это не без кривых обучения, а также множество фреймворков и библиотек, которые заставляют вас быть занятыми. Если вы ищете дополнительные ресурсы для изучения или использования в своей работе, ознакомьтесь с имеющимися у нас на рынке Envato.
Если этого недостаточно, есть много документации и кода с открытым исходным кодом, который также доступен для просмотра и чтения. Есть также широко доступные плагины и активный блог, чтобы держать вас в курсе всех новостей, происходящих с развитием библиотеки.
Для тех, кто интересуется JavaScript (особенно в контексте WordPress), не стесняйтесь следовать за мной в моем блоге и/или Twitter в @tommcfarlin. Вы также можете просмотреть все мои курсы и учебные материалы на моей странице профиля.
Не стесняйтесь оставлять любые вопросы или комментарии в фиде ниже, и я постараюсь ответить на каждый из них.