jQueryНачало работы с jQuery


замечания

jQuery - это библиотека JavaScript, которая упрощает операции DOM, обработку событий, AJAX и анимацию. Он также заботится о многих проблемах совместимости браузеров в базовых DOM и javascript-движках.

Каждая версия jQuery может быть загружена с https://code.jquery.com/jquery/ в сжатых (минитизированных) и несжатых форматах.

Версии

Версия Заметки Дата выхода
1,0 Первый стабильный выпуск 2006-08-26
1,1 2007-01-14
1.2 2007-09-10
1,3 Sizzle введен в ядро 2009-01-14
1.4 2010-01-14
1,5 Отложенное управление обратным вызовом, переписывание модуля ajax 2011-01-31
1,6 Значительный прирост производительности в методах attr() и val() 2011-05-03
1,7 API новых событий: on() и off() . 2011-11-03
1,8 Sizzle переписан, улучшена анимация и гибкость $(html, props) . 2012-08-09
1,9 Удаление устаревших интерфейсов и очистка кода 2013-01-15
1,10 Исправлены исправления ошибок и отличия от обоих бета-циклов 1.9 и 2.0 2013-05-24
1,11 2014-01-24
1,12 2016-01-08
2,0 Снижение поддержки IE 6-8 для повышения производительности и уменьшения размера 2013-04-18
2,1 2014-01-24
2,2 2016-01-08
3.0 Массовые ускорения для некоторых пользовательских селекторов jQuery 2016-06-09
3,1 Нет более бесшумных ошибок 2016-07-07

Начиная

Создайте файл hello.html со следующим содержимым:

<!DOCTYPE html>
<html>
<head>
    <title>Hello, World!</title>
</head>
<body>
    <div>
        <p id="hello">Some random text</p>
    </div>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#hello').text('Hello, World!');
        });
    </script>
</body>
</html>
 

Живая демонстрация на JSBin

Откройте этот файл в веб-браузере. В результате вы увидите страницу с текстом: Hello, World!

