Категории: Атрибуты jQuery > Атрибуты
.attr( имяАтрибута )
Возвращает: Строка
Описание: Получает значение атрибута для первого элемента в наборе соответствующих элементов.
Важно отметить, что метод .attr() получает значение атрибута только для первого элемента в соответствующем наборе. Для получения значения для каждого элемента индивидуально, мы должны опираться на цикл, такие методы jQuery как .each() или .map().
Начиная с jQuery 1.6, метод .attr() возвращает undefined для атрибутов, которые не указаны. В добавок, .attr() не следует использовать на обычные объекты, массивы, окно или документ. Чтобы получить и изменять свойства DOM, используйте метод .prop().
Использование jQuery метода .attr() для получения значений атибутов имеет две основные выгоды:
- Удобство: Он может быть вызван напрямую на объект jQuery и прицеплен к другим методам jQuery.
- Меж-браузерная совместимость: Некоторые атрибуты имеют несовместимые имена от браузера к браузеру. Кроме того, значения некоторых атрибутов, передаются непоследовательно во всех браузерах, и даже в версиях одного браузера. Метод
.attr()сокращает такие непоследовательности.
Если мы пытаемся получить значение атрибута, которое не определенно, метод .attr() возвращает undefined.
Примеры
Ищет заголовок первого элемента <em> на странице.Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ var title = $("em").attr("title"); $("div").text(title); }); </script> <style> em { color:blue; font-weight:bold; } div { color:red; } </style> </head> <body> <p> Once there was a <em title="huge, gigantic">large</em> dinosaur... </p> The title of the emphasis is:<div></div> </body> </html>
.attr( имяАтрибута , значение )
Возвращает: jQuery
Описание: Устанавливает один или несколько атрибутов для набора соответствующих элементов.
.attr( имяАтрибута, значение )
Добавлена в версию: 1.0
имяАтрибута
Имя атрибута для установки.
значение
Значение для установки для атрибута.
.attr( карта )
Добавлена в версию: 1.0
карта
Карта пары атрибут-значение для установки.
.attr( имяАтрибута, function(индекс, атрибут) )
Добавлена в версию: 1.1
имяАтрибута
Имя атрибута для установки.
function(индекс, атрибут)
Функция, возвращающая значение для установки.
this является текущим элементом. Получает индекс положения элемента в наборе и старое значение атрибута в качестве аргументов.Метод .attr() является удобным и эффективным способом установки значения атрибутов, особенно при установке нескольких атрибутов или с использованием значений, возвращаемых функцией. Рассмотрим следующее изображение:
<img id="greatphoto" src="brush-seller.jpg" alt="brush seller" />
Установка простого атрибута
Мы можем поменять атрибут alt с помощью простой передачи имени атрибута и его нового имени в метод .attr():
$('#greatphoto').attr('alt', 'Beijing Brush Seller');
Мы можем так же добавить атрибут:
$('#greatphoto')
.attr('title', 'Photo by Kelly Clark');
Уставновка нескольких атрибутов одновременно
Для изменения атрибута alt и добавления атрибута title одновременно, мы можем передать имена и значения в метод за один раз используя карту (буквеный объект JavaScript). Каждая пара ключ-значение в карте добавляет или модифицирует атрибут:
$('#greatphoto').attr({
alt: 'Beijing Brush Seller',
title: 'photo by Kelly Clark'
});
Когда устанавливаются множественные атрибуты, кавычки вокруг имени атрибута опциональны.
ВНИМАНИЕ Когда устанавливается атрибут 'class', вы должны всегда использовать кавычки!
Вычисляемые значения атрибута
При использовании функции установки атрибутов, мы можем вычислить значение, основанное на других свойствах элемента. Например, мы можем соединить новое значение с имеющимся значением:
$('#greatphoto').attr('title', function() {
return this.alt + ' - photo by Kelly Clark'
});
Это использование функции для вычисления значений атрибутов может быть особенно полезно, когда мы изменим атрибуты нескольких элементов одновременно.
Примеры
Пример 1
Назначает несколько атрибутов для всех <img>s на странице. $("img").attr({
src: "/images/hat.gif",
title: "jQuery",
alt: "jQuery Logo"
});
$("div").text($("img").attr("alt"));
Пример 1 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("img").attr({ src: "/images/hat.gif", title: "jQuery", alt: "jQuery Logo" }); $("div").text($("img").attr("alt")); }); </script> <style> img { padding:10px; } div { color:red; font-size:24px; } </style> </head> <body> <img /> <img /> <img /> <div><B>Attribute of Ajax</B></div> </body> </html>
Пример 2
Делает недоступными кнопки, которые больше первойПример 2 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("button:gt(1)").attr("disabled","disabled"); }); </script> <style> button { margin:10px; } </style> </head> <body> <button>0th Button</button> <button>1st Button</button> <button>2nd Button</button> </body> </html>
Пример 3
Указывает атрибут ID в зависимости от положения блока div на странице.Пример 3 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("div").attr("id", function (arr) { return "div-id" + arr; }) .each(function () { $("span", this).html("(ID = '<b>" + this.id + "</b>')"); }); }); </script> <style> div { color:blue; } span { color:red; } b { font-weight:bolder; } </style> </head> <body> <div>Zero-th <span></span></div> <div>First <span></span></div> <div>Second <span></span></div> </body> </html>
Пример 4
Указывает атрибут изображения src, значение которого берется из атрибута title.
$("img").attr("src", function() {
return "/images/" + this.title;
});
Пример 4 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("img").attr("src", function() { return "/images/" + this.title; }); }); </script> </head> <body> <img title="hat.gif"/> <img title="hat-old.gif"/> <img title="hat2-old.gif"/> </body> </html>
Была ли эта информация полезной?
