Селекторы

Как вы уже знаете, в качестве параметра функции $() могут быть указаны селекторы, которые являются частью стандарта CSS. Рассмотрим различные селекторы подробно.

Часто используемые селекторы

Перечислим наиболее часто используемые селекторы.

var n = $("*").size(); // Количество тегов
$("p").css("backgroundColor", "red");
// Делаем фон всех абзацев красным
$("#id1").css("backgroundColor", "red");
// Делаем фон красным для элемента с id="id1"

(Если элементов с одинаковым идентификатором несколько, то будет возвращена ссылка только на первый элемент)

$("p#id1").css("backgroundColor", "red");
// Делаем фон красным для абзаца с id="id1"

(Если абзацев с одинаковым идентификатором несколько, то будет возвращена ссылка только на первый абзац. Если идентификатор находится в другом теге, то он будет проигнорирован)

$(".cls2").css("backgroundColor", "red");
// Делаем фон красным для всех элементов с class="cls2"
$("p.cls2").css("backgroundColor", "red");
// Делаем фон красным для всех абзацев с class="cls2"

Примечание

Для ускорения выборки не следует указывать название тега перед идентификатором. Например, пишите "#id1" вместо "p#id1". Если поиск производится по стилевому классу, то, наоборот, следует указать название тега. Например, пишите "p.cls1" вместо ".cls1".

Если название идентификатора (или класса) содержит специальные символы (например, точку или квадратные скобки), то их необходимо экранировать двумя слешами (\\).

$("#div1\\.index\\[5\\]").html("Текст");

В этом примере мы получаем ссылку на следующий элемент.

<div id="div1.index[5]"></div>

Группирование селекторов

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

$("#id1, div").addClass("newClass");

В этом примере для элемента с идентификатором id1, а также для всех тегов <div> назначается стилевой класс newClass.

Предыдущая статья Все статьи Следующая статья