JQuery – библиотека методов, написанных на языке JavaScript, которые предназначены для упрощенной работы с элементами HTML страницы. Данная библиотека также значительно упрощает выборку этих элементов, ведь поддерживает набор селекторов, большая часть которых заимствована из CSS. В данной статье мы подробно расскажем о всех селекторах jQuery и приведем примеры их использования.
CSS и jQuery
Как говорилось выше, селекторы в jQuery заимствованы из CSS, однако здесь есть несколько «НО».
- Во-первых, jQuery поддерживает только селекторы, выбирающие элементы DOM, т. е. вы не сможете работать с событийными селекторами, например, hover, и псевдо-элементами first-line.
- Во-вторых, у jQuery имеется множество других селекторов, которые вы не встречали в правилах CSS, именно поэтому, если вы уже знаете все элементы CSS, эта статья все равно будет актуальна для вас.
Базовые элементы
Данные селекторы используются чаще всего, ведь это самый простой и надежный способ выборки элементов. Эта группа полностью соответствует селекторам 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>. | Выбирает элемент, в котором ничего не содержится. |
Каждый из представленных селекторов будет выбирать определенный элемент из кода на картинке ниже.
Такой 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 предусмотрены специальные селекторы.
| Селектор | Пример селектора | Описание селектора |
| :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 | Выбираются элементы с нечетным номером индекса |
Прочие селекторы
Данные селекторы невозможно присоединить к какой-либо группе, однако они не менее важны. Например, селектор: 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 в целом написано множество книг, однако они выходят за рамки данной статьи. Мы лишь дадим несколько простых советов, которые значительно увеличат производительность скриптов при выборке элементов.
- Старайтесь обходиться базовыми селекторами jQuery.
- При выборе нескольких элементов для обработки старайтесь объединить их в некоторую группу, а не выбирать каждый по отдельности. Сделать это можно через класс, либо используя более специфичные селекторы.
- Используя выбор по положению, старайтесь максимально минимизировать список, из которого будет происходить выборка - это значительно снизит скорость поиска нужного элемента.
Пример скрипта с jQuery и его селекторами:
Заключение
Теперь вы знаете абсолютно все селекторы из jQuery, кроме того, надеемся, что примеры помогли вам понять, как строить нужное условие из нескольких различных селекторов.
