Jquery — введение

Установка библиотеки jQuery UI для производственной среды

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

• jquery-ui-1.10.3.custom.min;

• jquery-ui-1.10.3.custom.min

• папка css\sunny\images

Папка images и файл CSS здесь те же, что и в версии для разработки; изменения могут касаться лишь файла JavaScript. Чтобы выполнить чистую установку, достаточно скопировать эти файлы в каталог сервера.

Использование библиотеки jQuery UI через сеть распространения содержимого

Вопрос об использовании CDN для загрузки библиотеки jQuery уже затрагивался ранее. Если вы приверженец такого подхода, то вас порадует тот факт, что точно так же можно поступить и в случае библиотеки jQuery UI. Как Google, так и Microsoft обеспечивают хостинг файлов jQuery UI в своих сетях CDN. Для нашего базового примера я использую службу Microsoft, поскольку она предоставляет как JavaScript-файлы jQuery UI, так и стандартные темы оформления.

Чтобы использовать CDN, необходимо располагать URL-адресами нужных файлов. Если речь идет о службе Microsoft, то перейдите на страницу Microsoft Ajax Content Delivery Network. Прокрутив страницу вниз, вы увидите список ссылок, соответствующих различным версиям jQuery UI. Щелкните на ссылке той версии, которую вы используете (в моем случае это версия 1.10.3). Вы увидите URL-адреса для обычной и минимизированной версий файла библиотеки jQuery UI.

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

Чтобы подключить эти файлы к документу через CDN, достаточно поместить в элементы script и link не ссылки на локальные файлы jQuery UI, а соответствующие URL-адреса, как показано в примере ниже:

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

4 – $(‘ul’).on(‘click’, ‘a’, fn);

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

Модерн

document.addEventListener('click', function(e) {
   if ( e.target.matchesSelector('ul a') ) {
      // Обработка
   }
}, false);

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

Обратите внимание, что на момент написания урока все браузеры реализовывали с использованием префиксов: , , и так далее. Для нормализации метода, вы можете написать:

var matches;
 
(function(doc) {
   matches =
      doc.matchesSelector ||
      doc.webkitMatchesSelector ||
      doc.mozMatchesSelector ||
      doc.oMatchesSelector ||
      doc.msMatchesSelector;
})(document.documentElement);
 
document.addEventListener('click', function(e) {
   if ( matches.call( e.target, 'ul a') ) {
      // Обработка
   }
}, false);

Наследие

var uls = document.getElementsByTagName('ul');
 
addEvent(uls, 'click', function() {
   var target = e.target || e.srcElement;
   if ( target && target.nodeName === 'A' ) {
      // Обработка
   }
});

Для обеспечения обратной совместимости мы проверяем, что свойство (имя целевого элемента) равно нашему запросу

Обратите внимание на факт, что старые версии Internet Explorer иногда играют своими собственными правилами. Вы не захотите получать доступ к цели непосредственно из объекта 

Зазочется использовать .

Assignment

Assignment works a little differently in jq than in most
programming languages. jq doesn’t distinguish between references
to and copies of something — two objects or arrays are either
equal or not equal, without any further notion of being «the
same object» or «not the same object».

If an object has two fields which are arrays, and ,
and you append something to , then will not get
bigger. Even if you’ve just set . If you’re used to
programming in languages like Python, Java, Ruby, Javascript,
etc. then you can think of it as though jq does a full deep copy
of every object before it does the assignment (for performance,
it doesn’t actually do that, but that’s the general idea).

Как использовать библиотеку jQuery?

После подключения библиотеки jQuery к HTML документу её можно использовать с помощью функции jQuery (). Данную функцию можно использовать не только по имени , но и по более короткому и красивому псевдониму — знаку . Не забываем, что в JavaScript функции являются тоже объектами, следовательно, — является объектом.

window.jQuery = window.$ = jQuery = $;

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

Рассмотрим работу с jQuery на следующем примере:

<div>I <strong>LOVE</strong> JQUERY!</div>

//Получить DOM-элемент body
//В результате получим объект jQuery, содержащий элемент body
$("body");
//1. Выбрать элементы div ($("div")) - получим объект jQuery, содержащий элементы div
//2. Изменим цвет текста для выбранных элементов (.css("color","red")) – используем метод jQuery .css()
$("div").css("color","red");
//вызовем цепочку методов: 
//1. Выбрать элементы div ($("div")) - получим объект jQuery, содержащий элементы div
//2. Вызовем для элементов, содержащихся в объекте jQuery, метод .css("color","red")
//3. Вызовем для элементов, содержащихся в объекте jQuery, метод .css("color","green")
$("div").css("color","red").css("color","green");
//1. Выбрать элементы strong ($("strong")) - получим объект jQuery, содержащий элементы strong
//2. Изменим контент для выбранных элементов (.text("VERY MUCH LOVE")) – используем метод jQuery .text()
$("strong").text("VERY MUCH LOVE");

«Джой»

Создавайте свой код с нуля, это прокачает ваш уровень

Перевод

