Как использовать библиотеку jQuery?

Как использовать библиотеку jQuery?

От автора: приветствую вас, друзья. Продолжаем изучение библиотеки jQuery. В прошлой статье мы узнали, что такое библиотека jQuery, рассмотрели некоторые преимущества ее использования перед нативным JavaScript, а также узнали способы подключения jQuery к веб-странице. В этой статье мы узнаем, как использовать jQuery. Начнем?

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

Вся работа с jQuery построена на использовании специальной функции – jQuery(). Также эта функция имеет короткий псевдоним — $(), который чаще всего и используют в коде. Давайте поместим на страницу заголовок H1 и попробуем его выбрать (еще говорят – выбрать в коллекцию). Как вы помните из предыдущей статьи, для выборки используется тот же синтаксис, что и в CSS. В CSS для стилизации заголовка мы бы использовали следующий селектор:

h1{/*правила стилизации*/}

Собственно, также должно работать и в jQuery. Попробуем. Кстати, заодно рядом поместим вариант и на нативном JavaScript:

<!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 в специальную функцию:

<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 нам поможет с работой, выполняя код только после загрузки всего документа.

Также вы можете встретить следующую конструкцию:

$(document).ready(function(){
	var h1_jq = $('h1');
	console.log(h1_jq);
});

Эта запись является аналогом предыдущей, которая неявно вызывает метод ready, дожидающийся загрузки документа. Полная запись, с явным вызовом ready, на сегодня является уже устаревшим вариантом, который не рекомендуется использовать, поэтому используйте сокращенную запись.

На этом сегодня все. Исходники к уроку можно скачать по ссылке. Больше о jQuerу вы можете узнать из наших уроков или курса. Удачи!

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree