В первой статье по документации jQuery мы знакомились с функциями ядра библиотеки. В этой статье мы продолжим знакомиться с API jQuery, и постараемся разобраться с селекторами jQuery. Тема довольно большая, поэтому в этой статье будут приведены сведения по базовым и иерархическим селекторам, а также базовым фильтрам.

Базовые селекторы

#id

возвращает: Array
Выбирает единственный элемент с переданным атрибутом id. Если id содержит специальные символы, их необходимо экранировать с помощью обратного слэша.

Выбираем элемент с id «myDiv» (затем устанавливаем ему красную рамку шириной 3 пиксела).

$("#myDiv").css("border","3px solid red");

Откройте пример в отдельном окне и посмотрите исходный код.

Выбираем элемент с id «myID.entry[1]» (затем устанавливаем ему красную рамку шириной 3 пиксела). Посмотрите каким образом некоторые символы должны быть экранированы с помощью обратного слэша.

$("#myID\\.entry\\[1\\]").css("border","3px solid red");

element

возвращает: Array
Выбирает все элементы с переданным именем.
Ищем все элементы DIV (затем устанавливаем ему красную рамку шириной 3 пиксела). Аргументом является строка с названием элемента, которые необходимо выбрать. Ссылается на tagName узлов DOM.

$("div").css("border","3px solid red");

Откройте пример в отдельном окне и посмотрите исходный код.

.class

возвращает: Array
Выбирает все элементы с переданным именем класса. Аргументом является строка с именем класса. Если элемент имеет несколько имен классов, по одному из них он будет выбран.
Выбираем элементы с классом «myClass» (затем устанавливаем ему красную рамку шириной 3 пиксела).

$(".myClass").css("border","3px solid red");

Откройте пример в отдельном окне и посмотрите исходный код.

*

возвращает: Array
Выбирает все элементы. В примере выбираем все элементы (включая head, body, и т.д.), затем устанавливаем им (всем) красную рамку шириной 3 пиксела.

$("*").css("border","3px solid red");

Откройте пример в отдельном окне и посмотрите исходный код.

А вот простой путь, чтобы отыскать все элементы в контексте document.body.

$("*", document.body).css("border","3px solid red");

Таким образом элементы head, script, и т.д. не включаются в набор. Да, и конечно красная рамка шириной 3 пиксела…

selector1, selector2, selectorN

возвращает: Array
Собирает набор из всех элементов переданных в селекторах. Вы можете определить любое количество селекторов для объединения в единый результат. Заметьте, что порядок следования элементов в DOM и объекте jQuery не обязательно будет идентичным.
Ищем элементы, которые соответствуют любым элементам div, span и p с именем класса myClass и для всех их устанавливаем красную рамку шириной 3 пикселаааааа…

$("div,span,p.myClass").css("border","3px solid red");

Откройте пример в отдельном окне и посмотрите исходный код.

А вот так можно показать порядок следования элементов в объекте jQuery (заметьте, не в HTML-коде страницы!).

var list = $("div,p,span").map(function () {
  return this.tagName;
}).get().join(", ");
$("b").append(document.createTextNode(list));

Откройте пример в отдельном окне и посмотрите исходный код.

Иерархические селекторы

ancestor descendant

возвращает: Array
Выбираются все элементы потомки элемента, определенного как предок. В общем лучше конечно на простом примере.
Ищем все элементы input, являющиеся потомками элемента form (и устанавливаем синюю рамку из точек, шириной 2 пиксела).

$("form input").css("border", "2px dotted blue");

Откройте пример в отдельном окне и посмотрите исходный код.

parent > child

