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

Селекторы jQuery

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

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

Допустим, мы хотим выбрать все параграфы, которые находятся внутри блока, который в свою очередь вложен внутрь блока с классом content. Если мы попытаемся выбрать по тегу, тогда будут выбраны абсолютно все параграфы:

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

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

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

Селекторы jQuery

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

Теперь рассмотрим примеры выборки элементов по их атрибутам. jQuery позволяет гибко выбирать элементы по значению любого атрибута или даже по его наличию. Это может быть действительно любой атрибут: width или height у картинки, name у элементов формы и т.д.

Давайте, к примеру, выберем все элементы с атрибутом height, это будут три картинки:

Селекторы jQuery

А что если нам нужны картинки только определенной высоты? Легко. Мы просто укажем дополнительно значение атрибута:

При желании дополнительно мы можем указать значение и других атрибутов, например ширины:

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

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

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

Для примера выберем поле формы с указанным значением атрибута name:

Также мы можем инвертировать результат. Возьмем пример выше с картинками. Например, мы хотим взять любые изображения, высота которых не равна 100 пикселям. Это можно сделать так:

Селекторы jQuery

Также мы можем использовать даже символы регулярных выражений для того, чтобы указать с чего начинается (^) или чем заканчивается значение атрибута ($). Примеры:

Еще одним полезным при работе со значениями атрибутов символом, является символ звездочки (*). Он позволяет указать часть значения, подстроку. Давайте к списку добавим произвольный атрибут data-item:

А теперь попробуем выбрать тот элемент, в значении атрибута которого встречается буква «т»:

При наведении на элемент в консоли он будет подсвечен на странице:

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