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

Дата публикации: 2016-12-06

Селекторы 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>

<!DOCTYPE html>

<head>

<title>jQuery</title>

</head>

<body>

<h1>Заголовок H1</h1>

<h2>Первый заголовок H2</h2>

<h2>Второй заголовок H2</h2>

<p>Lorem ipsum dolor sit amet.</p>

<p>Voluptatem incidunt labore fugiat quibusdam.</p>

</div>

<p>Lorem ipsum dolor sit amet.</p>

<p>Incidunt laudantium itaque, fuga sunt.</p>

</div>

<form>

</form>

$(function(){

});

</script>

</body>

</html>

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

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

$(function(){

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

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

});

Селекторы jQuery

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

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

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

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

Селекторы jQuery

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

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

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

Селекторы jQuery

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

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

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

Селекторы jQuery

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

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

1 2	console.log($('body ')); console.log($('form '));

Селекторы jQuery

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

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

Метки: jquery