Что такое jquery и как его подключить

Содержание:

Version History
С помощью файла functions.php
Плюс: простой доступ к странице
Начинаем писать код на jQuery
Как использовать новую версию
Загрузка jQuery с использованием CDN
Latest stable version
- 1.4.5
Пример JSON JQuery.each()
Legacy versions
- 1.3.2
- 1.2.1
- 1.1.2
- 1.0.1
Плюс: кроссбраузерность
link About the Code
- Build from Git
Селекторы
Подключение jQuery на WordPress
Добавление событий к динамически созданным объектам
Эффекты jQuery
jQuery UI 1.11
- Themes
- Previous Releases
jQuery UI 1.8
- Themes
- Previous Releases
link jQuery Migrate Plugin
Минус: нет понимания технологии
jQuery Tools from CDN
Как использовать новую версию
About Browser Support
Current Active Support
- Desktop
- Mobile
Used By
- NuGet packages (967)
- GitHub repositories (221)
link Downloading jQuery using Bower
Подключение библиотеки с внешних источников
Как проверить подключён ли jQuery

Version History

Version	Downloads	Last updated
3.6.0	404,155	3/23/2021
3.5.1	1,885,631	5/6/2020
3.5.0.1	160,265	4/16/2020
3.5.0	30,939	4/14/2020
3.4.1	5,218,934	5/2/2019
3.4.0	47,158	5/2/2019
3.3.1	10,611,005	1/22/2018
3.2.1	2,064,904	9/14/2017
3.1.1	5,676,173	9/27/2016
3.1.0	1,208,379	7/15/2016
3.0.0.1	599,240	6/17/2016
3.0.0	1,803,555	6/16/2016
2.2.4	1,432,687	6/16/2016
2.2.3	1,979,291	4/12/2016
2.2.2	512,970	3/29/2016
2.2.1	868,691	2/26/2016
2.2.0	1,279,335	1/9/2016
2.1.4	4,152,907	5/13/2015
2.1.3	2,488,047	12/31/2014
2.1.2	471,562	12/31/2014
2.1.1	3,795,605	5/14/2014
2.1.0	1,700,755	1/25/2014
2.0.3	1,897,946	7/17/2013
2.0.2	826,022	6/8/2013
2.0.1.1	719,749	5/29/2013
2.0.1	613,610	5/29/2013
2.0.0	879,175	4/19/2013
1.12.4	1,816,763	6/16/2016
1.12.3	264,723	4/12/2016
1.12.2	206,632	3/29/2016
1.12.1	223,858	3/29/2016
1.12.0	278,617	1/9/2016
1.11.3	809,606	5/13/2015
1.11.2	637,868	12/31/2014
1.11.1	1,093,091	5/14/2014
1.11.0	828,607	1/25/2014
1.10.2	21,889,248	7/17/2013
1.10.1	414,447	6/8/2013
1.10.0.1	344,093	5/29/2013
1.10.0	485,529	5/29/2013
1.9.1	5,017,346	2/5/2013
1.9.0	1,642,619	1/15/2013
1.8.3	1,280,912	11/26/2012
1.8.2	6,700,655	9/21/2012
1.8.1	216,847	9/5/2012
1.8.0	1,916,227	8/13/2012
1.7.2	680,167	4/17/2012
1.7.1.1	2,039,979	8/11/2012
1.7.1	491,660	11/23/2011
1.7.0	708,830	11/4/2011
1.6.4	6,096,246	9/22/2011
1.6.3	234,407	9/8/2011
1.6.2	945,230	7/18/2011
1.6.1	50,726	7/18/2011
1.6.0	82,787	7/18/2011
1.5.2	70,926	3/31/2011
1.5.1	984,094	2/26/2011
1.5.0	35,714	2/11/2011
1.4.4	887,504	2/9/2011
1.4.3	38,220	2/9/2011
1.4.2	15,619	2/9/2011
1.4.1	279,739	2/9/2011

