Селекторы jQuery: как использовать?

JQuery – библиотека методов, написанных на языке JavaScript, которые предназначены для упрощенной работы с элементами HTML страницы. Данная библиотека также значительно упрощает выборку этих элементов, ведь поддерживает набор селекторов, большая часть которых заимствована из CSS. В данной статье мы подробно расскажем о всех селекторах jQuery и приведем примеры их использования.

CSS и jQuery

Как говорилось выше, селекторы в jQuery заимствованы из CSS, однако здесь есть несколько «НО».

  • Во-первых, jQuery поддерживает только селекторы, выбирающие элементы DOM, т. е. вы не сможете работать с событийными селекторами, например, hover, и псевдо-элементами first-line.
  • Во-вторых, у jQuery имеется множество других селекторов, которые вы не встречали в правилах CSS, именно поэтому, если вы уже знаете все элементы CSS, эта статья все равно будет актуальна для вас.
Библиотека jQuery для работы с HTML-страницей

Базовые элементы

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


Селектор Описание селектора
$("*") В выборку попадают все элементы на странице

$("b")

В выборку попадают элементы с выбранным тегом из разметки HTML, в данном примере - элементы <b>...</b>

$(".classA")

В выборку попадают элементы с указанным классом (<div class="classA">)

$("#IDone")

В выборку попадают элементы с указанным id (<div id="IDone">)

Как и в CSS, вы можете выбрать несколько селекторов jQuery одновременно. Их можно прописать через запятую. Например, использовать селектор jquery по имени тега и по ID - $("#IDone, b"). Допускается и выборка через тег+класс, либо тег+ID, например, $("b.classA").

Селекторы атрибутов

Используя различные CMS, вы можете столкнуться с ситуацией, когда элементу HTML-разметки невозможно задать Id или класс. Та же проблема возникает при обработке контента, генерируемого пользователем. Отсюда возникает проблема выборки конкретных элементов, однако ее легко решить, используя селектор по атрибуту из jquery.


Селектор Описание селектора
$("div[attribute]") Обрабатывает все элементы с указанным атрибутом, при этом его значение не учитывается
$("div[attribute='value']") Выбирая элемент, учитывает его атрибут и значение
$("div[attribute!='value']") Выбирает тот элемент, у которого указанный атрибут имеет отличное от указанного значение. В выборку также попадают элементы, не имеющие данного атрибута
$("div[attribute^='value']") Выбирает элемент, у которого заданный атрибут начинается со строки, указанной в value
$("div[attribute$='value']") Выбирает элемент, у которого заданный атрибут заканчивается строчкой, указанной в value
$("div[attribute*='value']") Выбирает элемент, у которого заданный атрибут содержит в любой части указанную в value строку
$("div[attribute~='value']") Выбирает элемент, у которого заданный атрибут имеет указанное в value слово (последовательность знаков без пробелов)
$("div[attribute|='value']") Выбирает элемент, у которого заданный атрибут соответствует указанному в value значению, либо начинается с него с последующим использованием дефиса
Пример использования селекторов по атрибуту

Вы можете комбинировать атрибуты, чтобы сузить поиск подходящих элементов, например, $("img[width=500][height=260]").

Выборка элементов по содержанию

Покопаться в содержимом элементов HTML-страницы и выбрать по результатам нужный из них - уникальная возможность jQuery. Используя такой метод, вы можете, например, сделать селектор jquery по тексту, содержащемуся в параграфе (<p>текст</p>).


Селектор Пример селектора Описание селектора
:contains() $("p:contains('value')") – выбирает все параграфы <p>, содержащие строку 'value'. Выбирает элемент, в котором содержится указанная строка. Элемент будет удовлетворителен даже в том случае, если указанная строка будет находиться внутри его дочернего элемента. Запомните, что данный селектор чувствителен к регистру, поэтому строка "text" не будет удовлетворять указанному значению "TEXT"
:has() $("p:has(b)") – выбирает все элементы <p>, содержащие <b>. Выбирает элемент, в котором содержится другой элемент, указанный в скобках. Данный селектор также учитывает дочерние элементы
:parent $("p:parent") – выбирает все <p>, содержащие что-либо. Выбирает элемент, в котором содержится что-либо
:empty $("p:empty") – выбирает все пустые <p>. Выбирает элемент, в котором ничего не содержится.

