jQuery селекторы
В этом разделе представлено описание всех возможных способов для выбора необходимого элемента, или набора элементов в документе с использованием JavaScript библиотеки jQuery.
| Селектор | Пример | Описание примера |
|---|---|---|
| * | $("*") | Выбирает все элементы в документе (включая <html>, <head> и <body>). |
| #id | $("#test") | Выбирает элемент, глобальный атрибут id которого, имеет значение "test" (элемент с определенным идентификатором). |
| .class | $(".test") | Выбирает элементы, глобальный атрибут class которых, имеет значение "test". |
| element | $("a") | Выбирает все HTML элементы <a> в документе. |
| selector,selector | $("i,b,em,.class") | Выбирает все HTML элементы <i>, <b>, <em> и элементы, глобальный атрибут class которых, имеет значение "test" в документе. |
| element element | $("div a") | Выбирает все элементы <a>, вложенные внутри элементов <div> (селектор потомков). |
| element > element | $("div > strong") | Выбирает все дочерние элементы <strong>, у которых родитель - элемент <div> (селектор дочерних элементов). |
| element + element | $("h2 + p") | Выбирает все элементы <p>, которые расположены сразу же после элементов <h2>. |
| element ~ element | $("div ~ p") | Выбирает все элементы <p>, которые следуют сразу же за элементом <h2>, а также все элементы <p>, которые находятся на одном уровне вложенности (сестринские элементы). |
| :first | $("a:first") | Выбирает первый HTML элемент <a> в документе. |
| :last | $("a:last") | Выбирает последний HTML элемент <a> в документе. |
| :even | $("tr:even") | Выбирает каждый элемент с четным индексом (например: 0, 2, 4 и так далее), или другими словами выбирает каждый нечетный HTML элемент <tr> в документе (например: 1, 3, 5 и так далее). |
| :odd | $("tr:odd") | Выбирает каждый элемент с нечетным индексом (например: 1, 3, 5 и так далее), или другими словами выбирает каждый четный HTML элемент <tr> в документе (например: 2, 4, 6 и так далее). |
| :first-child | $("li:first-child") | Выбирает элементы <li>, которые являются первыми дочерними элементом своего родителя. |
| :first-of-type | $("p:first-of-type") | Выбирает все элементы <p>, которые являются первыми дочерними элементами (определенного типа) своего родителя. |
| :last-child | $("li:last-child") | Выбирает элементы <li>, которые являются последними дочерними элементами своего родителя. |
| :last-of-type | $("p:last-of-type") | Выбирает все элементы <p>, которые являются последними дочерними элементами (определенного типа) своего родителя. |
| :nth-child(n) | $("tr:nth-child(3)") | Выбирает каждый элемент <tr>, который является третьим дочерним элементом своего родительского элемента. |
| :nth-last-child(n) | $("li:nth-last-child(3)") | Выбирает каждый элемент <li>, который является третьим дочерним элементом своего родительского элемента (считая от последнего дочернего элемента). |
| :nth-of-type(n) | $("img:nth-of-type(2)") | Выбирает каждый элемент <img>, который является вторым дочерним элементом своего родительского элемента. |
| :nth-last-of-type(n) | $("img:nth-last-of-type(2)") | Выбирает каждый элемент <img>, который является вторым дочерним элементом своего родительского элемента (считая от последнего дочернего элемента). |
| :only-child | $("a:only-child") | Выбор каждого элемента <a>, который является единственным дочерним элементом своего родительского элемента (нет других элементов). |
| :only-of-type | $("a:only-of-type") | Выбор каждого элемента <a>, который является единственным элементом <a> своего родительского элемента (нет других элементов <a>). |
| :eq(index) | $("td:eq(3)") | Выбирает четвертую ячейку данных (тег <td>) внутри таблицы (индекс начинается с нуля). |
| :gt(index) | $("td:gt(3)") | Выбирает все ячейки данных (тег <td>) чей индекс больше трех (индекс начинается с нуля). |
| :lt(index) | $("td:lt(3)") | Выбирает все ячейки данных (тег <td>) чей индекс меньше трех (индекс начинается с нуля). |
| :not(selector) | $("div:not(.test)") | Селектор отрицания выбирает все элементы <div>, кроме тех, глобальный атрибут class которых, имеет значение "test". |
| :header | $(":header") | Выбирает все элементы, которые являются заголовками (от <h1> и до <h6>). |
| :animated | $(":animated") | Выбирает все элементы, которые находятся в процессе анимации в тот момент, когда селектор используется (только для элементов анимируемых с использованием библиотеки jQuery). |
| :focus | $(":focus") | Определяет какой элемент находится в фокусе в данный момент. |
| :contains(text) | $(":contains('Aloha')") | Выбирает все элементы, которые содержат текст "Aloha" |
| :has(selector) | $("div:has(h3)") | Выбирает все элементы <div>, которые содержат в себе элементы <h3> (в качестве дочернего элемента, либо потомка). |
| :empty | $(":empty") | Выбирает все элементы, которые не имеют дочерних элементов и текстовых узлов (пустые элементы). |
| :parent | $(":parent") | Выбирает все элементы, которые имеют по крайней мере один дочерний узел (элемент или текст). |
| :hidden | $("div:hidden") | Выбирает все элементы <div>, которые скрыты (не занимают место в документе). |
| :visible | $("div:visible") | Выбирает все элементы <div>, которые являются видимыми (занимают место в документе). |
| :root | $(":root") | Выбирает элемент, который является корневым для документа. |
| :lang(language) | $("p:lang(ru)") | Выбирает каждый элемент <p>, глобальный атрибут lang которого, содержит значение "ru". |
| [attribute] | $("[alt]") | Выбирает все элементы, которые имеют атрибут alt с любым значением. |
| [attribute='value'] | $("[src='logo.png']") | Выбирает все элементы, которые имеют указанный атрибут (src) со значением logo.png. |
| [attribute='value'][attribute2='value2'] | $("[src='logo.png'][alt='image']") | Выбирает все элементы, которые имеют указанные атрибуты (src и alt) со значениями этих атрибутов logo.png для первого и image для второго. |
| [attribute!='value'] | $("[src!='logo.png']") | Выбирает все элементы, которые не имеют указанный атрибут, либо имеют указанный атрибут (src) со значением отличным от logo.png (не равно этому значению). |
| [attribute$='value'] | $("[href$='.php']") | Выбирает все элементы, значение атрибута href которых, заканчивается на ".php". |
| [attribute|='value'] | $("[title|='ru']") | Выбирает элементы, которые имеют глобальный атрибут title со значением равным "ru", либо элементы, значение которых начинается с этого значения и после него сразу следует дефис ("ru-anystring"). |
| [attribute^='value'] | $("[title^='eng']") | Выбирает элементы, которые имеют указанный глобального атрибут title со значением, которое начинается с "eng". |
| [attribute~='value'] | $("[title~='free']") | Выбирает все элементы со значением глобального атрибута title, содержащего определенное слово "free" (слово может быть разделено пробелами). |
| [attribute*='value'] | $("[title*='free']") | Выбирает все элементы со значением глобального атрибута title, содержащего указанную подстроку "free". |
| :input | $(":input") | Выбирает все элементы <input>, <textarea>, <select> и <button>. |
| :text | $(":text") | Выбирает все элементы <input>, которые имеют атрибут type со значением text. |
| :password | $(":password") | Выбирает все элементы <input>, которые имеют атрибут type со значением password. |
| :radio | $(":radio") | Выбирает все элементы <input>, которые имеют атрибут type со значением radio. |
| :checkbox | $(":checkbox") | Выбирает все элементы <input>, которые имеют атрибут type со значением checkbox. |
| :submit | $(":submit") | Выбирает все элементы <input> и <button>, которые имеют атрибут type со значением submit и элемент <button>, который не имеет атрибута type. |
| :reset | $(":reset") | Выбирает все элементы <input> и <button>, которые имеют атрибут type со значением reset. |
| :button | $(":button") | Выбирает все элементы <input> и <button>, которые имеют атрибут type со значением button. |
| :image | $(":image") | Выбирает все элементы <input>, которые имеют атрибут type со значением image. |
| :file | $(":file") | Выбирает все элементы <input>, которые имеют атрибут type со значением file. |
| :enabled | $(":enabled") | Выбирает все элементы, которые активны (у которых не установлен логический атрибут disabled). |
| :disabled | $(":disabled") | Выбирает все элементы, которые не активны (у которых установлен логический атрибут disabled). |
| :selected | $(":selected") | Выбирает все элементы <option>, у которых установлен логический атрибут selected. |
| :checked | $(":checked") | Выбирает все элементы <input>, у которых установлен логический атрибут checked (только для <input type = "checkbox" и <input type = "radio" >). Кроме того, выбирает элементы <option> (пункты раскрывающегося списка <select>) с логическим атрибутом selected. |
| :target | $("p:target") | Если идентификатор ресурса (URI) документа содержит фрагмент идентификатора элемента, то селектор выбирет элемент с подобным идентификатором (глобальный атрибут id). Например, элемент <p id = "info"> будет выбран так как URI документа (http://пример.ру/#info) содержит фрагмент идентификатора этого элемента. |