Селекторы

Как я уже говорил ранее, в поиске элементов на странице заключается практически половина успешной работы с jQuery. Так что приступим к поискам по документу.

Идентификатор и классы

Выбор элементов по id либо имени класса, аналогично используемым в CSS:

$("#content")	выбираем элемент с id="content"
$("section#content")	выбираем <section> с id="content"
$(".intro")	выбираем элементы с class="intro"
$(".intro.pinned")	выбираем элементы с классами intro и pinned
$("h3")	выбираем все теги <h3>
$("h1, h2")	выбираем все теги <h1> и <h2>

Используйте валидные имена классов и идентификаторов

Дочерние элементы

Теперь вспомним, что мы в DOMе не одни, это-таки иерархическая структура:

$("article h3")	выбираем все теги <h3> внутри тега <article>
$("article").find("h3")	аналогично примеру выше
$("section article h3")	выбираем все теги <h3> внутри тега <article>, которые находятся внутри тега <section>, в DOMе который построил Джек
$("section") .find("article") .find("h3")	и ещё раз, но на другой лад, и под капотом работает иначе, но мы про это ещё поговорим

Соседние элементы

У нас есть соседи, и у нас с ними налажен контакт. Вот вам несколько способов как найти их:

$("article + article")	выбор всех элементов <article>, перед которыми есть тег <article>
$("#stick ~ article")	выбор всех элементов <article> после элемента с id="stick"
$("#stick").next()	выбор следующего элемента после элемента с id="stick"

Потомки и родители

Родственные связи решают:

$("article > h3")	выбираем все теги <h3>, которые являются непосредственными потомками тега <article>
$("article > *")	выбор всех потомков элементов <article>
$("article").children()	аналогично примеру выше
$("p").parent()	выбор всех прямых предков элементов <p>
$("p").parents()	выбор всех предков элементов <p> достаточно экзотичная задача
$("p").parents("section")	выбор всех предков элемента <p>, которые есть <section> (parents() принимает в качестве параметра селектор)

$("*") – выбор всех элементов; следует использовать с огромной осторожностью

Поиск по атрибутам

Ещё со времён CSS2 была возможность найти элемент с определёнными атрибутами, в CSS3 расширили возможности поиска по атрибутам:`

$("a[href]")	все ссылки с атрибутом href
$("a[href=#]")	все ссылки с href=#
$("a[href~=#]")	все ссылки с # где-то в href
$("a[hreflang|=en]")	все ссылки, со словом en в hreflang символ - воспринимается как разделитель для слов: en, en-US, en-UK
$("a[href^=https]")	ссылки, начинающиеся с https
$("a[href*='google.com']")	ссылки на «погуглить»
$("a[href$=.pdf]")	ссылки на PDF-файлы (по идее)

Если вы решите заглянуть внутрь jQuery, то вы, скорей всего, найдете то самое место, где ваше выражение будет анализироваться с помощью регулярных выражений, по этой причине в селекторах необходимо экранировать специальные символы, используя двойной обратный слеш «\\»:

$("a[href^=\\/]").addClass("internal");

Структурные псевдоклассы

Хотелось бы ещё обратить внимание на структурные псевдоклассы из спецификации CSS3, там много интересных и полезных, например:

$("ul li:first-child")	первый дочерний элемент
$("ul li:last-child")	последний дочерний элемент
$("ul li:nth-child(2n+1)")	выборка элементов по несложному уравнению подробнее можно прочитать в статье «Как работает nth-child»

Псевдокласс отрицания

Псевдокласс отрицания :not() единственный в своём роде, он позволяет выбрать все элементы, что не подпадают под вложенную выборку в скобках

$("a:not(.active)")	все ссылки <a> без класса active
$("a").not(".active")	аналогичный результат, используя метод .not()

Если хотите поиграться с селекторами от души, то откройте страничку css.selectors.html в новой вкладке, и там вы сможете потренироваться в написании селекторов используя меню справа

Результаты «выборов»

Когда с помощью перечисленных запросов вы нашли (или не нашли) DOM-элементы, вам вернётся jQuery-объект, который будет содержать массив этих элементов. Вот так это будет выглядеть для запроса

:

jQuery length

Возможно, вы заметили свойство length. Да-да, именно так, это количество найденных элементов. Так что мы можем легко получить оное число с помощью следующего кода:

alert( $("p").length )

Если перед вами стоит задача достать найденный DOM-элемент, то вы сможете это сделать, зная его индекс. По сути, это выглядит как обращение к элементу массива:

// мы ищем все параграфы
// берём первый из них
// берём текст параграфа
// возвращаем длину текста
alert( $("p")[0].innerText.length )

Если вам не нравится данный способ из эстетических соображений, то вы можете воспользоваться методом .get():

alert( $("p").get(0).innerText.length )