возвращает: Array
Выбираются все прямые наследники элемента-родителя. Опять же, лучше показать на примере.
Ищем все прямые наследники элемента с идентификатором «main» (в примере #main с желтым бэкграундом) и устанавливаем им двойную рамку красного цвета шириной в 3 пиксела.

$("#main > *").css("border", "3px double red");

Откройте пример в отдельном окне и посмотрите исходный код.

prev + next

возвращает: Array
Выбираются все элементы, которые являются следующими (next) за элементом, определенным как предыдущий (prev). Смотрим на примере.
Ищем все элементы input, которые следуют непосредственно за элементом label, устанавливаем текст синего цвета и вставляем значение Labeled!

$("label + input").css("color", "blue").val("Labeled!")

Откройте пример в отдельном окне и посмотрите исходный код.

prev ~ siblings

возвращает: Array
Выбираются все сестринские элементы, которые следую сразу за элементом prev. Также разберем на примере.
Ищем все элементы div, которые являются сестринскими по отношению друг к другу и следуют сразу за элементом с идентификатором #prev. Обратите внимание, что в примере не будут отобраны элементы span, поскольку отбор идет только для элементов div.

$("#prev ~ div").css("border", "3px groove blue");

Откройте пример в отдельном окне и посмотрите исходный код.

Базовые фильтры

:first

возвращает: Array
Выбирается первый элемент соответствующего селектора.
Ищем первую строку в таблице и устанавливаем для нее наклонное начертание шрифта.

$("tr:first").css("font-style", "italic");

Откройте пример в отдельном окне и посмотрите исходный код.

:last

возвращает: Array
Выбирается последний элемент соответствующего селектора.
Ищем последнюю строку в таблице, устанавливаем для нее желтый фон и жирный шрифт.

$("tr:last").css({
  backgroundColor: "yellow",
  fontWeight: "bolder"
});

Откройте пример в отдельном окне и посмотрите исходный код.

:not(selector)

возвращает: Array
Отфильтровывает выбранные элементы, используя условие отрицания. На примере будет намного понятнее…
Ищем все элементы input, которые НЕ отмечены флажками выбора, а также элементы span, следующие непосредственно за ними.
Обратите внимание, что никаких изменений по клику на чекбоксах не происходит, но это вполне понятно, поскольку в пример не включена обработка событий.

$("input:not(:checked) + span")
.css("background-color", "yellow");

Откройте пример в отдельном окне и посмотрите исходный код.

:even

возвращает: Array
Выбираются четные элементы. Отсчет начинается от 0.
Ищем четные строки таблицы, выбирая первую, третью и так далее. Обратите внимание еще раз: четные – потому что отбор производится по индексам, соответственно отбираются строки с индексами 0, 2, 4 и т.д.).

$("tr:even").css("background-color", "#bbbbff");

Откройте пример в отдельном окне и посмотрите исходный код.

:оdd

возвращает: Array
Выбираются нечетные элементы. Отсчет начинается от 0.
Ищем нечетные строки таблицы, выбирая вторую, четвертую и так далее. Обратите внимание еще раз: нечетные – потому что отбор производится по индексам, соответственно отбираются строки с индексами 1, 3, 5 и т.д.).

$("tr:odd").css("background-color", "#bbbbff");

Откройте пример в отдельном окне и посмотрите исходный код.

:eq(index)

возвращает: Array
Выбирается единственный элемент по его индексу.
Например, ищем третий элемент TD. Не забывайте, что отсчет ведется от 0.

$("td:eq(2)").css("color", "red");

Откройте пример в отдельном окне и посмотрите исходный код.

:gt(index)

возвращает: Array
Выбираются все элементы с индексом больше указанного в селекторе.
В примере будут выбраны все элементы TD с индексом более 4, т.е. от 5 и более. Отсчет ведется от 0.

$("td:gt(4)").css("text-decoration", "line-through");

Откройте пример в отдельном окне и посмотрите исходный код.

:lt(index)

возвращает: Array
Выбираются все элементы с индексом меньше, чем указан в селекторе.
Например ищем все элементы TD, с индексом меньше 4. Отсчет ведется от 0.

$("td:lt(4)").css("color", "red");

Откройте пример в отдельном окне и посмотрите исходный код.

:header

возвращает: Array
Выбираются все элементы, которые являются заголовками, например h1, h2, h3 и так далее.
В примере мы устанавливаем серый цвет для бэкграунда и синий для текста для всех заголовков (т.е. элементов h) на странице.

$(":header")
.css({ background:'#CCC', color:'blue' });

Откройте пример в отдельном окне и посмотрите исходный код.

:animated

возвращает: Array
Выбираются все элементы, которые в настоящий момент являются анимированными.
В приведенном ниже примере мы щелчком мыши по кнопке меняем цвет анимированного элемента DIV. Элементы DIV, не являющиеся в этот момент анимированными, свой цвет не изменяют.

$("#run").click(function(){
  $("div:animated").toggleClass("colored");
});
function animateIt() {
  $("#mover").slideToggle("slow", animateIt);
}
animateIt();

Откройте пример в отдельном окне и посмотрите исходный код.