Селекторы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

alert( $("p").length )

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

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

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

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

PreviousБудь готов!NextСелекторы и Sizzle

Last updated 7 months ago

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