Объяснение кода

  1. Загружает библиотеку jQuery из CDN jQuery:

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

    Это вводит глобальную переменную $ , псевдоним для функции jQuery и пространства имен.

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

  1. Заменяет функцию, которая будет выполняться, когда DOM ( Document Object Model ) будет обнаружена как «готовая» jQuery:

    // When the `document` is `ready`, execute this function `...`
    $(document).ready(function() { ... });
     
    // A commonly used shorthand version (behaves the same as the above)
    $(function() { ... });
     
  1. Когда DOM готов, jQuery выполняет функцию обратного вызова, показанную выше. Внутри нашей функции есть только один вызов, который делает две основные вещи:

    1. Получает элемент с атрибутом id равным hello (наш селектор #hello ). Использование селектора в качестве переданного аргумента является ядром функциональности и именования jQuery; вся библиотека существенно эволюционировала от расширения document.querySelectorAll MDN .

    2. Установите text() внутри выбранного элемента Hello, World! ,

      #    ↓ - Pass a `selector` to `$` jQuery, returns our element
      $('#hello').text('Hello, World!');
      #             ↑ - Set the Text on the element
       

Подробнее см. На странице jQuery - Documentation .

Устранение конфликтов пространства имен

Библиотеки, отличные от jQuery, также могут использовать $ как псевдоним. Это может вызвать помехи между этими библиотеками и jQuery.

Чтобы освободить $ для использования с другими библиотеками:

jQuery.noConflict();
 

После вызова этой функции $ больше не является псевдонимом для jQuery . Тем не менее, вы все равно можете использовать переменную jQuery для доступа к функциям jQuery:

jQuery('#hello').text('Hello, World!');
 

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

var jqy = jQuery.noConflict();
jqy('#hello').text('Hello, World!');
 

И наоборот, чтобы другие библиотеки не вмешивались в jQuery, вы можете обернуть свой код jQuery в выведенное сразу выражение функции (IIFE) и передать в jQuery в качестве аргумента:

(function($) {
    $(document).ready(function() {
        $('#hello').text('Hello, World!');
    });
})(jQuery);
 

Внутри этого IIFE $ является псевдонимом только для jQuery.

Еще один простой способ защитить псевдоним $ jQuery и убедиться, что DOM готов :

jQuery(function( $ ) { // DOM is ready
   // You're now free to use $ alias
   $('#hello').text('Hello, World!');
});
 

Подвести итоги,

  • jQuery.noConflict() : $ больше не ссылается на jQuery, а переменная jQuery .
  • var jQuery2 = jQuery.noConflict() - $ больше не ссылается на jQuery, тогда как переменная jQuery делает и переменная jQuery2 .

Теперь существует третий сценарий. Что делать, если мы хотим, чтобы jQuery был доступен только в jQuery2 ? Использование,

var jQuery2 = jQuery.noConflict(true)

Это приводит к тому, что ни $ ни jQuery ссылаются на jQuery.

Это полезно, когда несколько версий jQuery должны быть загружены на одну страницу.

<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>
<script>
    var jQuery1 = jQuery.noConflict(true);
</script>
<script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
<script>
    // Here, jQuery1 refers to jQuery 1.12.4 while, $ and jQuery refers to jQuery 3.1.0.
</script>
 

https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

Включить тег script в начало страницы HTML

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

jQuery CDN-страница, в которой указаны версии jQuery

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

Выбран тег скрипта с версией jQuery.

Скопируйте полный код (или щелкните значок копирования) и вставьте его в <head> или <body> вашего html.

Лучшей практикой является загрузка любых внешних библиотек JavaScript в главном теге с помощью атрибута async . Вот демонстрация:

<!DOCTYPE html>
    <html>
      <head>
         <title>Loading jquery-2.2.4</title>
         <script src="https://code.jquery.com/jquery-2.2.4.min.js" async></script>
      </head>
      <body>
          <p>This page is loaded with jquery.</p>
      </body>
   </html>
 

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

Пространство имен jQuery («jQuery» и «$»)

jQuery является отправной точкой для написания любого кода jQuery. Его можно использовать как функцию jQuery(...) или переменную jQuery.foo .

$ является псевдонимом для jQuery и они обычно могут быть взаимозаменяемы друг для друга (кроме случаев, когда используется jQuery.noConflict(); см. « Устранение конфликтов имен» ).

Предполагая, что у нас есть этот фрагмент HTML -

<div id="demo_div" class="demo"></div>
 

Мы могли бы использовать jQuery для добавления текстового содержимого в этот div. Для этого мы могли бы использовать функцию jQuery text() . Это может быть написано с использованием jQuery или $ . т.е. -

jQuery("#demo_div").text("Demo Text!");
 

Или же -

$("#demo_div").text("Demo Text!");
 

Оба результата приведут к тому же окончательному HTML -

<div id="demo_div" class="demo">Demo Text!</div>
 

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

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

Загрузка jQuery через консоль на странице, у которой ее нет.

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

В таких ситуациях можно использовать консоль Chrome Developer Tools ( F12 ), чтобы вручную добавить jQuery на загруженную страницу, выполнив следующие действия:

var j = document.createElement('script');
j.onload = function(){ jQuery.noConflict(); };
j.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(j);
 

Версия, которую вы хотите, может отличаться от 1.12.4 ( 1.12.4 ), вы можете получить ссылку на одну из них, которая вам нужна здесь .

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

Обычно при загрузке плагинов обязательно включайте плагин после jQuery.

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

Если вы должны использовать более одной версии jQuery, то обязательно загрузите плагин (ы) после необходимой версии jQuery, за которой следует код, чтобы установить jQuery.noConflict(true) ; затем загрузите следующую версию jQuery и связанные с ней плагины:

<script src="https://code.jquery.com/jquery-1.7.0.min.js"></script>
<script src="plugin-needs-1.7.min.js"></script>
<script>
// save reference to jQuery v1.7.0
var $oldjq = jQuery.noConflict(true);
</script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="newer-plugin.min.js"></script>
 

Теперь при инициализации плагинов вам нужно будет использовать связанную версию jQuery

<script>
// newer jQuery document ready
jQuery(function($){
  // "$" refers to the newer version of jQuery
  // inside of this function

  // initialize newer plugin
  $('#new').newerPlugin();
});

// older jQuery document ready
$oldjq(function($){
  // "$" refers to the older version of jQuery
  // inside of this function

  // initialize plugin needing older jQuery
  $('#old').olderPlugin();
});
</script>
 

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

Объект jQuery

Каждый раз, когда вызывается jQuery, используя $() или jQuery() , внутри он создает new экземпляр jQuery . Это исходный код, который показывает новый экземпляр:

// Define a local copy of jQuery
jQuery = function( selector, context ) {

    // The jQuery object is actually just the init constructor 'enhanced'
    // Need init if jQuery is called (just allow error to be thrown if not included)
    return new jQuery.fn.init( selector, context );
}
 

Внутренне jQuery ссылается на свой прототип как .fn , а стиль, используемый здесь для внутренней инициализации объекта jQuery, позволяет показывать этот прототип без явного использования new вызывающим.

В дополнение к настройке экземпляра (таким .each , .each jQuery API, например, .each , children , filter и т. Д.), Внутренне jQuery также создает структуру, подобную массиву, чтобы соответствовать результату селектора (при условии, что в качестве аргумента было передано что-то другое, кроме ничего, undefined , null или подобного.). В случае одного элемента эта подобная массиву структура будет содержать только этот элемент.

Простой демонстрацией было бы найти элемент с идентификатором, а затем получить доступ к объекту jQuery, чтобы вернуть базовый элемент DOM (это также будет работать, когда несколько элементов совпадают или присутствуют).

var $div = $("#myDiv");//populate the jQuery object with the result of the id selector
var div = $div[0];//access array-like structure of jQuery object to get the DOM Element