С помощью файла functions.php

Jquery метод .animate()

И ещё один альтернативный способ подключения 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' );
}

Плюс: простой доступ к странице

Как подключить планшет самсунг к компьютеру

В чистом JavaScript обратиться к объекту на странице можно одним из способов:

и еще несколько подобных

В jQuery то же самое делает одна прекрасная команда. Заодно она же совмещает в себе кучу других функций. Фактически она говорит jQuery: «Возьми ЭТО и сделай с ним что-то»:

Поэтому какие-то простые манипуляции с объектами на странице выглядят элегантнее именно с jQuery. Это не значит, что их нельзя делать с простым JavaScript — можно. Но это не так красиво.

Представьте, что у нас есть страница, на которой есть важные плашки. Такие же, как на этой, и у всех задан класс “SomeClass”. И в зависимости от времени суток, браузера или настроения программиста сайт должен эти плашки скрывать, добавлять новые или как-то их менять. Вот, что можно, к примеру, с ними делать:

добавлять новые:

вставлять ещё одни перед ними:

заменять их на что-то другое:

и просто плавно показывать на экране:

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

Как подключить xiaomi к компьютеру

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

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

JavaScript

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

1
2
3
4
5

$(document).ready(function(){

console.log(‘jQuery works’);

// или

alert(‘jQuery works’);

});

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

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

JavaScript

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

1
2
3

$(function(){

console.log(«jQuery works!»);

});

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

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

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

Как использовать новую версию

jQuery 2.0 направлен на разработку под современные технологии. jQuery 1.x будет продолжать развиваться ещё пару лет, поддерживая старые браузеры. Если же у вас есть необходимость подключать обе библиотеки, в зависимости от функционала, то в помощь вам специальные проверки:

<!-->
    <script src="jquery-1.9.1.js"></script>
    <!-->
    <!--><!-->
	<script src="jquery-2.0.0.js"></script>
<!--<!-->

С выходом новой версии, расширилась среда применения jQuery:

Плагины Google Chrome
Приложения и расширения для Mozilla
Приложения Firefox OS
Приложения Chrome OS
Приложения Windows 8
Приложения Blackberry 10
Приложения PhoneGap/Cordova
Класс Apple UIWebView
Microsoft WebBrowser
Расширение для Node.js

Ну что же, будем следить за новостями jQuery 2.0 и в дальнейшем публиковать уроки и на эту тему.

Загрузка jQuery с использованием CDN

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

Существуют две причины, по которым имеет смысл использовать CDN:

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

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

Подробнее о службе Microsoft можно узнать по такому адресу: asp.net/ajaxlibrary/cdn.ashx. Ниже приведен пример подключения библиотеки jQuery через службу Google:

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

Latest stable version

1.4.5

ZIP file

If you want to host the files yourself you can download a zip of all the files:

Zip File: jquery.mobile-1.4.5.zip (JavaScript, CSS, and images)

jQuery CDN provided by MaxCDN

JavaScript:

Uncompressed: jquery.mobile-1.4.5.js (useful for debugging)
Minified and Gzipped: jquery.mobile-1.4.5.min.js (full library, ready to deploy)

CSS:

Uncompressed with Default theme: jquery.mobile-1.4.5.css (useful for debugging)
Minified and Gzipped with Default theme: jquery.mobile-1.4.5.min.css (full library, ready to deploy)
Uncompressed structure without a theme: jquery.mobile-1.4.5.css (useful for theme development)
Minified and Gzipped structure without a theme: jquery.mobile-1.4.5.min.css (to be used with custom theme and icon CSS, ready to deploy)

Copy-and-Paste snippet for jQuery CDN hosted files:

Google CDN

http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.js
http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js
http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.css
http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css

Microsoft CDN

Microsoft CDN – jQuery Mobile

