Что такое jquery – общие понятия и определения

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

Экскурс в историю

Создателем библиотеки стал Джон Резиг, американец, который в свое время был JavaScript-евангелистом. В начале своей программистской карьеры Джон работал в Brand Logic на полставки и заинтересовался языком JavaScript, который впоследствии изучил вдоль и поперек.

Немного позже после написания множества приложений он создал библиотеку jQuery. Впервые она была представлена в 2006 году на «BarCamp» – международной конференции, проходящей в Нью-Йорке.

Главной целью своего детища Резиг назвал возможность написать такой код, который будет упрощать JS и при этом позволит не беспокоится о кроссбраузерности. И это действительно так.

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

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

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

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

  • Кроссбраузерность. Как я уже упоминал выше, данная библиотека поддерживается во всех браузерах и приложения работают практически идентично в любом из них. Такого, к сожалению, не всегда можно сказать о JavaScript.
  • Простота. Несмотря на огромное количество дополнительных функций и несколько отличающийся синтаксис от основного языка, jQuery очень прост как для изучения, так и для понимания. А если вы уже плавали среди программного кода на JS, то изучение описываемой библиотеки не составит труда.
  • Компактность. Одно из моих любимых преимуществ, так как реализация многих задач значительно сокращается в плане количества написанных строк. Всего лишь грамотно продуманное решение таска и код можно сократить втрое!
  • Совместимость. К огромному счастью, все версии библиотеки полностью совместимы друг с другом. Поэтому переход от старых версий к новым не должен вызвать у вас трудностей.
  • Дружба с AJAX. Считаю это также нужно вынести в преимущества. В jQuery очень удобно работать с AJAX, а без него не обходится большинство качественных сайтов. Для тех, кто не знает скажу, что AJAX нужен для построения интерактивных интерфейсов веб-приложений для пользователей. Он позволяет перегружать не всю страницу, а только ту часть, которую стоит изменить вследствие каких-то действий юзера, что значительно ускоряет работу сервиса.
  • Возможности. Детище Резига наделено огромным количеством дополнительных возможностей, функций и теперь уже дополнительными библиотеками, основанными на jQuery. В качестве примера я назову две наиболее популярные. Начнем с Query UI. Это библиотека, благодаря которой можно получить готовые плагины, эффекты, темы, виджеты и многое другое. Для работы ее нужно скачать и после подключать в хедере документа. Второй не менее популярной считается jQuery Mobile. Эта библиотека облегчает жизнь разработчикам мобильных приложений.

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

  • Типизация. Так как библиотека написана на JavaScript, у нее отсутствует типизация данных. Это несколько замедляет работу кода. К тому же «словить» ошибку можно только во время выполнения этой строки с багом. До этого программа не знает, какие типы переменных задействованы, а значит компилятор никак не поможет.
  • Время компиляции. При открытии любого веб-ресурса запускаются и скрипты. Это также влияет на скорость выполнения приложения.

Из главных недостатков это, пожалуй, все. Они не катастрофичны, но все же существуют.

А как же подключить библиотеку в программном коде?

Для начала необходимо скачать нужную версию jQuery себе на компьютер. Я прикрепил ссылку на официальный сайт, откуда желательно скачивать данную технологию: http://jquery.com/download.

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

Следующий этап – загрузка полученного документа на сервер с приложением и после подключение к самому коду через тег <script>:

<script type=»text/javascript» src=»js/jquery.min.js»></script>

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

В качестве примера я приведу строку с ссылкой на CDN, организованный создателями описываемого инструмента.

<script src=»http://code.jquery.com/jquery-1.8.3.js»></script>

Хочу отметить важную деталь: как вы уже поняли, в зависимости от того, откуда вы взяли jQuery, src может отличаться. Так что перед подключением уточняйте данный параметр.

Стоит подытожить

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

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

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

Так же я рекомендую вам курс Евгения Попова Javascript + jQuery для начинающих, в котором для новичков рассказываются все азы работы с библиотекой jquery. Ознакомиться с курсом можно по ссылке.

