Pro jQuery
Адам Фриман
Работа с атрибутами и свойствами
Можно получить и установить значения атрибутов для элементов в объекте 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
.