Главная страница   /   2.3. Атрибуты (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

2.3. Атрибуты

Вы можете сообщить браузеру дополнительную информацию, если добавите в ваш элемент атрибутыЛистинг 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, а значение атрибута value0.) Последний атрибут – это просто слово 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 значение idopeninghours, для элемента h3 значение idholidays. Использование атрибута 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. Как вы заметили, вы можете добавить элемент ко множеству классов, для этого нужно разделить имена классов пробелами.