Pro jQuery
Адам Фриман
Атрибуты
Вы можете сообщить браузеру дополнительную информацию, если добавите в ваш элемент атрибуты. Листинг 2-2 показывает элемент из примера, в котором есть атрибут.
Листинг 2-2: Определение атрибута
<label for="astor">Astor:</label>
Это метка элемента, определённая в атрибуте for
. Я выделил атрибут, чтобы он был виден сразу. Атрибуты всегда являются частью открывающего тега. Этот атрибут обладает и именем, и значением. Его имя for
, а значение astor
. Не для всех атрибутов нужно вводить значение, просто определение атрибута посылает сигнал браузеру, что вы ожидаете от данного элемента определенного поведения. Листинг 2-3 показывает пример с таким атрибутом.
Листинг 2-3: Определение атрибута, не требующего значения
<input name="snowdrop" value="0" required>
В этом элементе три атрибута. В первых двух name
и value
присутствуют, как в предыдущем примере. (Это выглядит немного запутанным. Имена этих атрибутов –name
и value
. Значение атрибута name – snowdrop
, а значение атрибута value
– 0
.) Последний атрибут – это просто слово required
. Это пример атрибута, которому не нужно значение, хотя вы его можете определить, если дадите атрибуту значение, как его имя (required="required"
), или просто используете пустую строку (required=""
).
Атрибуты id и class
Есть два атрибута, которым уделяется особое внимание в данной книге. Одна из наиболее распространенных задач, которые вы будете решать с помощью jQuery, – это нахождение одного или более элементов в документе, с которыми вы будете совершать определенные операции. Атрибуты id
и class
очень помогают на стадии поиска нужных элементов.
Использование атрибута id
Атрибут id
используется для того, чтобы элементу в документе придать уникальный идентификатор. У двух элементов абсолютно не может быть одного и того же значения атрибута id
. В листинге 2-4 показан очень простой документ, в котором использован атрибут id
.
Листинг 2-4: Использование атрибута id
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1 id="mainheader">Welcome to Jacqui's Flower Shop</h1>
<h2 id="openinghours">We are open 10am-6pm, 7 days a week</h2>
<h3 id="holidays">(closed on national holidays)</h3>
</body>
</html>
Я определил атрибут id
для трех элементов в документе. Для элемента h1
атрибут id
имеет значение mainheader
, для элемента h2
значение id
– openinghours
, для элемента h3
значение id
– holidays
. Использование атрибута id
позволяет найти в документе определенный элемент.
Использование атрибута class
Атрибут class
используется для того, чтобы в произвольном порядке связать определенные элементы. Многие элементы могут принадлежать к одному и тому же классу, также элементы могу принадлежать к одному или нескольким классам, как показано в листинге 2-5.
Листинг 2-5: Использование атрибута class
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1 id="mainheader" class="header">Welcome to Jacqui"s Flower Shop</h1>
<h2 class="header info">We are open 10am-6pm, 7 days a week</h2>
<h3 class="info">(closed on national holidays)</h3>
</body>
</html>
В этом примере элемент h1
принадлежит к классу header
, элемент h2
принадлежит к классам header
и info
, элемент h3
принадлежит только к классу info
. Как вы заметили, вы можете добавить элемент ко множеству классов, для этого нужно разделить имена классов пробелами.