Обязательно подписывайтесь на обновления моего блога и рассказывайте о нем своим друзьям. Желаю удачи в обучении! Пока-пока!

С уважением, Роман Чуешов

Загрузка…

Прочитано: 141 раз

romanchueshov.ru

Что такое jQuery и зачем он нужен?

Те, кто давно меня читают — знают что я люблю jQuery. Когда-то я любил нативный JavaScript и писал все на нем, но потом понял что в этом нет особого смысла почти всегда.

Но обо всем по порядку.

Что такое jQuery?

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

Первый довод за использование jQuery — кроссбраузерность. Реально, вы знаете сколько разных синтаксисов у JS? Туча! Чего стоят хотя бы способы работы с Ajax. Во всех браузерах работа эта организована по-разному. С jQuery все единообразно.

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

В общем, аякс на jQuery сделан очень просто и понятно. Это две функции get() и post() для разных методов отправки данных соответственно.

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

Четвертый довод — общедоступность и распространение. На данный момент jQuery используют Яндекс и Google. И брать ее можно с их серверов. Например, вот JavaScript-хостинг Яндекса. Для того, чтобы подключить jQuery на любую вашу страницу достаточно просто вставить строку:


<script type="text/javascript" src="http://yandex.st/jquery/1.6.0/jquery.min.js"></script>

Все. Теперь jQuery у вас подключена. Можно пользоваться.

Пятый довод — это наличие не большого, а просто огромного количества плагинов для jQuery. Хотите фотогалерею? Тыщи их! Хотите возможность делать диалоговые окна? Тултипы? Балуны? Экранные лупы? Клавиатуры? Пользовательские интерфейсы? Что? Что вам надо? Я уверен, jQuery это умеет — надо лишь найти плагин.

Что, я еще не убедил вас?

А как на счет большого сообщества (в том числе — русскоязычного) и внятнейшей документации с примерами?

В общем, если мне нужно на сайте написать что-то большее чем alert — я использую jQuery. Конечно, не всегда оно нужно — надо головой соображать все-таки. Но попробовав раз, слезть реально трудно.

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

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


Твитнуть

Понравилась статья? Поставь плюс один!

dayte2.com

Метод .on() | jQuery справочник

jQuery события

Определение и применение

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

jQuery синтаксис:

Синтаксис 1.7:
// назначение функции для одного, или нескольких событий
$( selector ).on( events, selector, data, handler ) 

events - String 
selector - String
data - Anything
handler - Function( Event eventObject, Anything extraParams )

// назначение определенному событию, или событиям своей функции
$( selector ).on( eventMap, selector, data )

eventMap - PlainObject 
selector - String
data - Anything

Добавлен в версии jQuery

1.7

Значения параметров

ПараметрОписание
eventsОдин, или несколько разделенных пробелами типов событий (опционально допускается указывать пространство имен).
Например: «click» или «click dblclick.myNamespace»
eventMapОбъект, содержащий строковый ключ, или ключи, определяющие тип события, а в качестве значения этих ключей выступает функция, которая будет выполнена каждый раз, когда конкретное событие срабатывает.
Например: {«event»: handler, «anotherEvent.myNamespace»: anotherHandler}
selectorСтрока селектора для фильтрации потомков выбранных элементов, запускающих событие. Обратите внимание, что если параметр отсутствует, или имеет значение null, то обработчик всегда вызывается при достижении выбранного элемента (не зависимо событие вызвано на элементе, или вложенном элементе).
dataКакие-либо данные, или объект, содержащий данные, которые будут переданы в обработчик событий при его срабатывании (свойство объекта Event event.data).
handlerФункция, которая будет выполнена каждый раз, когда событие срабатывает. Функция в качестве параметра может принимать объект Event и при необходимости дополнительные параметры для решения конкретной задачи. Значение false также может использоваться в качестве сокращенной записи функции, которая имеет тело return false (при вызове возвращает значение false).

Пример использования