Пример 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 имеет только один ключ. Но с помощью представленного кода может быть присвоено любое количество ключей.

Legacy versions

1.3.2

ZIP file

If you want to host the files yourself you can download a zip of all the files:

Zip File: jquery.mobile-1.3.2.zip (JavaScript, CSS, and images)

jQuery CDN

JavaScript:

Uncompressed: jquery.mobile-1.3.2.js (useful for debugging)
Minified and Gzipped: jquery.mobile-1.3.2.min.js (full library, ready to deploy)

CSS:

Uncompressed with Default theme: jquery.mobile-1.3.2.css (useful for debugging)
Minified and Gzipped with Default theme: jquery.mobile-1.3.2.min.css (full library, ready to deploy)
Uncompressed structure without a theme: jquery.mobile-1.3.2.css (useful for theme development)
Minified and Gzipped structure without a theme: jquery.mobile-1.3.2.min.css (to be used with custom theme, ready to deploy)

Copy-and-Paste snippet for jQuery CDN hosted files:

Microsoft CDN

Microsoft CDN – jQuery Mobile

1.2.1

ZIP file

If you want to host the files yourself you can download a zip of all the files:

Zip File: jquery.mobile-1.2.1.zip (JavaScript, CSS, and images)

jQuery CDN

JavaScript:

Uncompressed: jquery.mobile-1.2.1.js (useful for debugging)
Minified and Gzipped: jquery.mobile-1.2.1.min.js (full library, ready to deploy)

CSS:

Uncompressed with Default theme: jquery.mobile-1.2.1.css (useful for debugging)
Minified and Gzipped with Default theme: jquery.mobile-1.2.1.min.css (full library, ready to deploy)
Uncompressed structure without a theme: jquery.mobile-1.2.1.css (useful for theme development)
Minified and Gzipped structure without a theme: jquery.mobile-1.2.1.min.css (to be used with custom theme, ready to deploy)

Copy-and-Paste snippet for jQuery CDN hosted files:

Microsoft CDN

Microsoft CDN – jQuery Mobile

1.1.2

ZIP file

If you want to host the files yourself you can download a zip of all the files:

Zip File: jquery.mobile-1.1.2.zip (JavaScript, CSS, and images)

jQuery CDN

JavaScript:

Uncompressed: jquery.mobile-1.1.2.js (useful for debugging)
Minified and Gzipped: jquery.mobile-1.1.2.min.js (full library, ready to deploy)

CSS:

Uncompressed with Default theme: jquery.mobile-1.1.2.css (useful for debugging)
Minified and Gzipped with Default theme: jquery.mobile-1.1.2.min.css (full library, ready to deploy)
Uncompressed structure without a theme: jquery.mobile-1.1.2.css (useful for theme development)
Minified and Gzipped structure without a theme: jquery.mobile-1.1.2.min.css (to be used with custom theme, ready to deploy)

Copy-and-Paste snippet for jQuery CDN hosted files:

Microsoft CDN

Microsoft CDN – jQuery Mobile

1.0.1

ZIP file

If you want to host the files yourself you can download a zip of all the files:

Zip File: jquery.mobile-1.0.1.zip (JavaScript, CSS, and images)

jQuery CDN

JavaScript:

Uncompressed: jquery.mobile-1.0.1.js (useful for debugging)
Minified and Gzipped: jquery.mobile-1.0.1.min.js (full library, ready to deploy)

CSS:

Uncompressed with Default theme: jquery.mobile-1.0.1.css (useful for debugging)
Minified and Gzipped with Default theme: jquery.mobile-1.0.1.min.css (full library, ready to deploy)
Uncompressed structure without a theme: jquery.mobile-1.0.1.css (useful for theme development)
Minified and Gzipped structure without a theme: jquery.mobile-1.0.1.min.css (to be used with custom theme, ready to deploy)

Copy-and-Paste snippet for jQuery CDN hosted files:

Microsoft CDN