Каждый из представленных селекторов будет выбирать определенный элемент из кода на картинке ниже.

HTML-разметка, удовлетворяющая селекторам

Такой jquery селектор также можно совмещать с другими, например, $("p.mail:contains('e-mail')") будет выбирать все параграфы с классом "mail", которые содержат в себе строку "e-mail".

Выбор элементов по иерархии

Данный метод абсолютно идентичен селекторам из CSS. Он позволяет выбрать элементы, в зависимости от их положения относительно родственных элементов в структуре DOM. Здесь лучше сразу разбирать селекторы jquery на примерах.

Пример селектора Описание селектора
$("ul > li") Выбирает все элементы с тэгом <li>, которые являются прямыми потомками (детьми) <ul>
$("ul a") Выбирает все элементы с тэгом <a>, которые являются потомками любого уровня для <ul>
$("h1 + p") Выбирает братский элемент с тэгом <p>, идущий сразу за <h1>
$("li ~ a") Выбирает элемент с тэгом <a>, который следует сразу за <li>, однако здесь они могут не быть братскими, но должны иметь общего предка
$("li:first-child") Выбирает элемент с тэгом <li>, который является первым ребенком своего родителя, например, <ul>
$("li:last-child") Выбирает элемент с тэгом <li>, который является последним ребенком своего родителя, например, <ul>
$("li:nth-child(3)") Выбирает элемент с тэгом <li>, который является третьим ребенком своего родителя. Вместо тройки, конечно же, можно использовать любое другое число
$("li:only-child") Выбирает те элементы с тэгом <li>, родитель которых имеет только прямых потомков (детей)
Наследственность элементов

Отдельно стоит поговорить о jquery селекторе li:nth-child(n), ведь он позволяет задавать не только конкретные числа. Так он может выбирать все четные элементы, если вместо n задать константу even, либо нечетные, задав odd. Вместо n также можно использовать выражение, например, $("li:nth-child(2n+3)") будет выбирать каждый второй элемент, начиная свой отсчет с третьего прямого потомка.

Работа с полями формы

Тег input имеет множество различных вариаций, работа которых зависит от атрибута type. Для выбора различных типов полей ввода в jQuery предусмотрены специальные селекторы.

Поля ввода Input
Селектор Пример селектора Описание селектора
:button $("input:button") Выбирает все кнопки
:checkbox $("input:checkbox") Чекбоксы
:file $("input:file") Поля загрузки файлов
:image $("input:image")

Поля ввода изображений

:password $("input:password") Поля для паролей
:radio $("input:radio") Радио-кнопки
:reset $("input:reset") Кнопки сброса формы
:submit $("input:submit") Кнопки отправки формы
:text $("input:text") Поля для текста
:input $(":input") Все поля формы
:checked $("input:checked") Отмеченные поля в чекбоксах или радио-кнопках
:selected $("option:selected") Элементы меню option
:disabled $("input:disabled") Отключенные поля формы
:enabled $("input:enabled") Включенные поля формы

Выбор по положению

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

Селектор Описание
:first Работает с первым элементом из подходящего списка
:last С последним элементом из списка
:eq(n) Выбирает элемент из списка по его индексу (n). Внимание! Нумерация элементов, подходящих под условие jQuery select ведется с 0!
:lt() Выбираются все элементы из списка, находящие до элемента с индексом n
:gt() Выбираются все элементы из списка, находящие после элемента с индексом n
:even Выбираются элементы с четным номером индекса
:odd Выбираются элементы с нечетным номером индекса
Использование селектора :gt() для управления стилями таблицы

Прочие селекторы

Данные селекторы невозможно присоединить к какой-либо группе, однако они не менее важны. Например, селектор: not(), который можно назвать логическим, позволяет "перевернуть" условие или его часть, сделав выборку из неподходящих условий.

Также не менее полезным окажется селектор: hidden, который позволит развернуть элемент-картинку с размерами 0х0 рх на весь экран, например, по нажатию кнопки.

