Базовая концепция позади jQuery
Хотя в jQuery API существуют некоторые концептуальные варианты (например, такие функции, как $.ajax ), центральным понятием jQuery является «найди что-нибудь, сделай что-нибудь». В частности, выберите элемент (ы) DOM из документа HTML, а затем сделайте что-нибудь с ними, используя методы jQuery. Это концепция общей картины.
Чтобы реализовать эту концепцию, подумайте над кодом ниже.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<!— jQuery will change this —>
<a href=»»></a>
<!— to this <a href=»http://www.jquery.com»>jQuery</a> —>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script>
jQuery(‘a’).text(‘jQuery’).attr(‘href’, ‘http://www.jquery.com’);
</script>
</body>
</html>
|
Обратите внимание, что в этом HTML-документе мы используем jQuery для выбора элемента DOM ( <a> ). Выделив что-то, мы затем сделаем что-то с выделением, вызвав методы jQuery text() , attr() и appendTo() .
Метод text вызвал обернутый элемент <a> и установил для отображаемого текста элемента значение «jQuery». Вызов attr устанавливает атрибут href для веб-сайта jQuery.
Использование основополагающей концепции «найди что-то, сделай что-нибудь» имеет решающее значение для продвижения в качестве разработчика jQuery.
Концепция, за концепцией, за jQuery
Хотя выбор чего-то и выполнение чего-либо является основной концепцией jQuery, я хотел бы расширить эту концепцию, включив в нее также создание чего-либо. Поэтому концепцию jQuery можно расширить, включив сначала создание чего-то нового, его выбор, а затем что-то с ним делать. Мы можем назвать это концепцией, за концепцией, за jQuery.
То, что я пытаюсь сделать очевидным, — это то, что вы не застряли в выборе только того, что уже есть в DOM. Кроме того, важно понять, что jQuery можно использовать для создания новых элементов DOM, а затем что-то делать с этими элементами.
В приведенном ниже примере кода мы создаем новый элемент <a> , которого нет в DOM. После создания он выбирается, а затем манипулирует.
|
01
02
03
04
05
06
07
08
09
10
11
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script>
jQuery(‘<a>jQuery</a>’).attr(‘href’, ‘http://www.jquery.com’).appendTo(‘body’);
</script>
</body>
</html>
|
Ключевая концепция, которую нужно здесь выбрать, заключается в том, что мы создаем элемент <a> на лету, а затем работаем с ним, как если бы он уже был в DOM.
jQuery требует HTML для запуска в режиме стандартов или в режиме почти стандартов
Известны проблемы, связанные с неправильной работой методов jQuery, когда браузер отображает HTML-страницу в режиме причуд. При использовании jQuery убедитесь, что браузер интерпретирует HTML- код в стандартном режиме или почти в стандартном режиме, используя действительный тип документа .
Чтобы обеспечить надлежащую функциональность, примеры кода в этой книге используют тип документа HTML 5.
|
1
|
<!DOCTYPE html>
|
Ожидание на DOM, чтобы быть готовым
jQuery запускает пользовательское событие с именем ready когда DOM загружен и доступен для манипулирования. Код, который манипулирует DOM, может выполняться в обработчике для этого события. Это обычная модель, наблюдаемая при использовании jQuery.
В следующем примере представлены три закодированных примера использования этого пользовательского события.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html>
<html lang=»en»>
<head>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script>
// Standard
jQuery(document).ready(function () { alert(‘DOM is ready!’); });
// Shortcut, but same thing as above
jQuery(function () { alert(‘No really, the DOM is ready!’); });
// Shortcut with fail-safe usage of $.
// to the jQuery function is passed into the anonymous function.
jQuery(function ($) {
alert(‘Seriously its ready!’);
// Use $() without fear of conflicts
});
</script>
</head>
<body></body>
</html>
|
Помните, что вы можете прикрепить к документу столько событий ready() сколько захотите. Вы не ограничены только одним. Они выполняются в порядке их добавления.
Выполнение кода jQuery, когда окно браузера полностью загружено
Как правило, мы не хотим ждать события window.onload . В этом смысл использования пользовательского события, такого как ready() которое будет выполнять код до загрузки окна, но после того, как DOM будет готов для прохождения и манипулирования.
Однако иногда мы действительно хотим ждать. Хотя событие custom ready() отлично подходит для выполнения кода после появления DOM, мы также можем использовать jQuery для выполнения кода после полной загрузки всей веб-страницы (включая все ресурсы).
Это можно сделать, подключив обработчик события загрузки к объекту window . jQuery предоставляет метод события load() который можно использовать для вызова функции после полной загрузки окна. Ниже я приведу пример используемого метода события load() .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
<!DOCTYPE html>
<html lang=»en»>
<head>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script>
// Pass window to the jQuery function and attach
// event handler using the load() method shortcut
jQuery(window).load(function(){ alert(‘The page and all its assets are loaded!’); });
</script>
</head>
<body></body>
</html>
|
Включить все файлы CSS перед включением jQuery
Начиная с jQuery 1.3, библиотека больше не гарантирует, что все CSS-файлы загружаются до запуска настраиваемого события ready() . Из-за этого изменения в jQuery 1.3 вы должны всегда включать все CSS-файлы перед любым кодом jQuery. Это гарантирует, что браузер проанализировал CSS перед тем, как перейти к JavaScript, включенному позже в HTML-документ. Конечно, изображения, на которые ссылаются через CSS, могут загружаться или не загружаться, когда браузер анализирует JavaScript.
Использование размещенной версии jQuery
При встраивании jQuery на веб-страницу большинство людей предпочитают загружать исходный код и ссылаться на него с личного домена / хоста. Однако есть и другие варианты, в которых кто-то другой размещает для вас код jQuery.
Google размещает несколько версий исходного кода jQuery с целью его использования кем-либо. Это на самом деле очень удобно. В приведенном ниже примере кода я использую элемент <script> для включения минимизированной версии jQuery, которая размещается в Google.
|
1
|
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
|
Google также размещает несколько предыдущих версий исходного кода jQuery, и для каждой версии предоставляются минимизированные и не минимизированные варианты. Я рекомендую использовать неминифицированный вариант во время разработки, так как ошибки отладки всегда легче, когда вы имеете дело с неминифицированным кодом.
Преимущество использования размещенной в Google версии jQuery заключается в том, что она надежна, быстра и потенциально кэшируется.
Выполнение кода jQuery при анализе DOM без использования Ready ()
Пользовательское событие ready() не является полностью необходимым. Если ваш код JavaScript не влияет на DOM, вы можете включить его в любом месте HTML-документа. Это означает, что вы можете полностью избежать события ready() если ваш код JavaScript не зависит от целостности DOM.
Большинство JavaScript в настоящее время, особенно код jQuery, будут включать манипулирование DOM. Это означает, что DOM должен быть полностью проанализирован браузером, чтобы вы могли работать с ним. Именно по этой причине разработчики застряли на американских горках уже несколько лет.
Чтобы избежать использования события ready() для кода, который работает в DOM, вы можете просто поместить свой код в HTML-документ перед закрывающим элементом </body> . Это гарантирует, что DOM полностью загружен, просто потому что браузер будет анализировать документ сверху вниз. Если вы поместите свой код JavaScript в документ после элементов DOM, которыми он манипулирует, нет необходимости использовать событие ready() .
В приведенном ниже примере я отказался от использования функции ready() , просто разместив свой сценарий до закрытия тела документа. Это техника, которую я использую в этой книге и на большинстве сайтов, которые я создаю.
|
1
2
3
4
5
6
7
8
9
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<p>
Hi, I’m the DOM!
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> alert(jQuery(‘p’).text());
</body>
</html>
|
Если бы я поместил <script> перед элементом <p> , он запустился бы до того, как браузер загрузил элемент <p> . Это заставит jQuery предположить, что документ не содержит элементов <p> . Однако, если бы я использовал событие jQuery custom ready() , то jQuery не выполнял бы код, пока DOM не был готов. Но зачем это делать, когда мы контролируем расположение элемента <script> в документе? Размещение кода jQuery в нижней части страницы позволяет избежать необходимости использовать событие ready() . Фактически, размещение всего кода JavaScript внизу страницы является проверенной стратегией производительности .
Гроккинг jQuery Chaining
После того как вы выбрали что-то с помощью функции jQuery и создали набор оберток, вы можете фактически связать методы jQuery с элементами DOM, содержащимися в наборе. Концептуально методы jQuery продолжают цепочку, всегда возвращая набор оберток jQuery, который затем может использоваться следующим методом jQuery в цепочке. Примечание. Большинство методов jQuery являются цепочечными, но не все.
Вы всегда должны пытаться повторно использовать упакованный набор, используя цепочку. В приведенном ниже коде методы text() , attr() и addClass() объединяются.
|
01
02
03
04
05
06
07
08
09
10
11
12
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<a></a>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
$(‘a’).text(‘jQuery’) // Sets text to jQuery and then returns $(‘a’)
.attr(‘href’, ‘http://www.jquery.com/’) // Sets the href attribute and then returns $(‘a’)
.addClass(‘jQuery’);
})(jQuery) </script>
</body>
</html>
|
Разорвать цепь разрушительными методами
Как упоминалось ранее, не все методы jQuery поддерживают цепочку. Такие методы, как text() могут быть объединены в цепочку при использовании для установки текстового узла элемента. Однако text() фактически разрывает цепочку, когда используется для получения текстового узла, содержащегося в элементе.
В приведенном ниже примере text() используется для установки, а затем получения текста, содержащегося в элементе <p> .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<p></p>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
var theText = $(‘p’).text(‘jQuery’).text();
alert(theText);
// Cannot chain after text().
// A string is returned, not the jQuery object.
})(jQuery) </script>
</body>
</html>
|
Получение текста, содержащегося в элементе, с использованием text() является ярким примером разорванной цепочки, поскольку метод вернет строку, содержащую текстовый узел, но не набор обертки jQuery.
Не должно быть сюрпризом, что если метод jQuery не возвращает набор оболочек jQuery, цепочка тем самым разрывается. Этот метод считается разрушительным.
Использование деструктивных методов jQuery и выход из деструкции с помощью End ()
Методы jQuery, которые изменяют исходный выбранный набор оболочек jQuery, считаются деструктивными. Причина в том, что они не поддерживают исходное состояние набора оболочек. Не беспокоиться; ничто действительно не разрушено или удалено Скорее, прежний набор оберток присоединяется к новому набору.
Тем не менее, веселье с цепочкой не должно останавливаться, как только оригинальная упаковка будет изменена. Используя метод end() , вы можете отказаться от любых деструктивных изменений, внесенных в исходный набор оболочек. Изучите использование метода end() в следующем примере, чтобы понять, как работать с элементами DOM и из них.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<style>
.last
{
background: #900;
}
</style>
<ul id=»list»>
<li></li>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li></li>
<li></li>
</ul>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
$(‘#list’) // Original wrapper set
.find(‘> li’) // Destructive method
.filter(‘:last’) // Destructive method
.addClass(‘last’)
.end() // End .filter(‘:last’)
.find(‘ul’) // Destructive method
.css(‘background’, ‘#ccc’)
.find(‘li:last’) // Destructive method
.addClass(‘last’)
.end() // End .find(‘li:last’)
.end() // End .find(‘ul’)
.end() // End .find(‘> li’)
.find(‘li’) // Back to the orginal $(‘#list’)
.append(‘I am an &lt;li&gt;’);
})(jQuery);
</body>
</html>
|
Аспекты функции jQuery
Функция jQuery многогранна. Мы можем передать ему различные значения и строковые образования, которые затем можно использовать для выполнения уникальных функций. Вот несколько вариантов использования функции jQuery:
- Выберите элементы из DOM, используя CSS-выражения и пользовательские выражения jQuery, а также выделите элементы, используя ссылки DOM:
jQuery('p > a')илиjQuery(':first')иjQuery(document.body) - Создавайте HTML на лету, передавая строковые структуры HTML или методы DOM, которые создают элементы DOM:
jQuery('<div id="nav"></div>')илиjQuery(document.createElement('div')) - Ярлык для события
ready()путем передачи функции в функцию jQuery:jQuery(function($){/* Shortcut for ready() */})
Каждое из этих применений подробно описано в примере кода ниже.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> jQuery(function($){ // Pass jQuery a function
// Pass jQuery a string of HTML
$(‘<p></p>’).appendTo(‘body’);
// Pass jQuery an element reference
$(document.createElement(‘a’)).text(‘jQuery’).appendTo(‘p’);
// Pass jQuery a CSS expression
$(‘a:first’).attr(‘href’, ‘http://www.jquery.com’);
// Pass jQuery a DOM reference
$(document.anchors[0]).attr(‘jQuery’);
});
</body>
</html>
|
Гроккинг, когда ключевое слово относится к элементам DOM
При присоединении событий к элементам DOM, содержащимся в наборе оберток, ключевое слово this может использоваться для ссылки на текущий элемент DOM, вызывающий событие. В следующем примере содержится код jQuery, который прикрепляет пользовательское событие mouseenter к каждому элементу <a> на странице. Собственное событие mouseenter курсора JavaScript происходит, когда курсор входит или выходит из дочернего элемента, тогда как mouseenter jQuery этого не делает.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<a id=»link1″>jQuery.com</a>
<a id=»link2″>jQuery.com</a>
<a id=»link3″>jQuery.com</a>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($)
{
$(‘a’).mouseenter(
function () { alert(this.id);
})(jQuery);
</script>
</body>
</html>
|
Внутри анонимной функции, которая передается mouseenter() , мы используем ключевое слово this для ссылки на текущий элемент <a> . Каждый раз, когда мышь касается текста «jQuery.com», браузер предупреждает, какой элемент был наведен, идентифицируя его значение атрибута id .
В предыдущем примере также можно взять ссылку this и передать ее функции jQuery, чтобы элемент DOM был обернут функциональностью jQuery.
Итак, вместо этого:
|
1
2
|
// Access the ID attribute of the DOM element.
alert(this.id);
|
Мы могли бы сделать это:
|
1
2
3
|
// Wrap the DOM element with a jQuery object,
// and then use attr() to access ID value.
alert($(this).attr(‘id’));
|
Это возможно, потому что функция jQuery не только принимает выражения селектора, она также принимает ссылки на элементы DOM. В коде this ссылка на элемент DOM.
Причина, по которой вы можете захотеть обернуть функциональность jQuery вокруг элемента DOM, должна быть очевидной. Это дает вам возможность использовать цепочку jQuery, если она вам понадобится.
Итерирование по набору элементов, содержащихся в наборе обёрток jQuery, несколько похоже на концепцию, которую мы только что обсуждали. Используя jQuery each() метод, мы можем перебирать каждый элемент DOM, содержащийся в наборе обертки. Это позволяет получить доступ к каждому элементу DOM индивидуально, используя ключевое слово this .
Основываясь на разметке в предыдущем примере, мы можем выбрать все элементы <a> на странице и использовать метод each() для итерации по каждому элементу <a> в наборе оберток, получая доступ к его атрибуту id . Вот пример.
|
01
02
03
04
05
06
07
08
09
10
11
12
|
<!DOCTYPE html>
<html lang=»en»>
<body><a id=»link1″>jQuery.com</a> <a id=»link2″>jQuery.com</a> <a id=»link3″>jQuery.com</a>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
$(‘a’).each(function(){
// Loop that alerts the id value for every <a> in the page
alert($(this).attr(‘id’));
});
})(jQuery);
</body>
</html>
|
Если вы загружаете HTML-код в браузер, браузер будет предупреждать о значении id каждого элемента <a> на странице. Поскольку на странице есть три элемента <a> , вы получаете три итерации с помощью метода each() и три окна предупреждений.
Извлечение элементов из набора обёрток, их прямое использование без jQuery
Тот факт, что вы оборачиваете функциональность jQuery вокруг элемента HTML, не означает, что вы теряете доступ к самому элементу DOM. Вы всегда можете извлечь элемент из набора оболочек и работать с ним через собственный JavaScript. Например, в приведенном ниже коде я устанавливаю атрибут title элемента <a> на странице HTML, манипулируя собственным свойством title элемента <a> DOM.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<a>jQuery.com</a>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
// Using DOM node properties to set the title attribute
$(‘a’).get(0).title = ‘jQuery.com’;
// Manipulation of DOM element using jQuery methods
$(‘a’).attr(‘href’, ‘http://www.jquery.com’);
})(jQuery);
</script>
</body>
</html>
|
Как было продемонстрировано, jQuery предоставляет удобный метод get() для доступа к элементам DOM по определенному индексу в наборе упаковщиков.
Но здесь есть еще один вариант. Вы можете избежать использования метода get() , просто используя обозначение массива в квадратных скобках на самом объекте jQuery. В контексте нашего предыдущего примера кода:
Этот код:
|
1
|
$(‘a’).get(0).title =’jQuery.com’;
|
Может стать таким:
|
1
|
$(‘a’)[0].title =’jQuery.com’;
|
Оба позволяют доступ к фактическому элементу DOM. Лично я предпочитаю обозначения в квадратных скобках. Это быстрее, потому что он использует собственный JavaScript для извлечения элемента из массива вместо передачи его методу.
Однако метод get() предоставляет удобное решение для размещения всех элементов DOM в собственном массиве. Просто вызвав метод get() не передавая ему параметр индекса, метод вернет все элементы DOM в наборе обертки в собственном массиве JavaScript.
Для демонстрации возьмем get() для тест-драйва. В приведенном ниже коде я помещаю все элементы <a> в массив. Затем я использую массив для доступа к свойству title третьего объекта DOM <a> на странице.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<a href=»http://www.jquery.com» title=»anchor1″>jQuery.com</a>
<a href=»http://www.jquery.com» title=»anchor2″>jQuery.com</a>
<a href=»http://www.jquery.com» title=»anchor3″>jQuery.com</a>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
var arrayOfAnchors = $(‘a’).get();
alert(arrayOfAnchors[2].title);
})
(jQuery);
</script>
</body>
</html>
|
Примечания: Использование get() положит конец цепочке jQuery. Он возьмет набор оберток и изменит его на простой массив элементов DOM, которые больше не упакованы с функциональностью jQuery. Следовательно, использование .end() не может восстановить цепочку после .get() .
Проверка наличия пустого набора обертки
Прежде чем вы начнете работать с набором оберток, логично проверить, что вы действительно что-то выбрали. Самое простое решение — использовать оператор if чтобы проверить, содержит ли набор оболочек какие-либо элементы DOM.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<a>jQuery</a>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script>
if (jQuery(‘a’).get(0)) { // Is there an element in the set?
jQuery(‘a’).attr(‘href’, ‘http://www.jquery.com’);
}
if (jQuery(‘a’).length) { // Check the length of the set.
jQuery(‘a’).attr(‘title’, ‘jQuery’);
} </script>
</body>
</html>
|
Истина заключается в том, что вышеприведенные утверждения не являются абсолютно необходимыми, поскольку jQuery молча завершится сбоем, если элементы не найдены. Однако каждый метод, связанный с любым пустым набором оболочки, по-прежнему вызывается. Так что, хотя мы могли бы на самом деле отказаться от использования операторов if , вполне вероятно, что это хорошее правило. Вызов методов для пустого набора оболочек может привести к ненужной обработке, а также к нежелательным результатам, если методы возвращают значения, отличные от набора оболочек, и эти значения выполняются.
Создание псевдонима путем переименования самого объекта jQuery
jQuery предоставляет метод noConflict() который имеет несколько применений, а именно возможность заменить $ другим псевдонимом. Это может быть полезно тремя способами: он может отказаться от использования знака $ в другой библиотеке, помочь избежать потенциальных конфликтов и предоставить возможность настроить пространство имен / псевдоним для объекта jQuery.
Например, предположим, что вы создаете веб-приложение для компании XYZ. Было бы неплохо настроить jQuery так, чтобы вместо использования jQuery('div').show() или $('div').show() вы могли использовать вместо XYZ('div').show() .
|
01
02
03
04
05
06
07
08
09
10
11
12
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<div>Syncfusion., Inc.</div>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script>
var Syncfusion = jQuery.noConflict();
// Do something with jQuery methods
alert(Syncfusion(«div»).text());
</script>
</body>
</html>
|
Примечания: noConflict() функции noConflict() логическое значение true, вы можете полностью отменить то, что jQuery ввел на веб-страницу. Это следует использовать только в крайних случаях, потому что это, скорее всего, вызовет проблемы с плагинами jQuery.
Использование .each (), когда неявной итерации недостаточно
Надеемся, что очевидно, что если у вас есть HTML-страница (пример ниже) с тремя пустыми элементами <div> , следующий оператор jQuery выберет все три элемента на странице, выполнит итерацию по трем элементам (неявная итерация) и вставит текст «Я — div» во всех трех элементах <div> .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<div></div>
<div></div>
<div></div>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
$(‘div’).text(‘I am a div’);
})(jQuery);
</script>
</body>
</html>
|
Это считается неявной итерацией, потому что код jQuery предполагает, что вы хотели бы манипулировать всеми тремя элементами, что требует итерации по выбранным элементам и установки значения текстового узла для каждого элемента <div> с текстом «Я — div». Когда это делается по умолчанию, это называется неявной итерацией.
Это очень удобно. По большей части большинство методов jQuery будут применять неявные итерации. Однако другие методы будут применяться только к первому элементу в наборе оберток. Например, метод jQuery attr() будет обращаться только к первому элементу в наборе оберток, когда он используется для получения значения атрибута.
Примечания: При использовании метода attr() для установки атрибута jQuery фактически применяет неявную итерацию, чтобы установить атрибут и его значение для всех элементов в наборе обертки.
В приведенном ниже коде набор оболочек содержит все элементы <div> на странице, но метод attr() возвращает значение id только первого элемента, содержащегося в наборе оболочек.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<div id=»div1″>I am a div</div>
<div id=»div2″>I am a div</div>
<div id=»div3″>I am a div</div>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function($){
// Alerts attribute value for first element in wrapper set
alert($(‘div’).attr(‘id’));
})(jQuery);
</body>
</html>
|
Для демонстрации предположим, что ваша цель — получить значение атрибута id для каждого элемента на странице. Вы можете написать три отдельных оператора jQuery для доступа к значению атрибута id каждого элемента <div> . Если бы мы это сделали, это могло бы выглядеть примерно так:
|
1
2
3
4
5
6
7
8
|
$(‘#div1’).attr(‘id’);
$(‘#div2’).attr(‘id’);
$(‘#div3’).attr(‘id’);
// or
var $divs = $(‘div’);
$divs.eq(0).attr(‘id’);
$divs.eq(1).attr(‘id’);
$divs.eq(2).attr(‘id’);
|
Это кажется немного многословным, нет? Разве не было бы неплохо, если бы мы могли перебрать набор оберток и просто извлечь значение атрибута id из каждого элемента <div> ? Используя метод $().each() , мы вызываем еще один раунд итерации, когда нашему набору оболочек требуется явная итерация для обработки нескольких элементов.
В приведенном ниже примере кода я использую метод $().each() чтобы перебрать набор оберток, получить доступ к каждому элементу в наборе, а затем извлечь его значение атрибута id .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<div id=»div1″>div1</div>
<div id=»div2″>div2</div>
<div id=»div3″>div3</div>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function($){
// 3 alerts, one for each div
$(‘div’).each(function(){
// «this» is each element in the wrapper set
alert($(this).attr(‘id’));
// Could also be written: alert(this.id);
});
})(jQuery);
</script>
</body>
</html>
|
Представьте возможности, которые у вас впереди, с возможностью применения итерации в любое время, когда вам захочется.
Примечания: jQuery также предоставляет функцию $.each , которую не следует путать с методом $().each $.each , который специально используется для итерации набора оберток jQuery. Метод $.each может фактически использоваться для перебора любого старого массива или объекта JavaScript. По сути, это заменитель нативных циклов JavaScript.
Элементы в наборе jQuery Wrapper, возвращенные в порядке документа
Механизм селектора будет возвращать результаты в порядке документа, а не в порядке, в котором были переданы селекторы. Набор оболочек будет заполнен выбранными элементами на основе порядка, в котором каждый элемент отображается в документе, сверху вниз.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
// We pass in h3 first, but h1 appears earlier in
// the document, so it is first in the wrapper set.
alert($(‘h3, h2, h1’).get(0).nodeName);
// Alerts «H1»
})(jQuery);
</script>
</body>
</html>
|
Определение контекста, используемого функцией jQuery
Контекст по умолчанию, используемый функцией jQuery при выборе элементов DOM, — это элемент документа (например, $('a', document) ). Это означает, что если вы не предоставите функции jQuery (например, jQuery() ) второй параметр, который будет использоваться в качестве контекста для запроса DOM, используемый по умолчанию контекст — это элемент документа, более известный как <body> .
Можно определить контекст, в котором функция jQuery выполняет запрос DOM, используя свойство context . Ниже я покажу два кодированных примера получения значения свойства context.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<div>
<div>
<div id=»context»><a href=»#»>jQuery</a> </div>
</div>
</div>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
// Alerts «object HTMLDocument» in Firefox
// Same as $(‘a’, document).context;
alert($(‘a’).context);
// Alerts «object HTMLDivElement» in Firefox
alert($(‘a’, $(‘#context’)[0]).context);
})(jQuery);
</body>
</html>
|
Создание всей структуры DOM, включая события DOM, в одной цепочке
Используя методы сцепления и jQuery, вы можете создавать не только один элемент DOM, но и целые структуры DOM. Ниже я создаю неупорядоченный список ссылок jQuery, которые затем добавляю в DOM.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<html lang=»en»>
<body>
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js»></script>
<script> (function ($) {
jQuery(‘<ul></ul>’)
.append(‘<li><a>jQuery.com</a></li><li><a>jQuery Documentation</a></li>’)
.find(‘a:first’)
.attr(‘href’, ‘http://www.jquery.com’)
.end()
.find(‘a:eq(1)’)
.attr(‘href’, ‘http://docs.jquery.com’)
.end()
.find(‘a’)
.click(function () { return confirm(‘Leave this page?’); })
.end()
.appendTo(‘body’);
})(jQuery);
</body>
</html>
|
Концепция, которую вы должны исключить из предыдущего примера, заключается в том, что jQuery можно использовать для создания и управления сложными структурами DOM. Используя только методы jQuery, вы можете использовать любую структуру DOM, которая вам может понадобиться.