Использование атрибутов

В предыдущей главе мы увидели, как можно находить элементы на странице по их классу или ID. Эти два свойства связаны, поскольку вы можете использовать их при стилизации элементов на основе CSS, но через jQuery можно находить элементы на основе любых атрибутов. Это возможно благодаря куче типов селекторов атрибутов, и в этой статье мы рассмотрим некоторые из них.

Поиск элементов с определенным атрибутом

Самая простая задача на выбор элементов по атрибуту - это найти все элементы, у которых задан определенный атрибут. Обратите внимание, что в следующем примере мы не запрашиваем какое-то конкретное значение атрибута, фактически, он может его вообще не иметь. Синтаксис для такого селектора - это пара квадратных скобок, в которых записан нужный атрибут, например, [name] или [href]. Ниже приведен пример:

<span title="Title 1">Test 1</span><br />
<span>Test 2</span><br />
<span title="Title 3">Test 3</span><br />

<script type="text/javascript">
$(function()
{
	$("[title]").css("text-decoration", "underline");
});
</script>

Мы используем селектор атрибута чтобы найти на странице все элементы, у которых есть атрибут title, и затем подчеркиваем их. Как уже упоминалось ранее, такой запрос соответствует элементам, у которых есть title, независимо от того, какое у него значение. Но иногда вам может потребоваться найти элементы с определенным атрибутом и заданным значением этого атрибута.

Поиск элементов с заданным значением определенного атрибута

Ниже приведен пример, в котором мы ищем элементы с заданным значением:

<a href="http://www.google.com" target="_blank">Link 1</a><br />
<a href="http://www.google.com" target="_self">Link 2</a><br />
<a href="http://www.google.com" target="_blank">Link 3</a><br />

<script type="text/javascript">
$(function()
{
	$("a[target='_blank']").append(" [new window]");
});
</script>

Селектор просто говорит jQuery найти все ссылки (тег a), у которых есть атрибут target равный строковому значению "_blank", и затем добавить к ним текст "[new window]". Но что если вы ищете все элементы, у которых нет данного значения? Инвертировать селектор очень легко:

$("a[target!='_blank']").append(" [same window]");

Разница в использовании != вместо =. Это общепринятый способ отрицания оператора во многих языках программирования.

Есть и другие возможности.

Найти элементы со значением, начинающимся с заданной строки можно с помощью оператора ^=:

$("input[name^='txt']").css("color", "blue");

Найти элементы со значением, заканчивающимся на заданную строку - с помощью $=:

$("input[name$='letter']").css("color", "red");

Найти элементы, со значением, содержащим определенное слово:

$("input[name*='txt']").css("color", "blue");