Как подключить библиотеку jquery
Содержание:
- С помощью файла functions.php
- Подключение jQuery на WordPress
- Подключаем jQuery со страницы своего сайта
- Обращение к элементам в jQuery
- Пример JSON JQuery.each()
- Где скачать библиотеку
- Used By
- Манипуляция с найденными элементами
- jQuery Core — All 3.x Versions
- События jQuery
- Used By
- Как подключить jQuery с CDN
- Первый сценарий jQuery
- link jQuery Migrate Plugin
- Добавление событий к динамически созданным объектам
- Правила работы с библиотекой jQuery
- Подключение jQuery с помощью файла js
- Как подключить jQuery на свою страницу с сайта Google и других внешних источников
С помощью файла functions.php
И ещё один альтернативный способ подключения jQuery предложен Kama, который считает, что его вариант наиболее правильный. Суть заключается в том, что в WordPress уже есть программный метод добавления скриптов на страницу при помощи функций, например:
wp_register_script() wp_enqueue_script() wp_deregister_script()
Такой метод предотвращает конфликты, когда один и тот же скрипт подключается разными плагинами. Это облегчает работу при оптимизации загрузки js файлов, что уменьшает время загрузки страниц сайта. В этом случае, скрипты можно объединить в один файл. А браузер получит их в сжатом виде.
Для правильного подключения jQuery надо воспользоваться функцией wp_enqueue_script(). Скрипт в данном случае подключается один раз. Файл functions.php необходимо дополнить такими строками:
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method(){
wp_enqueue_script( 'jquery' );
}
Теперь, если посмотреть исходный код страницы, то в head появится следующая запись:
<script src='https://your-super-site.ru/wp-includes/js/jquery/jquery.js?ver=3.5.1'></script>
Можно ли подключить jQuery по этому способу с CDN Google? Отличная новость — да! Вот этот код от Kama совершит чудо:
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method() {
// отменяем зарегистрированный jQuery
// чтобы отменить jquery-migrate, вместо "jquery-core" вписать "jquery"
wp_deregister_script( 'jquery-core' );
wp_register_script( 'jquery-core', '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
wp_enqueue_script( 'jquery' );
}
Его снова вписываем в файл functions.php. Результат работы кода:
<script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script> <script src='http://example.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
Когда jquery-migrate.js не требуется, но нужен только jQuery, то следует дополнить functions.php таким кодом:
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method() {
// отменяем зарегистрированный jQuery
wp_deregister_script('jquery-core');
wp_deregister_script('jquery');
// регистрируем
wp_register_script( 'jquery-core', 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js', false, null, true );
wp_register_script( 'jquery', false, array('jquery-core'), null, true );
// подключаем
wp_enqueue_script( 'jquery' );
}
В этом случае увидим лишь такую строку в head:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
В строке 9 «true» означает что скрипт подключится, по возможности, в футер сайта.
И ещё один вариант подключения той версии jQuery, которую использует WordPress. Вот код:
add_action( 'wp_enqueue_scripts', 'my_scripts_method', 99 );
function my_scripts_method() {
// получаем версию jQuery
wp_enqueue_script( 'jquery' );
// для версий WP меньше 3.6 'jquery' нужно поменять на 'jquery-core'
$wp_jquery_ver = $GLOBALS->registered->ver;
$jquery_ver = $wp_jquery_ver == '' ? '1.11.0' : $wp_jquery_ver;
wp_deregister_script( 'jquery-core' );
wp_register_script( 'jquery-core', '//ajax.googleapis.com/ajax/libs/jquery/'. $jquery_ver .'/jquery.min.js' );
wp_enqueue_script( 'jquery' );
}
Подключение jQuery на WordPress
Подключение jQuery в WordPress производится автоматически, поэтому нет никакой необходимости подключать библиотеки других версий вручную. Это происходит в шаблоне с помощью php кода:
<?php wp_head(); ?>
В итоге внутри тега HEAD появится строка подключения jQuery.
На момент написания статьи с WordPress поставляется jQuery v1.12.4 Но, как видите, версия библиотеки очень сильно отличается от той, которую подключали в примерах выше. Подключить свежую версию библиотеки возможно, но есть шанс возникновения конфликта.
Чтобы избежать конфликта, но при этом использовать ту версию библиотеки, которая необходима, нужно воспользоваться правильным способом подключения jQuery в файле functions.php:
<?php
function my_jquery_scripts() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js');
wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_jquery_scripts' );
?>
Тут сначала отключается стандартная библиотека, а потом через Google API подключаем версию 3.1.1
Внимание! Учтите, этот код будет работать только в том случае, если в вашей теме присутствуют wp_head() и wp_footer()
Подключаем jQuery со страницы своего сайта
И так, ситуация первая
Предположим, что у Вас есть сайт (не важно где, на локальном или реальном хостинге). Вы сами пишете этот сайт или его страницу, то есть не используете никаких CMS (систем управления сайтом), как WordPress
И вот, Вы хотите подключить jQuery на некую веб-страницу, и эта библиотека должна загружаться с Вашего сайта.
1. Загружаем свежую версию jQuery
Самое первое, что стоит сделать, это скачать её свежую версию с сайта разработчика. Там, сразу на главной странице, нам предложат 2 варианта jQuery (PRODUCTION и DEVELOPMENT). По функциональности эти варианты идентичны. Вариант “DEVELOPMENT” («разработка») — это, грубо говоря, исходный код этой библиотеки, он структурирован в удобном для чтения виде с кучей комментариев, и предназначен в первую очередь для разработчиков, которые захотят посмотреть, как всё устроено внутри jQuery, что-то там изменить или найти ошибки. Вариант “PRODUCTION” — это сжатый вариант библиотеки, оттуда удалены все комментарии, и этот вариант занимает намного меньше места (32Кб против 250Кб), следовательно страница, на которую будет подключена эта библиотека, будет загружаться быстрее. Так что советую Вам выбрать именно эту версию. Затем надо будет нажать кнопку «Download». Скорее всего, перед Вами появиться jQuery в текстовом виде, и библиотеку можно будет сохранить в нужное место через меню браузера «Сохранить страницу как».
2. Закачиваем jQuery на сайт
Затем библиотеку необходимо «положить» в какое-то место на сайте, то есть закачать на сайт. Если Вы используете реальный хостинг, то сделать это можно, загрузив jQuery через панель управления сайта, или же через FTP. Далее будем считать, что в главной директории Вашего сайта есть поддиректория “javascript”, в которую складываются всякие библиотеки, и jQuery Вы тоже положили туда.
Если Вы используете локальный хостинг типа Денвера, тогда тоже можно создать директорию “javascript” в корневом каталоге Вашего сайта, и скопировать туда библиотеку.
3. Создаём веб-страницу и вставляем туда ссылку на jQuery
Структура веб-страницы, на которую Вы подключаете jQuery, может быть разной. Но в ней обязательно присутствуют теги HTML, HEAD и BODY. Так вот, подключить jQuery можно, если добавить тег SCRIPT со ссылкой на библиотеку внутрь тега HEAD.
<script type="text/javascript" src="javascript/jquery-1.7.2.min.js"></script>
После добавления, Ваша страница может иметь такой вид:
<!DOCTYPE html> <html dir="ltr" lang="ru-RU"> <head> <meta charset="UTF-8" /> <title>Страница, на которую я подключаю jQuery</title> <script type="text/javascript" src="javascript/jquery-1.7.2.min.js"></script> </head> <body> Контент моей страницы </body> <html>
Обращение к элементам в jQuery
Для того чтобы писать код на jQuery, вам понадобится использовать знак $, который является псевдонимом (или сокращением) для идентификатора на jQuery. Например, чтобы выбрать все и добавить css-свойство с помощью jQuery, а также поменять класс при клике на этом блоке, необходимо написать такой код:
Простой скрипт на jQuery
<style>
.jq-test { padding: 10px; background: #90c4f8; }
</style>
<div class=»jq-test»>
<h5>Test Block 1</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio necessitatibus commodi
dolorem natus qui ut suscipit, inventore expedita explicabo, ipsa.</p>
</div>
<div class=»jq-test»>
<h5>Test Block 2</h5>
<p>Facilis veniam praesentium modi possimus repudiandae eaque error eum provident similique
debitis eligendi, laudantium incidunt earum sed ea dicta reprehenderit.</p>
</div>
<div class=»jq-test»>
<h5>Test Block 3</h5>
<p>Ratione possimus ullam dolor fugiat facilis! Eum iusto architecto laudantium ex molestiae commodi,
sed earum nesciunt ut saepe deleniti ea.</p>
</div>
<div class=»jq-test»>
<h5>Test Block 4</h5>
<p>Quibusdam, tempore sapiente distinctio laboriosam explicabo totam deleniti, aliquam consectetur,
ullam dolore non laudantium doloribus. Aperiam alias accusantium iusto quas.</p>
</div>
<script>
$(document).ready(function(){
$(‘.jq-test’).css(‘border-bottom’, ‘5px double #cde’);
$(‘.jq-test’).click(function(){
$(this).toggleClass(«jq-test»);
});
});
</script>
|
1 |
<style> .jq-test {padding10px;background#90c4f8;} </style> <div class=»jq-test»> <h5>Test Block1<h5> <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit.Distinctio necessitatibus commodi dolorem natus qui ut suscipit,inventore expedita explicabo,ipsa.<p> <div> <div class=»jq-test»> <h5>Test Block2<h5> <p>Facilis veniam praesentium modi possimus repudiandae eaque error eum provident similique debitis eligendi,laudantium incidunt earum sed ea dicta reprehenderit.<p> <div> <div class=»jq-test»> <h5>Test Block3<h5> <p>Ratione possimus ullam dolor fugiat facilis!Eum iusto architecto laudantium ex molestiae commodi, sed earum nesciunt ut saepe deleniti ea.<p> <div> <div class=»jq-test»> <h5>Test Block4<h5> <p>Quibusdam,tempore sapiente distinctio laboriosam explicabo totam deleniti,aliquam consectetur, ullam dolore non laudantium doloribus.Aperiam alias accusantium iusto quas.<p> <div> $(document).ready(function(){ $(‘.jq-test’).css(‘border-bottom’,’5px double #cde’); $(‘.jq-test’).click(function(){ $(this).toggleClass(«jq-test»); }); }); </script> |
Код несложный, он добавляет рамку внизу блока. Клик на голубом блоке удаляет/добавляет класс «jq-test» к нему с помощью метода jQuery .
Test Block 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio necessitatibus commodi dolorem natus qui ut suscipit, inventore expedita explicabo, ipsa.
Test Block 2
Facilis veniam praesentium modi possimus repudiandae eaque error eum provident similique debitis eligendi, laudantium incidunt earum sed ea dicta reprehenderit.
Test Block 3
Ratione possimus ullam dolor fugiat facilis! Eum iusto architecto laudantium ex molestiae commodi, sed earum nesciunt ut saepe deleniti ea.
Test Block 4
Quibusdam, tempore sapiente distinctio laboriosam explicabo totam deleniti, aliquam consectetur, ullam dolore non laudantium doloribus. Aperiam alias accusantium iusto quas.
Просмотров:
1 526
Пример JSON JQuery.each()
У нас могут быть более сложные структуры данных, такие как массивы в массивах, объекты в объектах, массивы в объектах или объекты в массивах. Давайте рассмотрим, как jQuery find each может применяться в подобных сценариях:
var json = ;
$.each(json, function () {
$.each(this, function (name, value) {
console.log(name + '=' + value);
});
});
Результат выполнения кода: red=#f00, green=#0f0, blue=#00f.
Мы обрабатываем структуру с помощью вложенного вызова each(). Внешний вызов обрабатывает массив переменной JSON, внутренний вызов обрабатывает объекты. В этом примере каждый jQuery each element имеет только один ключ. Но с помощью представленного кода может быть присвоено любое количество ключей.
Где скачать библиотеку
Новую версию библиотеки можно скачать с официального jQuery CDN:
http://code.jquery.com/jquery-2.0.0.min.js (сжатая версия)
http://code.jquery.com/jquery-2.0.0.js (для тестирования)
Вскоре данные файлы будут доступны на CDN от Google и Microsoft. Для гарантии функционала, базирующегося на jQuery, указывайте конкретную версию библиотеки, которую хотите использовать.
Если вы будете обновляться с версии 1.9, то разработчики рекомендуют также подключить специальный . Его использовать очень легко. Прикрепляем файл в документе и открываем браузерную консоль для того, чтобы увидеть сообщения.
<script src="http://code.jquery.com/jquery-2.0.0.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.1.1.js"></script>
Used By
NuGet packages (967)
Showing the top 5 NuGet packages that depend on jQuery:
| Package | Downloads |
|---|---|
|
jQuery.Validation This jQuery plugin makes simple clientside form validation trivial, while offering lots of option for customization. That makes a good choice if you’re building something new from scratch, but also when you’re trying to integrate it into an existing application with lots of existing markup. The plugin comes bundled with a useful set of validation methods, including URL and email validation, while providing an API to write your own methods. All bundled methods come with default error messages in english and translations into 32 languages. |
58.3M |
|
Microsoft.jQuery.Unobtrusive.Validation jQuery plugin that unobtrusively sets up jQuery.Validation. |
53.0M |
|
jQuery.UI.Combined jQuery UI is an open source library of interface components — interactions, full-featured widgets, and animation effects — based on the stellar jQuery javascript library . Each component is built according to jQuery’s event-driven architecture (find something, manipulate it) and is themeable, making it easy for developers of any skill level to integrate and extend into their own code. |
30.6M |
|
Microsoft.jQuery.Unobtrusive.Ajax jQuery plugin that unobtrusively sets up jQuery Ajax. |
23.5M |
|
Microsoft.AspNet.SignalR.JS JavaScript client for ASP.NET SignalR. |
18.6M |
GitHub repositories (221)
Showing the top 5 popular GitHub repositories that depend on jQuery:
| Repository | Stars |
|---|---|
|
SignalR/SignalR Incredibly simple real-time web for .NET |
8.4K |
|
JeffreySu/WeiXinMPSDK 微信全平台 SDK Senparc.Weixin for C#，支持 .NET Framework 及 .NET Core、.NET 6.0。已支持微信公众号、小程序、小游戏、企业号、企业微信、开放平台、微信支付、JSSDK、微信周边等全平台。 WeChat SDK for C#. |
7.0K |
|
microsoft/ailab Experience, Learn and Code the latest breakthrough innovations with Microsoft AI |
6.8K |
|
ServiceStack/ServiceStack Thoughtfully architected, obscenely fast, thoroughly enjoyable web services for all |
4.9K |
|
quartznet/quartznet Quartz Enterprise Scheduler .NET |
4.7K |
Манипуляция с найденными элементами
| .hide() | Скрыть элемент. .hide(«slow») — скрыть элемент медленно. «slow», «normal», «fast» или число миллисекунд. Вторым параметром может быть задана Функция, которая запускается после окончания анимационных эффектов. Выполняется единожды для каждого элемента. |
| .show() | Отобразить элемент. .show(«slow») — скрыть элемент медленно. |
| .css(«height») | возвратит значение высоты у элемента с идентификатором bigIt. |
| .css(«width», «20px») | установит новое значение ширины |
| .attr(«class») | возвратит значение класса элемента |
| .attr(«class», «box») | установит новое значение атрибута class у элемента |
| .html(«Новое») | изменит все html-содержимое элемента на заданное в методе html |
| .text() | возвратит текст, находящийся внутри элемента |
| .empty() | очистить от содержимого элементы |
| .offset() .position() |
позволят узнать или изменить позицию выбранного элемента. |
| .width() .height() |
позволят узнать или изменить размеры выбранного элемента. |
| .animate(properties, , , ) | анимация. properties — список CSS-свойств, участвующих в анимации и их конечных значений. Задаются объектом, в формате {ключ:значение}, например:{opacity: 50, width: 100, height: 200}. duration — продолжительность выполнения анимации. Может быть задана в миллисекундах или строковым значением ‘fast’ или ‘slow’ (200 и 600 миллисекунд). easing — изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускорится). Задается строковым значением: «linear» и «swing» (для равномерной анимации и анимации с ускорением). callback — функция, которая будет вызвана после завершения анимации. Пример. Пусть у нас есть элемент div с каким-нибудь текстом. Мы хотим плавно скрыть этот элемент, заменить текст, и плавно сделать элемент видимым: значения «hide», «show» означают исчезновение и появление элемента, за счет параметра, к которому они применены. |
jQuery Core — All 3.x Versions
- jQuery Core 3.6.0 — uncompressed, minified, slim, slim minified
- 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
В программе «Hello, World!»2 код запустился как только загрузилась страница и был готов документ, потому она не нуждается во взаимодействии с пользователем. В этом случае написать текст можно было непосредственно в HTML, не применяя JQuery. Однако JQuery нужно использовать, чтобы настроить появление текста после нажатия кнопки.
Вернитесь в файл index.html и добавьте элемент <button>, который будет отслеживать клики на странице.
С помощью метода click() вызовите функцию с кодом «Hello, World!».
Элементу <button> присвоен ID trigger, который выбирается при помощи селектора $(“#trigger”). С помощью метода click() элемент будет прослушивать клики. Теперь нужно реализовать внутри click() функцию, которая содержит код.
В результате получится такой код:
Сохраните файл scripts.js и обновите index.html в браузере. Кликните мышью, и только тогда появится текст «Hello, World!».
Событие – это любое взаимодействие пользователя с браузером (обычно с помощью мыши или клавиатуры). В данном случае событием был клик мыши. Полный список методов событий можно найти в документации jQuery. Ниже перечислены наиболее популярные события:
- click(): прослушивает клики на странице.
- hover(): выполняет действие при наведении курсора на элемент. Методы mouseenter() и mouseleave() относятся только к перемещениям курсора с помощью мыши (навести и отвести курсор соответственно).
- submit(): выполняется при заполнении формы.
- scroll(): выполняется при прокрутке экрана.
- keydown():выполняется при нажатии кнопки на клавиатуре.
Чтобы изображения двигались или исчезали при прокрутке экрана, используйте scroll(). Чтобы закрыть меню с помощью кнопки Esc, используйте keydown(). Чтобы добавить выпадающее меню, используйте click().
Разобравшись с событиями, вы сможете создавать динамический контент для сайта.
Used By
NuGet packages (967)
Showing the top 5 NuGet packages that depend on jQuery:
| Package | Downloads |
|---|---|
|
jQuery.Validation This jQuery plugin makes simple clientside form validation trivial, while offering lots of option for customization. That makes a good choice if you’re building something new from scratch, but also when you’re trying to integrate it into an existing application with lots of existing markup. The plugin comes bundled with a useful set of validation methods, including URL and email validation, while providing an API to write your own methods. All bundled methods come with default error messages in english and translations into 32 languages. |
58.3M |
|
Microsoft.jQuery.Unobtrusive.Validation jQuery plugin that unobtrusively sets up jQuery.Validation. |
53.0M |
|
jQuery.UI.Combined jQuery UI is an open source library of interface components — interactions, full-featured widgets, and animation effects — based on the stellar jQuery javascript library . Each component is built according to jQuery’s event-driven architecture (find something, manipulate it) and is themeable, making it easy for developers of any skill level to integrate and extend into their own code. |
30.6M |
|
Microsoft.jQuery.Unobtrusive.Ajax jQuery plugin that unobtrusively sets up jQuery Ajax. |
23.5M |
|
Microsoft.AspNet.SignalR.JS JavaScript client for ASP.NET SignalR. |
18.6M |
GitHub repositories (221)
Showing the top 5 popular GitHub repositories that depend on jQuery:
| Repository | Stars |
|---|---|
|
SignalR/SignalR Incredibly simple real-time web for .NET |
8.4K |
|
JeffreySu/WeiXinMPSDK 微信全平台 SDK Senparc.Weixin for C#，支持 .NET Framework 及 .NET Core、.NET 6.0。已支持微信公众号、小程序、小游戏、企业号、企业微信、开放平台、微信支付、JSSDK、微信周边等全平台。 WeChat SDK for C#. |
7.0K |
|
microsoft/ailab Experience, Learn and Code the latest breakthrough innovations with Microsoft AI |
6.8K |
|
ServiceStack/ServiceStack Thoughtfully architected, obscenely fast, thoroughly enjoyable web services for all |
4.9K |
|
quartznet/quartznet Quartz Enterprise Scheduler .NET |
4.7K |
Как подключить jQuery с CDN
CDN (Content Delivery Network) – это технология, которая позволяет увеличить скорость доставки контента конечным пользователям.
Состоит она из большого количества серверов, географически расположенных в разных точках мира, на каждом из которых располагается кэш контента. При этом его доставка конечному пользователю осуществляется обычно с того сервера, который ближе других расположен к нему. В результате чего сокращается время его загрузки, ускоряется отклик, увеличивается производительность сайта, а также снижается нагрузка на оригинальный сервер.
Т.е. CDN предоставляет ещё один способ подключить библиотеку jQuery. При этом непосредственно загружать его себе на сервер не нужно, он будет браться с CDN.
Загрузку jQuery с CDN предоставляют множество компаний, например, таких как Google, Microsoft, Cloudflare, jQuery, Yandex и т.д.
Подключить jQuery с CDN очень просто. Для этого нужно вставить с атрибутом , в котором прописать путь до этой библиотеки.
Код для онлайн подключения jQuery последней версии (3.5.1) с Google CDN:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Если нужна не эта, а какая-то другая версия, то тогда следует перейти страницу и выбрать её.
Например, ссылка для подключения версии из ветки 1.x (1.12.4):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Google CDN для последней версии из ветки 2.x (2.2.4):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
Другие популярные CDN
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script>
jQuery CDN:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
Cloudflare CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Yandex CDN (последняя опубликованная версия 3.3.1):
<script src="https://yastatic.net/jquery/3.3.1/jquery.min.js"></script>
Дополнительно можно отметить, что если множество сайтов используют один и тот-же URL для подключения jQuery с CDN, то браузеру не потребуется загружать его для каждого такого ресурса. После первого скачивания он поместить jQuery в кэш и при последующих запросах будет брать её уже оттуда.
Первый сценарий jQuery
Добавив библиотеку jQuery в документ, можно приступать к созданию сценариев, использующих функциональность jQuery. Давайте модифицируем предыдущий пример, используя функциональность jQuery:
Этот сценарий совсем небольшой, однако позволяет познакомиться с некоторыми из наиболее важных возможностей и особенностей jQuery. Сценарий изменяет прозрачность изображений нарцисса, пиона и подснежника (нечетных элементов <img> в разметке) при наведении на них указателя мыши. Следствием этого является незначительное увеличение яркости изображения и его потускнение. При выходе указателя за пределы изображения восстанавливается прежнее значение непрозрачности. На изображения астры, розы и примулы манипуляции мышью никак не влияют.
Согласитесь, данный сценарий гораздо меньше и проще в понимании, нежели предыдущий пример с использованием стандартных функций JavaScript. Плюс этот сценарий является кроссбраузерным, т.е. его можно запустить, например, в старых браузерах (IE
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:
Добавление событий к динамически созданным объектам
Для того чтобы повесить событие на элемент, которого ещё нет, можно использовать следующую конструкцию функции :
$(document).on(eventName, selector, handler); // document или любой другой существующий родительский элемент // eventName - имя события // selector - селектор, осуществляющий фильтрацию потомков, для которых необходимо запустить обработчик события // handler - обработчик события
Это действие можно осуществить благодаря тому, что событие всплывает, и, следовательно, возникает у всех предков этого элемента. А объект, до которого всплывают все события на странице, является . Поэтому в большинстве случаев выбирают именно его. После этого зная селектор, функция может программно отобрать среди элементов (элемента, который вызвал это событие () и всех его предков включая родителя) те, которые соответствуют ему. И затем для всех отобранных элементов выполнить указанный в функции обработчик. Действия, посредством которых обработка события переносится на другой элемент (предок), называется в jQuery ещё процессом делегирования события.
Например, добавим событие к элементу, которого ещё нет на странице:
<button id="addButton" type="button">Добавить кнопку</button> <script> // при нажатии на элемент с id="addButton" добавить в начало страницы новую кнопку $('#addButton').on('click', function(e) { $('body').prepend('<button class="deleteMe" type="button">Удалить меня</button>'); }); // добавить событие click, которое будет выполнено для элементов, которых ещё нет на странице $(document).on('click','.deleteMe', function() { $(this).remove(); }); </script>
Делегирование может применяться не только для обработки событий динамически созданных объектов, но и для того чтобы не привязывать к каждому элементу (если их на странице может быть очень много) обработчик.
$(document).on('click','#comment a',function(e) {
if(!(location.hostname === this.hostname || !this.hostname.length)) {
e.preventDefault();
location.href='away?link='+encodeURIComponent($(this).attr('href'));
}
});
Правила работы с библиотекой jQuery
1. Как добавить jQuery на веб-страницу
Добавить библиотеку jQuery на свою веб-страницу можно двумя способами:
Использовать версию файла jQuery, размещенную на ресурсах , Microsoft или jQuery.com.
Данный метод использует «Сеть дистрибуции контента» (CDN, content distribution network), т.е. файл jQuery расположен на другом веб-сайте, который при запросе пользователем отправляет данный файл на его компьютер. Очевидные преимущества данного способа — снижение нагрузки на собственный веб-сервер и ускорение загрузки файла в силу разветвленности сети серверов дистрибьютора.
Чтобы воспользоваться данным способом, необходимо перейти по одной из ссылок:CDNJS CDN
После перехода на сайт ресурса вам потребуется всего лишь скопировать ссылку на jQuery-файл и добавить её на свою веб-страницу между тегами <script>...</script>. В результате у вас должно получиться, например,
Загрузить последнюю версию библиотеки jQuery с официального сайта. Для этого вам необходимо перейти по адресу jQuery.com и выбрать интересующую вас версию библиотеки. Для загрузки предлагается две версии jQuery-файла — минимизированный и несжатый. Размер несжатого файла около 300 Кб, он содержит комментарии, поэтому его лучше использовать с целью разработки и отладки кода.
Минимизированная версия файла весит около 100Кб, в ней удалены все комментарии и ненужные пробелы, что ускоряет загрузку файла браузером.
2. Правила добавления jQuery на страницу
Размещайте ссылки на jQuery-файл внутри тега <head>.Размещайте ссылки на jQuery-файл после ссылок на стили CSS, так как зачастую библиотека jQuery производит манипуляции со стилями элементов веб-страницы.Размещайте другие теги <script>...</script> только после ссылки на файл jQuery, если данный скрипт использует библиотеку jQuery.
3. Как создать новый html-элемент
Создать пустой html-элемент, например, блок, можно несколькими способами:
1) с помощью краткой формы записи $("<div>")
2) с помощью инструкции $("<div></div>")
3) с помощью инструкции $("<div/>")
Все три способа рабочие, но, тем не менее, рекомендуется включать открывающие и закрывающие теги, чтобы показать, что данный элемент может содержать другие элементы.
При создании нового элемента методу $() можно передать второй параметр в виде объекта JavaScript, определяющий дополнительные атрибуты элемента:
Таким образом создается элемент <img> с заданными атрибутами и включается в дерево DOM.
Подключение jQuery с помощью файла js
Этот способ предусматривает копирование файла с актуальной версией jQuery на свой сервер. На главной странице официального сайта кликнуть по кнопке, как указано на скриншоте.
Появятся ссылки для скачивания. Лучше взять сжатую версию, так как она меньше весит, но работает точно также как и несжатая.
Этот файл закидываем в папку со своим сайтом. Можно создать для файла отдельную папку, например, js, если её до сих пор нет.
Теперь подключим js-файл. Для этого, опять же перед закрывающим тегом head, запишем:
<script src="js/jquery-3.5.1.js"></script>
Здесь важно правильно прописать путь к файлу jquery-3.5.1.js. Если он лежит прямо в корневом каталоге сайта вне каких-либо папок, то код скрипта будет выглядеть так:
<script src="jquery-3.5.1.js"></script>
Как подключить jQuery на свою страницу с сайта Google и других внешних источников
1. С сайта Google API
В Google есть дочерний проект под названием Google Libraries API, слоган которого “Make the Web Faster” («сделай веб более быстрым»). Этот проект предоставляет API для JavaScript разработчиков, позволяющее им подключать разные библиотеки не из создаваемых ими сайтов, а из сайта Google ().
Что чем же заключается преимущество того, что эта библиотека будет загружаться не с Вашего сайта, а с сайта Google? Такой вариант лучше тем, что это положительно скажется на скорости загрузки веб-страницы у пользователя. И дело здесь не в том, что скорость передачи данных с сайта Google выше, чем с Вашего собственного сайта. Дело скорее в том, что многие сайты подключают jQuery через Google API, а это значит, что с большой долей вероятности эта библиотека уже присутствует в кэше браузера пользователя, и она не будет загружаться второй раз вообще.
Чтобы подключить jQuery с сайта Google на свою страницу, необходимо всего лишь задать значение атрибута SRC тега SCRIPT на адрес библиотеки на сайте Google API. На данный момент последняя версия jQuery имеет там такой адрес:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Общий «скелет» страницы с подключенной jQuery может иметь такой вид:
<!DOCTYPE html> <html dir="ltr" lang="ru-RU"> <head> <meta charset="UTF-8" /> <title>Страница, на которую я подключаю jQuery</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> </head> <body> Контент моей страницы </body> <html>
На момент чтения Вами этой статьи jQuery мог обновиться, так что советую Вам зайти на страницу проекта и проверить это. Впрочем, если Вы подключите старую версию jQuery к себе на сайт, ничего страшного не произойдёт.
Если же Вы хотите подключить последнюю версию jQuery, тогда Вы можете заменить строчку вставки на такую:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Цифра 1 здесь означает последнюю версию линейки 1, которая уже долгое время является последней. Когда выйдет jQuery 2-й линейки, в ней могут быть некоторые существенные изменения (например, удалены или изменены некоторые функции), следовательно, если Вы делаете сайт на долгое время, то нет смысла подключать самую последнею версию jQuery. Однако, как это сделать, написано ниже.
2. Подключить последнюю версию jQuery с официального сайта
Хотя рекомендуется в первую очередь подключать jQuery именно с сайта Google API, но можно также сделать это с официального сайта. Строчка подключения последней версии этой библиотеки будет иметь вид:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
Или, если надо, подключаем конкретную версию:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
3. C сайта Microsoft
Также можно с сайта Microsoft, это делается так:
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