Чтобы по-настоящему понять колесо, нужно его самостоятельно переизобрести.
На днях я провел собеседование на должность senior javascript разработчика. Мой коллега, который также принимал участие в собеседовании, попросил кандидата написать функцию, которая будет выполнять HTTP-запрос, и повторять его несколько раз в случае сбоя.
Поскольку он писал это на доске, псевдокода было бы достаточно. Если бы он продемонстрировал хорошее понимание вопроса, мы были бы остались довольны. Но, к сожалению, он не смог найти хорошего решения.
Подумав что он нервничает, мы решили сделать задание немного проще и попросили его преобразовать функцию на основе обратного вызова в функцию на основе Promise.
Не повезло.
Я могу сказать, что он видел подобный код раньше. Он более или менее знал, как это работает. Псевдокода, демонстрирующего, что он понимает эту концепцию, было бы достаточно.
Но код, который он написал на доске, не имел никакого смысла. У него было только смутное понимание концепции Promise в JavaScript, и он не смог рассказать про него доходчиво.
Это может быть простительно, если вы начинающий разработчик, но если вы претендуете на руководящую должность, этого недостаточно. Как он отладит сложную цепочку Promise и затем объяснит другим, что он сделал?

5 — $(‘#box’).addClass(‘wrap’);

jQuery обеспечивает удобный API для модификации имени класса для набора элементов.

Модерн

document.querySelector('#box').classList.add('wrap');

Новая техника использует новый API для добавления, удаления и переключения класса , , и ).

var container = document.querySelector('#box');
 
container.classList.add('wrap');
container.classList.remove('wrap');
container.classList.toggle('wrap');

Наследие

box = document.getElementById('box'),
 
    hasClass = function (el, cl) {
        var regex = new RegExp('(?:\\s|^)' + cl + '(?:\\s|$)');
        return !!el.className.match(regex);
    },
 
    addClass = function (el, cl) {
        el.className += ' ' + cl;
    },
 
    removeClass = function (el, cl) {
        var regex = new RegExp('(?:\\s|^)' + cl + '(?:\\s|$)');
        el.className = el.className.replace(regex, ' ');
    },
 
    toggleClass = function (el, cl) {
        hasClass(el, cl) ? removeClass(el, cl) : addClass(el, cl);
 
    };
 
addClass(box, 'drago');
removeClass(box, 'drago');
toggleClass(box, 'drago'); // Если элемент не имеет класса 'drago', добавляем его.

Обратная совместимость требует достаточно много действий.

link jQuery Migrate Plugin

We have created the
to simplify the transition from older versions of jQuery. The plugin restores deprecated features and behaviors so that older code will still run properly on newer versions of jQuery. Use the uncompressed development version to diagnose compatibility issues, it will generate warnings on the console that you can use to identify and fix problems. Use the compressed production version to simply fix compatibility issues without generating console warnings.

There are two versions of Migrate. The first will help you update your pre-1.9 jQuery code to jQuery 1.9 up to 3.0. You can get that version here:

The second version helps you update code to run on jQuery 3.0 or higher, once you have used Migrate 1.x and upgraded to jQuery 1.9 or higher:

Свойства и методы объекта Event

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

jQuery Core — All 3.x Versions

• jQuery Core 3.5.1 — uncompressed, minified, slim, slim minified
• jQuery Core 3.5.0 — uncompressed, minified, slim, slim minified
• jQuery Core 3.4.1 — uncompressed, minified, slim, slim minified
• jQuery Core 3.4.0 — uncompressed, minified, slim, slim minified
• jQuery Core 3.3.1 — uncompressed, minified, slim, slim minified
• jQuery Core 3.3.0 — uncompressed, minified, slim, slim minified
• jQuery Core 3.2.1 — uncompressed, minified, slim, slim minified
• jQuery Core 3.2.0 — uncompressed, minified, slim, slim minified
• jQuery Core 3.1.1 — uncompressed, minified, slim, slim minified
• jQuery Core 3.1.0 — uncompressed, minified, slim, slim minified
• jQuery Core 3.0.0 — uncompressed, minified, slim, slim minified

Подключение jQuery в HTML

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

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

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

Кроме того, можно включить в работу jQuery с CDN Google. Вместо вышеприведённой строчки внести запись:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Использование переменных шаблона

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

Использование переменной $data

Переменная $data возвращает текущий элемент данных, к которому применяется шаблон. Например, используемая переменная $data будет поочередно ссылаться на каждый из объектов, соответствующих отдельным видам цветов. Для получения данных в предыдущем примере в шаблоне использовался тернарный условный оператор. Такой подход вполне допустим, однако чтение получаемых при этом шаблонов часто вызывает затруднения, чего, разумеется, желательно не допускать.

Я всегда стараюсь уменьшить объем кода шаблона до необходимого минимума и поэтому предпочитаю использовать переменную $data внутри функций JavaScript, которые затем вызываю из шаблона. Соответствующий демонстрационный пример приведен ниже:

В этом примере определяется функция stockDisplay(), возвращающая значение, которое должно отображаться в элементе input. Аргументом этой функции является объект данных, который мы получаем внутри шаблона с использованием переменной $data. Учитывая, что речь идет всего лишь о простом тернарном операторе, разница в удобочитаемости кода по сравнению с предыдущим вариантом не очень значительна, но в случае более сложных выражений или в случае многократного использования выражения в пределах одного шаблона она будет гораздо более ощутимой.

Определяя функции, которые будут вызываться из шаблона, будьте внимательны. Дело в том, что такие функции должны определяться до вызова метода tmpl(). Я всегда стараюсь помещать их в конце элемента script, но если функция должна находиться внутри обработчика события ready, то непременно следует убеждаться в том, что она была ранее определена. Другой распространенной ошибкой является то, что функцию часто определяют внутри шаблона.

Использование функции $() внутри шаблона

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

Использование переменной $item

Объект, возвращаемый переменной $item, решает несколько задач. Первая из них — обеспечение возможности обмена дополнительными данными между сценарием JavaScript и шаблоном. Соответствующий пример приведен ниже:

В этом примере мы создаем объект options, для которого определяются свойство (discount) и метод (stockDisplay()). Затем этот объект передается методу tmpl() в качестве второго аргумента. Доступ к свойствам и методам объекта из шаблона обеспечивает переменная $item. Как видите, для обработки скидки в цене, здесь используется свойство discount объекта options.

Хочу обратить ваше внимание на необходимость включения префикса $ в имена контекстных переменных: $item и $data. Такой же префикс обязателен и в конструкции дескриптора шаблона ${…}, используемой для подстановки значений в шаблон

Пропуск любого из этих префиксов является одной из наиболее распространенных ошибок.

О других применениях этого объекта мы поговорим далее.

jQuery(callback)

Функция выполняет функцию (анонимную или именованную), указанную в качестве аргумента после того, как загрузка DOM-дерева будет завершена браузером.

Этот вариант функции имеет 1 аргумент:

callback (тип: Function()) — функция, которая выполнится, когда загрузка DOM-дерева будет завершена браузером.

Примечание: Функция ведёт себя также как и . Т.е. её можно использовать для оборачивания других операций на странице, которым для выполнения необходимо, чтобы DOM-дерево было полностью построено браузером.

Например, выполнить функцию после того, как DOM-дерево станет доступно для использования:

$(function() {
  //DOM-дерево готово
});

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

jQuery(function($) {
  //DOM-дерево готово
});

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

Начинаем писать код на jQuery

В вашем скрипте вы можете для начала записать код, который что-либо выводит или в консоль, или с помощью диалогового окна alert(), чтобы проверить работоспособность кода:

Проверяем скрипт на jQuery

JavaScript

$(document).ready(function(){
console.log(‘jQuery works’);
// или
alert(‘jQuery works’);
});

Можно использовать сокращенную форму записи:

Сокращенная запись функции $(document).ready()

JavaScript

$(function() {
console.log( «jQuery works!» );
});

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

Достаточно 1  раз написать вызов и весь код писать внутри этой функции вне зависимости от того, 5 строк в этом коде или 225.

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

jQuery UI 1.10

uncompressedminified

Themes

black-tieblitzercupertinodark-hivedot-luveggplantexcite-bikeflickhot-sneakshumanityle-frogmint-chocovercastpepper-grinderredmondsmoothnesssouth-streetstartsunnyswanky-pursetrontasticui-darknessui-lightnessvader

Previous Releases

• jQuery UI 1.10.3 — uncompressed, minified, theme
• jQuery UI 1.10.2 — uncompressed, minified, theme
• jQuery UI 1.10.1 — uncompressed, minified, theme
• jQuery UI 1.10.0 — uncompressed, minified, theme
• jQuery UI 1.10.0-rc.1 — uncompressed, minified, theme
• jQuery UI 1.10.0-beta.1 — uncompressed, minified, theme

О вреде CDN, сервисов и шрифтов от Google

Из песочницы

Как известно, сегодня все больше и больше разработчиков предпочитают грузить js-библиотеки из CDN Google (например, jQuery). Более того, это даже считается хорошим тоном — в более чем 50% случаев тот же jQuery находится в кэше браузера пользователя благодаря посещению других сайтов, использующих тот же CDN. И все бы хорошо — к вашему серверу меньше обращений, у пользователя сайт грузится быстрее… Видимых недостатков нет.
А что если вы работаете на глобальном рынке? Использованием googleapis вы сразу отсекаете огромную часть пользователей из Китая!
Большой китайский фаервол блокирует не только поисковик от Google, но и все его сервисы, в числе которых и CDN. Таким образом, в Китае Ваш сайт становится либо недоступен (если Вы подключаете jQuery до body), либо работает не совсем так, как вы ожидаете (если jQuery подключается в конце кода). То же самое касается шрифтов от Google, графиков от Google, reCaptcha от Google и всего остального «от Google».Вывод: Если Вам интересны пользователи из Китая — следует пересмотреть свое мнение на предмет загрузки библиотек или шрифтов с гугловских CDN.

Заключение

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

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

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

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

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

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

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