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

Селекторы jQuery

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

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

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

Селекторы jQuery

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Селекторы jQuery

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

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

Селекторы jQuery

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

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

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

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

Научиться

Метки:

Похожие статьи:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree