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

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

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

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

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

Селекторы jQuery

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее

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

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>
var el = $('body *:hidden');
console.log(el);

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

Селекторы jQuery

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

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

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

На этом сегодня все. Больше о 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