English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Выборщики jQuery позволяют вам выбирать и манипулировать элементами HTML.
Этот раздел содержит полный список выборщиков, принадлежащих к последней версии библиотеки JavaScript jQuery.
Все выборщики делятся на несколько категорий.
| Выборщик | Пример | Объяснение |
|---|---|---|
| * | $("*") | Выберите все элементы (универсальный выборщик) |
| #id | $("#demo") | Выберите элемент, у которого id="demo" |
| .class | $(".demo") | Выберите все элементы, у которых класс="demo" |
| element | $("p") | Выберите все элементы <p> |
| selector1, selector2 | $("p, div") | Выберите все элементы <p> и все элементы <div> |
| Выборщик | Пример | Объяснение |
|---|---|---|
| ancestor descendant | $("div p") | Выберите все элементы <p> внутри элемента <div> |
| parent > child | $("div > p") | Выберите все элементы <p>, у которых родителем является элемент <div> |
| prev + next | $("div + p") | Выберите все элементы <p>, которые следуют сразу за элементом <div> |
| prev ~ siblings | $("div ~ p") | Выберите все элементы <p>, которые являются同级 с элементом <div> |
| Выборщик | Пример | Объяснение |
|---|---|---|
| [attribute] | $("[target]") | Выберите все элементы с атрибутом target |
| [attribute=value] | $("a[href='CSS3']") | Выберите все элементы <a>, у которых значение атрибута href равно "CSS3" |
| [attribute!=value] | $("a[href!='CSS3']") | Выберите все элементы <a>, у которых значение атрибута href не равно "CSS3" |
| [attribute~=value] | $("[alt~=Parrot]") | Выберите все элементы с атрибутом alt, содержащие слово "Parrot" |
| [attribute|=value] | $("[lang|=en]") | Выберите все элементы с атрибутом lang, значение которого начинается с "en" |
| [attribute^=value] | $("a[href^=https]") | Выберите каждый элемент <a>, у которого значение атрибута href начинается с "https" |
| [attribute$=value] | $("a[href$='.org']") | Выберите каждый элемент <a>, у которого значение атрибута href заканчивается на " .org" |
| [attribute*=value] | $("a[href*=example]") | Выберите каждый элемент <a>, у которого значение атрибута href содержит подстроку "example" |
| Выборщик | Пример | Объяснение |
|---|---|---|
| :first | $("p:first") | Выберите первый элемент <p> |
| :last | $("p:last") | Выберите последний элемент <p> |
| :even | $("tr:even") | Выберите все элементы <tr> с нулевым индексом, которые являются четными |
| :odd | $("tr:odd") | Выберите все элементы <tr> с нулевым индексом, которые являются нечетными |
| :not() | $("p:not(.demo)") | Выберите все элементы <p>, за исключением тех, у которых есть класс "demo" |
| :eq() | $("tr:eq(2)") | Выберите третий элемент <tr> в集合е, начиная с нуля |
| :lt() | $("tr:lt(5)") | Выберите все элементы <tr>, индекс которых меньше 5, начиная с нуля |
| :gt() | $("tr:gt(5)") | Выберите все элементы <tr>, индекс которых больше 5, начиная с нуля |
| :header | $":header") | Выберите все заголовочные элементы, такие как <h1>, <h2>, <h3> и т.д. |
| :lang() | $("div:lang(en)") | Выберите все элементы <div>, имеющие значение языка "en", например lang="en", lang="en-us" и т.д. |
| :root | $":root") | Выберите корневой элемент документа, который всегда является элементом <html> в HTML-документе |
| :animated | $":animated") | Выборщик выбирает все анимированные элементы при выполнении выбора |
| Выборщик | Пример | Объяснение |
|---|---|---|
| :first-child | $("p:first-child") | Выберите все элементы, являющиеся первым ребенком родителя |
| :last-child | $("p:last-child") | Выберите все элементы, являющиеся последним ребенком родителя |
| :only-child | $("p:only-child") | Выберите все элементы <p>, принадлежащие единственному ребенку его родителя |
| :first-of-type | $("p:first-of-type") | Выберите все элементы <p>, принадлежащие первому <p> элементу его родителя |
| :last-of-type | $("p:last-of-type") | Выберите все элементы <p>, которые являются последним <p> их родительского элемента |
| :only-of-type | $("p:only-of-type") | Выберите все элементы <p>, которые не имеют однородных элементов и имеют такое же имя элемента |
| :nth-child(n) | $("p:nth-child(3)") | Выберите все элементы <p>, которые являются третьим ребенком их родительского элемента |
| :nth-last-child(n) | $("p:nth-last-child(4)") | Выберите все элементы <p>, которые являются четвертым ребенком их родительского элемента, начиная с предыдущего элемента |
| :nth-of-type(n) | $("span:nth-of-type(3)") | Выберите все элементы <span>, которые являются третьим <span> их родительского элемента |
| :nth-last-of-type(n) | $("span:nth-last-of-type(4)") | Выберите все элементы <span>, которые являются четвертым <span> их родительского элемента, начиная с последнего элемента |
| Выборщик | Пример | Объяснение |
|---|---|---|
| :contains() | $("p:contains('is')") | Выберите все элементы <p>, содержащие текст "is" |
| :empty | $(":empty") | Выберите все пустые элементы, то есть элементы без подэлементов (включая текст) |
| :has() | $("p:has(span)") | Выберите все элементы <p>, содержащие по крайней мере один элемент <span> |
| :parent | $(":parent") | Выберите все элементы, у которых есть по крайней мере один подэлемент (элемент или текст) |
| Выборщик | Пример | Объяснение |
|---|---|---|
| :input | $(":input") | Выберите все элементы ввода, текстовые области, элементы выбора и кнопки |
| :text | $(":text") | Выберите все элементы ввода типа "text" |
| :password | $(":password") | Выберите все элементы ввода типа "password" |
| :radio | $(":radio") | Выберите все элементы ввода типа "radio" |
| :checkbox | $(":checkbox") | Выберите все элементы ввода типа "checkbox" |
| :button | $(":button") | Выберите все элементы ввода и кнопки типа "button" |
| :submit | $(":submit") | Выберите все элементы ввода и кнопки типа "submit" |
| :reset | $(":reset") | Выбрать все элементы ввода и кнопки типа "reset" |
| :image | $(":image") | Выбрать все элементы ввода типа "image" |
| :file | $(":file") | Выбрать все элементы ввода типа "file" |
| :enabled | $(":enabled") | Выбрать все включенные элементы |
| :disabled | $(":disabled") | Выбрать все отключенные элементы |
| :selected | $(":selected") | Выбрать все选定ные элементы, подходит только для элементов <option> |
| :checked | $(":checked") | Выбрать все выбранные или выбранные элементы, подходит для флажков, переключателей и элементов выбора |
| :focus | $(":focus") | Выбрать элемент, находящийся в фокусе |
| Выборщик | Пример | Объяснение |
|---|---|---|
| :hidden | $("p:hidden") | Выбрать все скрытые <p> элементы |
| :visible | $("p:visible") | Выбрать все видимые <p> элементы |