От автора: приветствую вас, друзья. Продолжаем изучение библиотеки jQuery. В прошлой статье мы узнали, что такое библиотека jQuery, рассмотрели некоторые преимущества ее использования перед нативным JavaScript, а также узнали способы подключения jQuery к веб-странице. В этой статье мы узнаем, как использовать jQuery. Начнем?
Итак, мы подключили библиотеку jQuery. К слову, если вы работаете на локальном сервере, тогда лучше подключать библиотеку jQuery локально, чтобы не тянуть ее из сети. Теперь давайте посмотрим, как же начать использование библиотеки, т.е. как начать с ней работу.
Вся работа с jQuery построена на использовании специальной функции – jQuery(). Также эта функция имеет короткий псевдоним — $(), который чаще всего и используют в коде. Давайте поместим на страницу заголовок H1 и попробуем его выбрать (еще говорят – выбрать в коллекцию). Как вы помните из предыдущей статьи, для выборки используется тот же синтаксис, что и в CSS. В CSS для стилизации заголовка мы бы использовали следующий селектор:
|
1 |
h1{/*правила стилизации*/} |
Собственно, также должно работать и в jQuery. Попробуем. Кстати, заодно рядом поместим вариант и на нативном JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script src="js/jquery-3.1.1.min.js"></script> <script> var h1_js = document.getElementsByTagName('h1'); var h1_jq = $('h1'); var h1_jq2 = jQuery('h1'); console.log(h1_js); console.log(h1_jq); console.log(h1_jq2); </script> </head> <body> <h1>Hello, world!</h1> </body> </html> |
Теперь заглянем в консоль:
Как и ожидалось, мы получили пустую коллекцию элементов во всех трех случаях. Почему? Потому что JS код мы поместили в самое начало документа и скрипт выполняется слишком рано – искомого заголовка на момент выполнения скрипта в документе еще нет. Если мы его поместим перед закрывающим тегом body, тогда все сработает:
Но возможно нам потребуется подключить наш код JS в начало документа, как быть в этом случае? Библиотека jQuery имеет простое решение. Все, что нам нужно сделать, — обернуть наш код jQuery в специальную функцию:
|
1 2 3 4 5 6 7 8 9 10 |
<script> var h1_js = document.getElementsByTagName('h1'); console.log(h1_js); $(function(){ var h1_jq = $('h1'); var h1_jq2 = jQuery('h1'); console.log(h1_jq); console.log(h1_jq2); }); </script> |
Вот теперь выборка коллекции на jQuery отлично сработает. Выборка на JS по-прежнему вернет пустую коллекцию:
Конечно, подключать код JS в начало документа сейчас уже не принято, но тем не менее вполне возможно, и в этом случае jQuery нам поможет с работой, выполняя код только после загрузки всего документа.
Также вы можете встретить следующую конструкцию:
|
1 2 3 4 |
$(document).ready(function(){ var h1_jq = $('h1'); console.log(h1_jq); }); |
Эта запись является аналогом предыдущей, которая неявно вызывает метод ready, дожидающийся загрузки документа. Полная запись, с явным вызовом ready, на сегодня является уже устаревшим вариантом, который не рекомендуется использовать, поэтому используйте сокращенную запись.
На этом сегодня все. Исходники к уроку можно скачать по ссылке. Больше о jQuerу вы можете узнать из наших уроков или курса. Удачи!
