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

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

Селекторы jQuery

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

Итак, первый селектор – :has. Данный селектор выбирает все элементы, содержащие элемент, переданный параметром селектору :has. Взглянем на пример:

<div class="content block1">
	<p>Lorem ipsum dolor sit amet.</p>
	<p>Voluptatem incidunt labore fugiat quibusdam.</p>
</div>
<div class="content block2">
	<p>Lorem ipsum dolor sit amet.</p>
	<ul>
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>
	</ul>
	<p>Incidunt laudantium itaque, fuga sunt.</p>
</div>

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

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

</div>

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

<ul>

</ul>

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

</div>

Попробуем выбрать тот блок div, внутри которого есть список:

var el = $('div:has(ul)');
console.log(el);

1 2	var el = $('div:has(ul)'); console.log(el);

Заглянем в консоль, чтобы убедиться, что все получилось.

Селекторы jQuery

Следующая пара полезных селекторов – селекторы even и odd, которые фильтруют набор элементов, оставляя четные (:even) или нечетные элементы (:odd), точнее, элементы с четным или нечетным индексом. Как мы помним, нумерация индексов начинается с нуля, соответственно, первый элемент – элемент с индексом 0 – будет счиаться четным. Второй элемент – элемент с индексом 1 – будет уже нечетным.

var elEven = $('li:even');
var elOdd = $('li:odd');
console.log(elEven);
console.log(elOdd);

var elEven = $('li:even');

var elOdd = $('li:odd');

console.log(elEven);

console.log(elOdd);

Селекторы jQuery

Последний селектор, который мы рассмотрим в цикле статей, посвященных выборке, это селектор :hidden. Данный селектор позволяет выбрать скрытые на странице элементы. Обратите внимание на следующий нюанс: скрытым не будет считаться элемент, который просто невидим. Например, если мы скроем элемент с помощью свойства visibility: hidden – он будет невидим, но тем не менее селектор не будет воспринимать его скрытым, поскольку элемент будет занимать некие размеры. Селектор :hidden прежде всего считает скрытыми элементы, для которых указано свойство display: none. Также селектор будет выбирать, к примеру, скрытые поля формы. Попробуем выбрать все скрытые элементы в body документа:

<div class="content block1" style="visibility: hidden;">
	<p>Блок 1</p>
</div>
<div class="content block2" style="display: none;">
	<p>Блок 2</p>
</div>
<div class="block3" style="width: 0; height: 0;"></div>
<form>
	<input type="hidden" name="name">
</form>

</div>

</div>

<form>

</form>

var el = $('body *:hidden');
console.log(el);

1 2	var el = $('body *:hidden'); console.log(el);

И результат примера:

Селекторы jQuery

Как видим, в коллекцию попал блок, скрытый через display: none, скрытое поле формы, а также теги script перед закрывающим тегом body. Кстати, мы легко можем исключить ненужные теги script из выборки, использовав уже знакомый селектор :not.

var el = $('body *:hidden:not(script)');

1	var el = $('body *:hidden:not(script)');

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

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

Метки: jquery