Для чего необходим и как записывается JQuery-селектор?

Современный веб-дизайнер должен не только владеть основами HTML, CSS и JavaScript, но и уметь работать в библиотеке JQuery, которая фокусируется на взаимодействии JavaScript с HTML-документами. Именно она позволяет быстро получить доступ к любым элементам DOM (программный интерфейс, открывающий доступ к содержимому html-файлов) и манипулировать ими. Основными структурными единицами этой библиотеки являются команды. Для того чтобы применить ту или иную команду, нужен JQuery-селектор.

Формула селекторов в библиотеке JQuery

Селекторы в JQuery основаны на используемых в CSS. Они необходимы для выбора элементов HTML-файла, чтобы с их помощью вызвать те или иные методы манипуляции ими (команды). Поиск по селектору осуществляется посредством функции $(). Например, $('div').

Селекторы можно классифицировать в зависимости от способа выбора элементов:

• основные;
• по атрибуту;
• по иерархии;
• по содержанию;
• по положению;
• выбор полей формы;
• другие.

Основные селекторы

В 90 % случаев при работе с данной библиотекой используется JQuery-селектор, относящийся к основной группе. Все они достаточно просты и понятны. Рассмотрим каждый из них:

• * - выбирает все элементы страницы, включая head, body и др.;
• p/div/sidebar/... - выбирает все элементы, относящиеся к заданному тегу (т. е. к p.div, sidebar и др.);
• .myClass/ p.myClass - выбирает элементы с указанным именем класса;
• #myID/ p.#myID - выбирает какой-то один элемент с заданным ID.

Приведем пример. Допустим, нам необходимо выбрать все элементы страницы с классом par, запись будет выглядеть следующим образом: $(.par). Если же нужны только элементы p этого класса, то пропишем: $(p.par).

Селекторы атрибутов

Основной JQuery-селектор можно использовать, если нам необходимо выбрать элемент, относящийся к какому-то классу, имеющий ID или же выбрать все элементы страницы. Однако бывают случаи, когда нужный элемент не имеет класса или ID. Именно для этого и существуют селекторы по атрибуту. Они позволяют делать выборку по какому-то атрибуту HTML-элемента, например, по href или src. Записывается этот атрибут в квадратных скобках [].

Самый простой пример: $([src]) - выбор всех элементов, имеющих атрибут src. Можно сузить область выборки, задав атрибуту определенное значение: $([src='value']).

Вы можете использовать в JQuery несколько селекторов, если необходимо сузить область выбора. Например, $(p[color=blue][size=12]) - будут выбраны только те элементы p, которые имеют голубой цвет и размер 12.

Селекторы по содержанию

В том случае, если нет возможности выбрать элементы по атрибутам или по основным селекторам, то стоит обратиться к их содержанию. Всего имеется 4 селектора данного вида:

• :contains - выбирает элементы, содержащие заданный текст;
• :has - выбирает элементы, которые содержат другие элементы, характерные для данной строки;
• :parent - выбирает элементы, которые содержат любые другие;
• :empty - выбирает элементы, не содержащие никаких других.

Приведем пример. Для того, чтобы выбрать все элементы div, содержащие текст Hello, нужно записать $(div:contains('Hello')).

Селекторы по иерархии

Есть и еще один способ выбора элементов в JQuery, а именно - согласно их иерархии (то есть соотношения друг к другу на HTML-странице). Их очень много, поэтому приведем два наиболее популярных: "ребенок" и "потомок".

В первом случае выбираются элементы, которые являются прямыми потомками (ребенок) заданного элемента (предок). Например, чтобы выбрать элементы списка в классе light, которые являются ребенком списка nav, то нужно записать: $(ul#nav > li.light).

Второй случай - более общий. Здесь могут быть выбраны и непрямые потомки какого-то элемента. Например, для выбора ссылок внутри списка nav пропишем: $(ul#nav a).

Таким образом, в JQuery элементы могут выбираться различными способами с использованием таких параметров, как класс, ID, атрибуты, содержание или иерархия элементов HTML-документа.