Имена событий и пространства имён

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

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .on() (пространства имен)</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
 

	$( document ).ready(

basicweb.ru

Рассказ о том, почему я до сих пор использую jQuery / RUVDS.com corporate blog / Habr

Многие, когда речь заходит о jQuery, говорят так: «Просто пользуйтесь обычным JavaScript. Библиотека jQuery вам не нужна». Что тут сказать? Я не нуждаюсь во многих вещах, но, несмотря на это, хорошо, когда они есть. Так и jQuery. Я в этой библиотеке не нуждаюсь, но её, определённо, приятно иметь под рукой.

Сайты наподобие You might not need jQuery (YMNJQ) продвигают идею, в соответствии с которой от jQuery очень легко избавиться. Но самый первый пример на этом сайте демонстрирует вескую причину jQuery использовать. Там строка простого кода на jQuery заменяется на 10 строк обычного JS!


Большинство API JavaScript, в особенности те из них, которые нацелены на работу с DOM, оскорбляют мои эстетические чувства. Это — если мягко выразить моё к ним отношение. Если же говорить прямо, то я думаю, что эти API — полный кошмар. Например, конструкция el.insertAdjacentElement('afterend', other), безусловно, работает. Но куда приятнее выглядит $(el).after(other). Хотя мне никогда особо не нравился внешний вид функции $(), она несравненно лучше, чем то, что дают нам стандартные API для работы с DOM. Я знаю о том, что вместо $() можно использовать нечто вроде jQuery(sel) или window.jq = jQuery
. Но программирую я не в безвоздушном пространстве. Поэтому предпочитаю пользоваться стандартными приёмами. Не знаю, хорошо это или плохо, но стандартом при использовании jQuery стала конструкция $().

Попытайтесь быстро вспомнить о том, как получить элемент-сосед другого элемента средствами DOM. Что для этого использовать — nextSibling или nextElementSibling? А в чём разница? А какие браузеры поддерживают тот или иной метод? Пока вы пытаетесь это вспомнить и заглядываете на MDN, проверяя себя, я, пользуясь jQuery, просто пишу next() или prev().

Выполнение многих обычных операций реализовано в JavaScript-API неудобно. Я мог бы привести тут целый список таких операций, но за меня это отлично сделано на странице YMNJQ.

Для решения различных простых задач средствами JS нужны вспомогательные функции. И на сайте YMNJQ, опять же, можно найти немало примеров. Использование jQuery представляет собой стандартный способ включения в код проектов таких вспомогательных функций. При этом программисту не нужно каждый раз, когда ему что-то подобное понадобится, выхватывать куски кода из первых подвернувшихся под руку ответов на Stack Overflow.

Хотя в наши дни проблемы совместимости браузеров потеряли былую остроту, они всё ещё актуальны. Особенно — для тех, кто не относится к лагерю разработчиков, считающих, что если что-то работает в 85% браузеров, то им это подходит. Кстати, вот материал о том, почему Hello CSS не использует CSS-переменные.

Следует ли всегда пользоваться jQuery? Нет, конечно нет. Любая дополнительная зависимость — это рост сложности проекта и рост объёма его кода. Но jQuery — библиотека не такая уж и большая. Стандартная сборка, минифицированная и сжатая, занимает 30 Кб. Кастомная сборка без ajax и без редко используемых возможностей — это 23 Кб. А сборка, в которой вместо SizzleJS используется querySelector, занимает всего 17 Кб. Меня, для решения множества задач, вполне устраивает и стандартная сборка размером 30 Кб, и оптимизированная, размером 17 Кб.

Тут можно посмотреть на то, сколько усилий приложено к тому, чтобы убрать jQuery из Bootstrap и перейти на обычный JS.

Разработчики написали собственные вспомогательные функции. Им пришлось отказаться от поддержки IE, так как такую поддержку оказалось очень сложно реализовать. Они сделали несовместимым API («мы всё сломали») и потратили на всё это полтора года. Не могу сказать, что то, что получилось, намного лучше того, что было.

Я понимаю причины перевода Bootstrap на обычный JS. Например, разработчики хотят использовать Bootstrap с Vue.js, или ещё с чем-то подобным. А Vue.js и jQuery в одном проекте — это уже малость перебор. Я — большой сторонник сокращения объёмов ненужного кода в вебе (вот и вот — пара материалов об этом). Но тут я предлагаю смотреть на ситуацию с прагматичной и реалистичной точки зрения. Неужели включение в Bootstrap 17 Кб кода jQuery — это так плохо? Когда я говорю, что для просмотра сайтов вроде Medium или New York Times нужно загрузить больше мегабайта JavaScript-кода, меня, защищая сложившуюся ситуацию, спрашивают о том, не сижу ли я на какой-нибудь 56-килобитной модемной линии. Мегабайт JS — это нормально. Неужто 17 Кб jQuery — это неподъёмная ноша?
Существуют и веские причины jQuery не использовать. Например, jQuery не нужна в том случае, если вы пишете код, которым вы хотите поделиться с другими, или если вы создаёте какую-нибудь маленькую функцию. Но зачем выворачиваться наизнанку только ради того, чтобы не пользоваться jQuery? Зачем все эти усилия, если можно просто написать $()? Я не думаю, что jQuery стоит использовать везде и всегда, но и не считаю правильным фанатичный отказ от jQuery.

Хочу отметить, что я не женат на jQuery. Я с удовольствием буду пользоваться чем-то вроде «jQuery light» — некой библиотекой, которая перекрывает недостатки стандартных API, давая программисту что-то более приятное. Сайт YMNJQ рекомендует, кроме прочих, библиотеки bonzo и $dom, предназначенные для решения разных задач. Но многие из них, как кажется, давно не поддерживаются. Кроме того, многие уже знают jQuery. Зачем менять jQuery на что-то другое без веских причин?

Многие читатели могут задаться вопросом о том, что я, в русле этого материала, могу сказать по поводу Vue.js, React и других современных фреймворков. Но цель этой статьи — сопоставить обычный JavaScript и jQuery, а не предлагать сообществу «Грандиозную общую теорию фронтенд-разработки».

Учитывая вышесказанное, я полагаю, что могу обнаружить совсем немного причин использовать обычный JS там, где можно воспользоваться jQuery. Это так преимущественно из-за того, что я хочу создавать быстрые страницы и использовать при этом простейшие рабочие конструкции. При этом я стремлюсь к тому, чтобы мои страницы смогло бы просмотреть как можно большее количество пользователей Сети. Опыт подсказывает мне, что кратчайшим путём к достижению этой цели служат шаблоны, сгенерированные на сервере, которые слегка, в стиле «прогрессивного улучшения», приправлены JavaScript. Если сравнить такие проекты с чем-то, в чём используется нечто более сложное, то оказывается, что их часто бывает проще разрабатывать. Такие проекты обычно быстрее, в них обычно меньше ошибок, а в ходе работы над ними вентилятор ноутбука не издаёт шум, способный разбудить весь дом.

Означает ли это, что современные веб-фреймворки и мощные библиотеки — это всегда плохо? Нет, не означает. Очень немногое достойно того, чтобы «всегда» называться плохим или хорошим. Но использовать фреймворк — значит идти на некие компромиссы (это, конечно, справедливо и для jQuery).

В целом, веб мне видится средой для просмотра документов, а не чем-то вроде операционной системы. И «документный подход» хорош не только для обычных сайтов, но и для многих «веб-приложений» (что бы так ни называли).

Уважаемые читатели! Пользуетесь ли вы jQuery?

habr.com

Библиотека jQuery

333 346

Веб-программирование — Библиотека jQuery

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

Вам, наверное, уже приходилось манипулировать объектами DOM (Document Object Model — объектная модель документа) с помощью других библиотек JavaScript или встроенных функций API (Application Programming Interface — интерфейс программирования приложений), которые поддерживаются большинством современных браузеров. Однако библиотека jQuery работает намного лучше. Она превращает манипулирование объектами DOM в увлекательное занятие, временами напоминающее настоящее развлечение.

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

  • Средства jQuery необычайно выразительны. Эта библиотека позволяет добиться гораздо большего при намного меньшем объеме кода, чем в случае использования программных DOM-интерфейсов браузеров.

  • Методы jQuery применимы к целым группам элементов. Предлагаемый в DOM-модели стандартный подход, основанный на шаблонной цепочке действий «выбрать-повторить-изменить», больше не требуется. Следствием этого является уменьшение количества циклов for в коде, а значит, и снижение вероятности появления в нем ошибок.

  • Библиотека jQuery справляется с различиями в реализации DOM в различных браузерах (проблемы кросс-браузерности). Например, меня не должна беспокоить мысль об особенностях поддержки того или иного средства, чем печально славится браузер Internet Explorer (IE). Достаточно всего лишь сформулировать jQuery свои пожелания, и библиотека самостоятельно обеспечит совместимость с конкретным браузером.

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

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

Опис

professorweb.ru

jQuery изнутри — введение / Habr

По работе мне несколько раз приходилось участвовать в собеседовании кандидатов на должность клиент-сайдера у нас в компании, смотреть на их познания в 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 и его алиас $, в случае, когда они уже есть в window. Делается это на случай вызова функции noConflict, которая возвращает объект $ (а если в noConflict передан параметром true, то и jQuery) обратно на свое место, а в результате своей работы отдает нам jQuery, описанный уже в этом самом скрипте. Функция полезна, когда Вы планируете использовать свой код и jQuery на стороннем ресурсе и не хотите ничего поломать людям.

Создается локальная функция jQuery, которая и является своего рода «конструктором», которая принимает себе селектор и контекст. Функция, с которой разработчики и работают большую часть своего времени. Именно она будет в самом конце экспортирована в window.jQuery и window.$ (exports.js). Далее этот объект и будет расширяться, путем подмешивания в его прототип (jQuery.prototype, он же — jQuery.fn) дополнительных методов. Вышеупомянутый «конструктор», вызывает один из методов в jQuery.fn — init, о нем чуть ниже.

Внимание, магия:

jQuery.fn.init.prototype = jQuery.fn
Именно поэтому из результата работы этого самого «конструктора» всегда можно достучаться до всех методов jQuery.

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

Создается служебный хеш class2type, который необходим фреймворку для работы функции type и ее производных (isArray, isFunction, isNumeric и т.д.). Тут можно обратить внимание на особую магию — обычный typeof не очень удобен для определения некоторых типов переменных, поэтому в jQuery для этого и существует этот метод. Соответственно, и реализация его немножко отличается от обычного typeof.

Ну и напоследок, создается rootjQuery, переменная, в которой лежит результат выполнения jQuery(document), именно относительно него будут искаться элементы из init, если контекст не задан разработчиком напрямую.

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

Объект jQuery

Итак, что же представляет из себя объект jQuery и зачем?

Обычно результат работы $([какой-то селектор]) представляет собой примерно такой вот объект:

{
    0: Элемент,
    1: Элемент2,
    context: Элемент
    length: 2,
    selector: ‘тот самый какой-то селектор’
    __proto__: (как и писали выше, прототип у объекта - jQuery.fn)
}

Именно из-за свойства length многие почему-то заблуждаются и думают о том, что это — на самом деле массив. На самом деле свойство length поддерживается внутри jQuery вручную и является количеством возвращенных элементов, которые располагаются в нумерованных с нуля ключах-индексах объекта. Делается это именно за тем, чтобы с этим объектом можно было работать как с массивом. В свойство selector помещается строка-селектор, если мы искали по ней, а в context — контекст, по которому искали (если не задан, то он будет — document).

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

jQuery.fn.init

Итак, что проиcходит, когда мы выполняем что-то вроде $([какой-нибудь селектор])? Внимательно читали? Правильно, вызовется тот самый «конструктор». Если быть точнее — нам вернется new jQuery.fn.init([тот самый селектор]).

Сначала в функции будет проверено, передан ли ей вообще селектор и в случае, если не передан (или передана пустая строка, null, false, undefined) — в этом случае нам вернется пустой объект jQuery, как если бы мы обратились к нему через window.$.

Затем будет проверено, является ли селектор — DOM-элементом. В этом случае jQuery вернет объект прямо с этим элементом. Пример с $(document.body):

{
    0: <body>,
    context: <body>,
    length: 1,
    __proto__: ...
}

В случае, если селектор является строкой, то относительно контекста (если контекста нет, то это — document, см. о rootjQuery выше) будет выполнен метод find указанного селектора, т.е.:
$('p', document.body) -> $(document.body).find('p')
$('p') -> rootjQuery.find('p')

В случае, если селектор представляет из себя что-то вроде #id, то для поиска элемента будет вызван обычный document.getElementById (привет, чувак с Canvas из начала статьи).

А вот если вместо селектора передается html-код (это определяется по наличию знаков открытия тега вначале строки и закрытия — в конце), jQuery попытается его распарсить (parseHTML, который мы рассмотрим в в следующей части более подробно) и на основе него создать эти элементы и результат вернуть уже с ними. Вот что мы получим в результате работы $('я - на втором уровне'):

{
    0: <h2>
    1: <p>
    length: 2
    __proto__: ...
}

Обратите внимание на span внутри параграфа — в результатах он тоже будет внутри него, в элементе с индексом 1.

Для случаев, когда вместо селектора на вход поступает функция, jQuery вызовет ее, когда документ будет готов к работе. Тут использованы promise, которым следует выделить отдельную главу. Многие зачем-то пользуются чуть более длинным аналогом — $(document).ready( callback ) (в комментариях говорят что так — более читабельно), но в итоге получается то же самое.

jQuery.find

Для поиска по документу в jQuery пользуется библиотека Sizzle, так что find, а так же методы expr, unique, text, isXMLDoc и contains либо напрямую ссылаются на соответствующие им методы из Sizzle, либо представляют простые методы-обертки над ними. Как работают селекторы в jQuery писалось уже неоднократно и на Хабре все это найти можно. В итоге работы find мы получим все тот же объект jQuery со всеми найденными элементами.

Отдельной строкой решусь сказать что ни jQuery, ни Sizzle не кешируют результаты работы метода find. Да и с чего бы им это делать? Не дергайте метод часто без нужды, если есть возможность заранее все найти — найдите и положите в отдельную переменную.

Если Вас чем-то не устраивает Sizzle, а такое бывает, вместо нее можно использовать что-то свое (или чужое), см. sizzle-jquery.js, именно там создаются ссылки на методы из Sizzle. Не забудьте в этом случае выкинуть Sizzle из билда.

Заключение

jQuery все растет и растет, уже сейчас библиотека разрослась почти до 10 тысяч строк кода (без учета Sizzle). Тем не менее исходники разбиты на несколько файлов, аккуратно написаны и даже местами прокомментированы. Не бойтесь подсматривать туда, а даже наоборот — если чувствуете, что не знаете как работает то, что Вы хотите использовать, не поленитесь посмотреть в исходники библиотеки. Это касается не только jQuery, но и вообще любой библиотеки.

Помните, что jQuery — это библиотека, цель которой не только облегчить разработчику жизнь лаконичностью кода, который получается с ее помощью, но и сделать один интерфейс для работы во всех возможных браузерах, включая доисторические, что добавляет определенный оверхед. Именно поэтому важно знать, что же делает за тебя библиотека. В некоторых случаях можно обойтись и без этих ста килобайт (помните что до сих пор видите значок Edge на своих телефонах) и без оверхеда на вызовах и тестировании возможностей браузера. К примеру, при написании расширения для Chrome или Firefox вам с вероятностью в 90% оно не принесет какого-то профита.

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

P.S. Как оказалось, на Хабре уже есть статья на эту тему от замечательного автора TheShock — Как устроен jQuery: изучаем исходники. Свою статью оставляю потому, что кто-то уже добавил ее в избранное и вряд ли обрадуется надписи «статья помещена в черновики».

Содержание цикла статей

  1. Введение
  2. Парсинг html
  3. Манипуляции с DOM
  4. Атрибуты, свойства, данные

habr.com

No related posts.