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

Пространство имен 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 см. Типы селекторов .

Начиная

Создайте файл 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!

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

Загружает библиотеку jQuery из CDN jQuery:
```
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
```
Это вводит глобальную переменную $ , псевдоним для функции jQuery и пространства имен.
Имейте в виду, что одна из наиболее распространенных ошибок, возникающих при включении jQuery, не загружает библиотеку перед любыми другими скриптами или библиотеками, которые могут зависеть от нее или использовать ее.

Заменяет функцию, которая будет выполняться, когда 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() { ... });

Когда 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 .

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

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

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

Скопируйте полный код (или щелкните значок копирования) и вставьте его в <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.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/

Загрузка 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, используя $() или 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

Загрузка плагинов 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 внутри функции готовности документа, было бы лучше оставить ссылки отдельными.

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow

jQuery учебник
Начало работы с jQuery

Поиск…