Microsoft CDN – jQuery Mobile

Плюс: кроссбраузерность

Многие пользователи используют старые браузеры, например Internet Explorer 11. Они это делают не потому, что не знают, как обновиться, а потому что на работе админ запретил установку любого софта; или в госучереждениях давно не обновляли компьютеры.

Тут и спасает jQuery: разработчики сами предусмотрели поддержку старых браузеров. Например, вот как может выглядеть проверка на версии Intertet Explorer:

И такие условные блоки есть для всех старых версий IE.

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

link About the Code

jQuery is provided under the MIT license.

The code is hosted and developed in the jQuery GitHub repository. If you’ve spotted some areas of code that could be improved, please feel free to discuss it on the Developing jQuery Core Forum. If you’d like to participate in developing jQuery, peruse our contributor site for more information.

To find and download plugins developed by jQuery contributors, please visit the Plugins site. Plugin authors are responsible for maintenance of their plugins. Feedback on plugins should be directed to the plugin author, not the jQuery team.

Build from Git

Note: To just use the latest work-in-progress version of jQuery, please try the jQuery Pre-Release Build described above.

All source code is kept under Git revision control, which you can browse online. The repository’s README has more information on building and testing your own jQuery, as well as instructions on creating a custom build that excludes some APIs to reduce file size.

If you have access to Git, you can connect to the repository here:

You can also check out and build a specific version of jQuery from GitHub:

The README file for a specific version will have instructions for building that version, as the process has changed over time.

Селекторы

Селекторы сообщают jQuery, с каким элементом нужно работать. Большинство селекторов jQuery похожи на CSS, но все же они имеют некоторые особенности. Полный список селекторов jQuery можно найти в документации.

Чтобы получить доступ к селектору, используйте символ jQuery, $, и круглые скобки:

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

Ниже перечислены некоторые популярные селекторы:

$(“*”): Wildcard, выбирает все элементы страницы.
$(this): Current, выбирает текущий элемент.
$(“p”): Tag, выбирает каждый экземпляр тега <p>.
$(“.example”): Class, выбирает каждый элемент класса example.
$(“#example”): ID, выбирает один экземпляр уникального ID example.
$(“”): Attribute, выбирает любой элемент с text атрибута type.
$(“p:first-of-type”): Pseudo Element, выбирает первый тег <p>.

Обычно используются селекторы класса (чтобы выбрать несколько элементов) и id (чтобы выбрать всего один элемент).

Подключение 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()

Добавление событий к динамически созданным объектам

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

$(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

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

Для примера создайте наплывающий элемент, который можно закрывать и открывать. Для этого можно использовать два ID (один, чтобы открыть, а второй – чтобы закрыть элемент). Но мы используем для этого класс.

Удалите теги <button> и <p> из тела файла index.html, затем добавьте в документ HTML:

В файле style.css используйте CSS, чтобы спрятать элемент overlay с помощью display: none и поместить его в центре экрана.

Вернитесь в файл scripts.js и используйте метод toggle(), который будет включать и отключать свойство CSS display (переключать none и block), скрывая и отображая наплывающий элемент при клике.

Обновите index.html. Теперь вы можете управлять наплывающим элементом, кликая по кнопкам. Вместо toggle() вы можете использовать другие встроенные элементы jQuery, например, fadeToggle() или slideToggle().

Вот краткий список популярных эффектов:

toggle(): управляет видимостью элемента; с ним связаны эффекты show() и hide().
fadeToggle(): управляет видимостью элемента с помощью прозрачности/непрозрачности; к нему относятся эффекты fadeIn() и fadeOut().
slideToggle(): управляет видимостью элемента с помощью эффекта скольжения; с ним связаны slideDown() и slideUp().
animate(): пользовательские эффекты анимации.

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

CSSHTMLJavascriptjQuery

jQuery UI 1.11

uncompressedminified

Themes

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

Previous Releases

jQuery UI 1.11.3 — uncompressed, minified, theme
jQuery UI 1.11.2 — uncompressed, minified, theme
jQuery UI 1.11.1 — uncompressed, minified, theme
jQuery UI 1.11.0 — uncompressed, minified, theme
jQuery UI 1.11.0-beta.2 — uncompressed, minified, theme
jQuery UI 1.11.0-beta.1 — uncompressed, minified, theme

jQuery UI 1.8

uncompressedminified

Themes

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

Previous Releases

jQuery UI 1.8.23 — uncompressed, minified, theme
jQuery UI 1.8.22 — uncompressed, minified, theme
jQuery UI 1.8.21 — uncompressed, minified, theme
jQuery UI 1.8.20 — uncompressed, minified, theme
jQuery UI 1.8.19 — uncompressed, minified, theme
jQuery UI 1.8.18 — uncompressed, minified, theme
jQuery UI 1.8.17 — uncompressed, minified, theme
jQuery UI 1.8.16 — uncompressed, minified, theme
jQuery UI 1.8.15 — uncompressed, minified, theme
jQuery UI 1.8.14 — uncompressed, minified, theme
jQuery UI 1.8.13 — uncompressed, minified, theme
jQuery UI 1.8.12 — uncompressed, minified, theme
jQuery UI 1.8.11 — uncompressed, minified, theme
jQuery UI 1.8.10 — uncompressed, minified, theme
jQuery UI 1.8.9 — uncompressed, minified, theme
jQuery UI 1.8.8 — uncompressed, minified, theme
jQuery UI 1.8.7 — uncompressed, minified, theme
jQuery UI 1.8.6 — uncompressed, minified, theme
jQuery UI 1.8.5 — uncompressed, minified, theme
jQuery UI 1.8.4 — uncompressed, minified, theme
jQuery UI 1.8.3 — uncompressed, minified, theme
jQuery UI 1.8.2 — uncompressed, minified, theme
jQuery UI 1.8.1 — uncompressed, minified, theme
jQuery UI 1.8.0 — uncompressed, minified, theme

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:

Минус: нет понимания технологии

Чрезмерное увлечение jQuery может привести к тому, что программист просто не будет понимать, как работают механизмы у него на странице и не сможет их исправить, если что-то пойдёт не так.

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

Получается, что знать jQuery всё-таки полезно, но нужно понимать, когда без него можно обойтись.

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

jQuery Tools from CDN

Here is a list of all available jQuery Tools combinations from
a free Content Delivery Network.

<!-- UI Tools: Tabs, Tooltip, Scrollable and Overlay (4.45 Kb) --><script src="http://cdn.jquerytools.org/1.2.6/tiny/jquery.tools.min.js"></script> <!-- Form tools: Dateinput, Rangeinput and Validator. No jQuery library. ( Kb) --><script src="http://cdn.jquerytools.org/1.2.6/form/jquery.tools.min.js"></script> <!-- ALL jQuery Tools. No jQuery library --><script src="http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"></script> <!-- jQuery Library + UI Tools --><script src="http://cdn.jquerytools.org/1.2.6/jquery.tools.min.js"></script> <!-- jQuery Library + ALL jQuery Tools --><script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>

HTML

If you prefer to load the jQuery library separately the recommended
practice is to load jQuery from Google’s CDN service. Make sure the
jQuery library is always loaded before the jQuery Tools
library.

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

HTML

Как использовать новую версию

<!-->
    <script src="jquery-1.9.1.js"></script>
    <!-->
    <!--><!-->
	<script src="jquery-2.0.0.js"></script>
<!--<!-->

С выходом новой версии, расширилась среда применения jQuery:

Плагины Google Chrome
Приложения и расширения для Mozilla
Приложения Firefox OS
Приложения Chrome OS
Приложения Windows 8
Приложения Blackberry 10
Приложения PhoneGap/Cordova
Класс Apple UIWebView
Microsoft WebBrowser
Расширение для Node.js

Ну что же, будем следить за новостями jQuery 2.0 и в дальнейшем публиковать уроки и на эту тему.

About Browser Support

jQuery is constantly tested with all of its supported browsers via unit tests. However, a web page using jQuery may not work in the same set of browsers if its own code takes advantage of (or falls prey to) browser-specific behaviors. Testing is essential to fully support a browser. The Microsoft Edge Developer site makes available virtual machines for testing many different versions of Internet Explorer. Older versions of other browsers can be found at oldversion.com.

Only the most current version of jQuery is tested and updated to fix bugs or add features. Users of older versions that find a bug should upgrade to the latest released version to determine if the bug has already been fixed. The may be helpful in identifying and fixing problems during a version upgrade.

Current Active Support

Desktop

Chrome: (Current — 1) and Current
Edge: (Current — 1) and Current
Firefox: (Current — 1) and Current, ESR
Internet Explorer: 9+
Safari: (Current — 1) and Current
Opera: Current

Mobile

Stock browser on Android 4.0+
Safari on iOS 7+

Workarounds for Android Browser 4.0-4.3 are present in the code base, but we no longer actively test these versions.

Any problem with jQuery in the above browsers should be reported as a bug in jQuery.

(Current — 1) and Current denotes that we support the current stable version of the browser and the version that preceded it. For example, if the current version of a browser is 24.x, we support the 24.x and 23.x versions.

Firefox ESR (Extended Support Release) is a Firefox version for use by organizations including schools, universities, businesses and others who need extended support for mass deployments. It is based on a regular release of Firefox and synced from the next regular Firefox every few releases — example ESR versions include Firefox 47, 52 & 60. At any given time there are at most two ESR versions available; jQuery supports both of them. See the Mozilla site for more information.

If you need to support older browsers like Internet Explorer 6-8, Opera 12.1x or Safari 5.1+, use .

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. NOTE: This package is maintained on behalf of the library owners by the NuGet Community Packages project at http://nugetpackages.codeplex.com/	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. NOTE: This package is maintained on behalf of the library owners by the NuGet Community Packages project at http://nugetpackages.codeplex.com/	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

link Downloading jQuery using Bower

jQuery is also registered as a package with Bower. You can install the latest version of jQuery with the command:

This will install jQuery to Bower’s install directory, the default being . Within you will find an uncompressed release, a compressed release, and a map file.

The jQuery Bower package contains additional files besides the default distribution. In most cases you can ignore these files, however if you wish to download the default release on its own you can use Bower to install jQuery from one of the above urls instead of the registered package. For example, if you wish to install just the compressed jQuery file, you can install just that file with the following command:

Подключение библиотеки с внешних источников

Существуют и другие способы подключения jQuery к проектам – при помощи серверов CDN (переводится как «Сеть доставки контента»). Наиболее популярными хранилищами считаются: CDN, организованное создателями jQuery, Google и Microsoft.

Для того чтобы подключить какую-либо версию с официального сервера, нужно в атрибуте src тега <script> указать к ней полный путь. Так, загрузка последней существующей версии библиотеки будет осуществляться следующей строкой:

Если же вы хотите указать конкретную версию, то стоит писать вот так:

Очень удобно загружать описываемую библиотеку через Google, а точнее через Google Libraries API. Все потому, что скорость загрузки страницы сайта ускорится.

Ну и для полного комплекта добавлю строку с хранилищем Microsoft.

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

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

if (window.jQuery) {
  // jQuery подключен к странице
}

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

if (window.jQuery) {
  // jQuery подключен к странице
} else {
  // jQuery не подключен к странице
}

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

if (!window.jQuery) {
  document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>')
}

if (window.jQuery) {
  var verJquery = jQuery.fn.jquery;
  // выведем версию jQuery в консоль
  console.log(verJquery);
}