Селекторы

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

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

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

• * — коллекция всех тегов:

console.log( $('*').length ); // Количество тегов

• Тег — коллекция всех тегов, имеющих указанное имя:

$('p').css('backgroundColor', 'red');
// Делаем фон всех абзацев красным

• #Идентификатор — ссылка на элемент с указанным идентификатором. Если элементов с одинаковым идентификатором несколько, то будет возвращена ссылка только на первый элемент:

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

• Тег#Идентификатор — ссылка на элемент с указанным идентификатором, который расположен в определенном теге. Если идентификатор находится в другом теге, то он будет проигнорирован:

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

• .Класс — коллекция элементов, имеющих указанный стилевой класс:

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

• Тег.Класс — коллекция элементов, имеющих указанный стилевой класс в определенном теге:

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

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

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

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

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

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

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

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

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

Учебник по jQuery и AJAX в формате PDF