Главная страница   /   8.1. Работа с атрибутами и свойствами (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

8.1. Работа с атрибутами и свойствами

Можно получить и установить значения атрибутов для элементов в объекте jQuery. В таблице 8-2 представлены методы для работы с атрибутами.

Таблица 8-2: Методы для работы с атрибутами
Метод Описание
attr(name) Получает значение атрибута с указанным именем для первого элемента в объекте jQuery
attr(name, value) Устанавливает указанное значение атрибута с указанным именем для всех элементов в объекте jQuery
attr(map) Устанавливает атрибуты, указанные в карте (объекте), для всех элементов в объекте jQuery
attr(name, function) Устанавливает указанный атрибут для всех элементов в объекте jQuery с использованием функции
removeAttr(name)
removeAttr(name[])
Удаляет атрибуты из всех элементов в объекте jQuery
prop(name) Возвращает значение указанного свойства для первого элемента в объекте jQuery
prop(name, value)
prop(map)
Устанавливает значение одного или более свойств для всех элементов в объекте jQuery
prop(name, function) Устанавливает значение указанного свойства для всех элементом в объекте jQuery с использованием функции
removeProp(name) Удаляет указанное свойство из всех элементов в объекте jQuery

Когда метод attr вызывается с одним аргументом, jQuery возвращает значение указанного атрибута для первого элемента в выборке. В листинге 8-1 содержится пример.

Листинг 8-1: Чтение значения атрибута
<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
	<script src="jquery-1.7.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="styles.css" />
	<script type="text/javascript">
		$(document).ready(function () {
			var srcValue = $('img').attr('src');
			console.log("Attribute value: " + srcValue);
		});
	</script>
</head>
<body>
	<h1>Jacqui's Flower Shop</h1>
	<form method="post">
		<div id="oblock">
			<div class="dtable">
				<div id="row1" class="drow">
					<div class="dcell">
						<img src="astor.png" /><label for="astor">Astor:</label>
						<input name="astor" value="0" required />
					</div>
					<div class="dcell">
						<img src="daffodil.png" /><label for="daffodil">Daffodil:</label>
						<input name="daffodil" value="0" required />
					</div>
					<div class="dcell">
						<img src="rose.png" /><label for="rose">Rose:</label>
						<input name="rose" value="0" required />
					</div>
				</div>
				<div id="row2" class="drow">
					<div class="dcell">
						<img src="peony.png" /><label for="peony">Peony:</label>
						<input name="peony" value="0" required />
					</div>
					<div class="dcell">
						<img src="primula.png" /><label for="primula">Primula:</label>
						<input name="primula" value="0" required />
					</div>
					<div class="dcell">
						<img src="snowdrop.png" /><label for="snowdrop">Snowdrop:</label>
						<input name="snowdrop" value="0" required />
					</div>
				</div>
			</div>
		</div>
		<div id="buttonDiv">
			<button type="submit">Place Order</button></div>
	</form>
</body>
</html>

В этом скрипте я выбрал все элементы img в документе, а затем использовал метод attr, чтобы получить значение атрибута src. Результатом метода attr при получении значения атрибута является строка, которую я вывел на консоль. Вот результат выполнения этого скрипта:

Attribute value: astor.png

Можно объединить методы each и attr, чтобы получить значение атрибута для всех элементов в объекте jQuery. Я описывал метод each в главе 5, а в листинге 8-2 показано, как можно использовать его в данной ситуации.

Листинг 8-2: Использование методов each и attr для получения значения атрибута нескольких элементов
<script type="text/javascript">
	$(document).ready(function () {
		$('img').each(function (index, elem) {
			var srcValue = $(elem).attr('src');
			console.log("Attribute value: " + srcValue);
		});
	});
</script>

В этом скрипте я передал объект HTMLElement в качестве аргумента функции, чтобы создать новый объект jQuery через $ функцию. Этот объект содержит только один элемент, который идеально подходит для метода attr. Результат работы скрипта следующий:

Attribute value: astor.png
Attribute value: daffodil.png
Attribute value: rose.png
Attribute value: peony.png
Attribute value: primula.png
Attribute value: snowdrop.png

Установление значения атрибута

Когда метод attr используется для установления значения атрибута, изменение применяется ко всем элементам в объекте jQuery. Это противоположно версии для чтения значения атрибута этого метода, который возвращает значение атрибута только одного элемента. При назначении атрибута метод attr возвращает jQuery объект, что означает, что можно использовать цепочку методов. В листинге 8-3 показано, как назначать атрибут.

Листинг 8-3: Назначение атрибута
<script type="text/javascript">
	$(document).ready(function () {
		$('img').attr("src", "lily.png");
	});
</script>

В этом скрипте я выбрал все элементы img и установил значение lily.png для src атрибута. Это значение применяется к атрибуту src для всех выбранных элементов. Результат можно увидеть на рисунке 8-1.

Рисунок 8-1: Установление одинакового значения атрибута для нескольких элементов

Назначение нескольких атрибутов

Можно назначить несколько атрибутов за один вызов метода, если в метод attr добавить объект. Свойства этого объекта интерпретируются как имена атрибутов, а значения свойств – как значения атрибутов. Такие объекты называются картами. В листинге 8-4 представлен пример.

Листинг 8-4: Назначение нескольких атрибутов используя map объект
<script type="text/javascript">
	$(document).ready(function () {
		var attrValues = {
			src: 'lily.png',
			style: 'border: thick solid red'
		};

		$('img').attr(attrValues);
	});
</script>

В этом скрипте я создал объект-карту со свойствами src и style. В документе я выбрал элементы img и добавил объект-карту методу attr. Результат можно увидеть на рисунке 8-2.

Совет

Хотя в этом примере я в прямой форме назначил свойство style, в jQuery есть несколько методов, которые упрощают работу с CSS. Для информации смотрите раздел "Работа с CSS" далее в этой главе.

Рисунок 8-2: Назначение нескольких атрибутов при помощи метода attr

Динамическая установка значений атрибутов

Значения, которые вы установили атрибуту, можно изменить, если добавить методу attr функцию. В листинге 8-5 показан пример.

Листинг 8-5: Установка значения атрибута при помощи функции
<script type="text/javascript">
	$(document).ready(function () {
		$('img').attr("src", function (index, oldVal) {
			if (oldVal.indexOf("rose") > -1) {
				return "lily.png";
			} else if ($(this).closest('#row2').length > 0) {
				return "carnation.png";
			}
		});
	});
</script>

Аргументы, переданные функции, – это индекс обрабатываемого элемента и старое значение атрибута. Переменная this указывает на обрабатываемый HTMLElement. Если вы хотите изменить атрибут, тогда ваша функция должна возвращать строку, содержащую новое значение. Если результат не возвращается, тогда используется существующее значение. В этом примере я использую функцию для выборочного изменения рисунков, представленных элементами img. Результат можно увидеть на рисунке 8-3.

Рисунок 8-3: Изменение значений атрибутов при помощи функции

Удаление атрибута

Можно удалить атрибуты, используя метод removeAttr, как показано в листинге 8-6.

Листинг 8-6: Удаление значений атрибутов
<script type="text/javascript">
	$(document).ready(function () {
		$('img').attr("style", "border: thick solid red");
		$('img:odd').removeAttr("style");
	});
</script>

В этом примере я использую метод attr, чтобы установить атрибут style, а затем использую метод removeAttr, чтобы удалить этот же атрибут у нечетных элементов. Результат можно увидеть на рисунке 8-4.

Рисунок 8-4: Удаление атрибутов из элементов

Работа со свойствами

Для каждого вида метода attr существует соответствующий метод prop. Разница состоит в том, что метод prop работает со свойствами, определяемыми HTMLElement объектом, а не со значениями атрибутов. Часто атрибуты и свойства одни и те же, но не всегда. Простой пример – это атрибут class, который представлен в объекте HTMLElement при помощи свойства className. В листинге 8-7 показано использование метода prop для прочтения этого свойства.

Листинг 8-7: Использование метода prop для чтения значения свойства
<script type="text/javascript">
	$(document).ready(function () {
		$('*[class]').each(function (index, elem) {
			console.log("Element:" + elem.tagName + " " + $(elem).prop("className"));
		});
	});
</script>

В этом примере я выбираю все элементы, которые имеют атрибут class, и использую метод each, чтобы перечислить их. Для каждого элемента я вывел на консоль type и значение свойства className.