Селекторы jQuery. Часть 1

Селекторы jQuery

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

Итак, для начала нам необходима простенькая страничка HTML с несколькими элементами, на которых мы и будем тренироваться в выборке. Возьмем примерно такую страничку:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery</title>
</head>
<body>
	
	<h1>Заголовок H1</h1>
	<h2>Первый заголовок H2</h2>
	<h2>Второй заголовок H2</h2>
	<div id="content">
		<p>Lorem ipsum dolor sit amet.</p>
		<p>Voluptatem incidunt labore fugiat quibusdam.</p>
	</div>
	<div class="content">
		<p>Lorem ipsum dolor sit amet.</p>
		<p>Incidunt laudantium itaque, fuga sunt.</p>
	</div>
	<form>
		<input type="text" name="name">
		<input type="email" name="email">
		<button type="submit">Go</button>
	</form>

	<script src="js/jquery-3.1.1.min.js"></script>
	<script>
		$(function(){
			
		});
	</script>
</body>
</html>

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

$(function(){
	console.log($('h1'));
	console.log($('h2'));
});

Селекторы jQuery

Как результат, в консоли мы видим единственный заголовок H1 и все заголовки H2 на странице. Все это мы можем сократить при желании и до одной строки кода. Вспоминаем, как это делается в CSS, когда мы хотим одинаково оформить сразу несколько элементов – для этого элементы перечисляются через запятую:

console.log($('h1, h2'));

Теперь в коллекцию попадают все перечисленные элементы:

Селекторы jQuery

Также элементы можно выбирать по их классу или идентификатору, точно также, как и в CSS. Выберем все блоки с классом и идентификатором content:

console.log($('.content, #content'));

Селекторы jQuery

Еще один интересный селектор, который может пригодиться в некоторых случаях, — звездочка. С помощью данного селектора мы можем выбрать все элементы документа:

console.log($('*'));

Селекторы jQuery

Абсолютно все элементы документа нам, конечно же, вряд ли понадобятся, поэтому мы можем указать, что хотим выбрать все элементы какого-то конкретного элемента документа. Например, выберем все элементы body и отдельно формы:

console.log($('body *'));
console.log($('form *'));

Селекторы jQuery

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

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

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

Курс по jQuery: основы

Изучите 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