Селектор Описание
:not() Выбирает элементы, не соответствующие заданному в скобках условию
:animated Выбирает элементы, анимируемые jQuery в данный момент
:hidden Выбирает элементы со свойством display: none, type="hidden", и с высотой и шириной в 0px. Также распространяется на элементы, содержащие в себе скрытые элементы одним из вышеперечисленных способов. Внимание! Элемент со свойством visibility, установленным в "hidden", не попадет в выборку jquery select
:visible Обратно: hidden
:header

Выбирает элементы h1, h2, h3, h4, h5 и h6

Как лучше использовать селекторы

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

  1. Старайтесь обходиться базовыми селекторами jQuery.
  2. При выборе нескольких элементов для обработки старайтесь объединить их в некоторую группу, а не выбирать каждый по отдельности. Сделать это можно через класс, либо используя более специфичные селекторы.
  3. Используя выбор по положению, старайтесь максимально минимизировать список, из которого будет происходить выборка - это значительно снизит скорость поиска нужного элемента.

Пример скрипта с jQuery и его селекторами:

Использование селекторов jQuery

Заключение

Теперь вы знаете абсолютно все селекторы из jQuery, кроме того, надеемся, что примеры помогли вам понять, как строить нужное условие из нескольких различных селекторов.

Пример jQuery. Простые примеры скриптов на jQuery
jQuery — это библиотека JavaScript, которая позволяет веб-разработчикам добавлять дополнительные функции на свои веб-сайты. Он доступен с открытым исходным кодом и предоставляется бесплатно по лицензии MIT. В последние годы jQuery стал самой ...
далее
CSS Selectors. Виды селекторов
Что такое селекторы CSS? Как ими пользоваться? Какой селектор идеально подойдет для вашего случая? Рассмотрим всем существующие варианты.
далее
CSS-селектор и его роль в форматировании html-документов
Создавая свой сайт и наполняя его определенными элементами веб-страницы, каждый непременно столкнется с таким понятием, как CSS-селектор. Служит он для того, чтобы наиболее точно определить все элементы html-файла, их оформление и место на странице.
далее
jQuery: подключение к веб-странице
jQuery является Javascript-библиотекой, которая фокусируется на взаимосвязанной работе технологий HTML, JavaScript и CSS.
далее
Всплывающая подсказка с помощью CSS: пошаговая инструкция и способы ...
Способы создания всплывающей подсказки на веб-сайте. Использование HTML-атрибута title для создания простых подсказок. Пошаговая инструкция по созданию подсказки для элемента. Варианты размещения всплывающей подсказки.
далее
Селектор first-child в CSS: выбор первого элемента
Принцип работы CSS-селектора first-child. Выбор первого элемента в контейнере. Частые ошибки при использовании. Сравнение с селектором first-of-type. Выбор последнего элемента.
далее
Селектор first-child в CSS: выбор первого элемента
Сайт Nadom-info.ru — отзывы, услуги
У каждого человека есть мечта и желание получить от жизни как можно больше материальных благ. Народное творчество изобилует историями про волшебные случайности, в результате которых главный герой сказочно быстро богател. Наивность людей приводит к тому, что они становятся жертвами обмана.
далее
Сайт Nadom-info.ru — отзывы, услуги
Ajax - примеры. Ajax скрипты
Интернет обеспечивает посетителю видимость каждого ресурса, находящегося на хостинге в сети, а браузеру - доступ через сетевые протоколы, механизмы вызова отдельных скриптов, передачу/получение информации. Совокупность страниц, составляющих сайт, имеет общий root - уникальную ссылку (доменное имя, уникальный адрес узла).
далее
Ajax - примеры. Ajax скрипты
Узнаем как выбрать караоке для дома: последние отзывы
Караоке считается отличным вариантом избавления от депрессии и поднятия настроения в считаные минуты. И не важно, умеет человек петь или нет. Развлекаться можно большой компанией, не выходя из дома. Рассмотрим особенности выбора и компоненты именно домашней системы караоке.
далее
Узнаем как выбрать караоке для дома: последние отзывы
Модальное окно jQuery - для чего нужно и как правильно установить
В статье раскрывается понятие модального окна jQuery и на одном примере показывается, как установить его на сайт.
далее
Модальное окно jQuery - для чего нужно и как правильно установить