Привязка к параметрам тегов

Для привязки к параметрам тегов применяются следующие селекторы:

• [Параметр] — элементы с указанным параметром:

$('a[id]').css('color', 'red');

Цвет текста ссылки станет красным, если тег <a> имеет параметр id:

<a id="link1" href="link1.html">Ссылка 1</a>

• [Параметр="Значение"] — коллекция элементов, у которых параметр точно равен значению:

$('a[href="link1.html"]').css('color', 'red');

Цвет текста ссылки станет красным, если параметр href тега <a> имеет значение "link1.html";

• [Параметр!="Значение"] — коллекция элементов, у которых параметр не равен значению или параметр отсутствует:

$('a[href!="link1.html"]').css('color', 'red');

Цвет текста ссылки станет красным, если параметр href тега <a> не имеет значение "link1.html".

Для ускорения запросов лучше писать так:

$('a').not('[href="link1.html"]').css('color', 'red');

• [Параметр^="Значение"] — коллекция элементов, у которых параметр начинается с указанного значения:

$('a[href^="li"]').css('color', 'red');

Цвет текста ссылки станет красным, если значение параметра href тега <a> начинается с "li";

• [Параметр$="Значение"] — коллекция элементов, у которых параметр оканчивается указанным значением:

$('a[href$=".html"]').css('color', 'red');

Цвет текста ссылки станет красным, если значение параметра href тега <a> оканчивается на расширение ".html";

• [Параметр*="Значение"] — коллекция элементов, у которых параметр содержит указанный фрагмент значения:

$('a[href*="link"]').css('color', 'red');

Цвет текста ссылки станет красным, если значение параметра href тега <a> содержит фрагмент "link";

• [Параметр~="Слово"] — коллекция элементов, у которых параметр содержит указанное слово целиком (используется, когда значением параметра являются слова, разделенные пробелами):

$('a[class~="class2"]').css('color', 'red');

Цвет текста ссылки станет красным, если параметр class тега <a> содержит слово "class2":

<a class="class1 class2 class3" href="link1.html">Ссылка</a>

• [Параметр|="Значение"] — коллекция элементов, у которых параметр точно равен значению или начинается с указанного значения, после которого следует дефис:

$('a[class|="class1"]').css('color', 'red');

Цвет текста ссылки станет красным, если значение параметра class тега <a> равно "class1" или после "class1" идет дефис и любое другое значение:

<a class="class1" href="link1.html">Ссылка 1</a>
<a class="class1-new" href="link2.html">Ссылка 2</a>

В этом примере обе ссылки будут красного цвета.

Если необходимо сделать привязку сразу к нескольким параметрам, то используется следующий формат:

[Параметр="Значение"][Параметр="Значение"]

Пример:

$('a[href="link1.html"][id*="link"]').css('color', 'red');

Цвет текста ссылки станет красным, если значение параметра href тега <a> равно "link1.html", а параметр id содержит фрагмент "link".

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