Оглавление

.attr()

attr() — позволяет получить или установить значение отдельных параметров тегов. Метод имеет несколько форматов.
attr(<Название параметра>)
attr(<Название параметра>, <3начение>)
attr(<Oбъeкт с параметрами>)
attr(<Название параметра>, <Функция обратного вызова>)
Первый формат метода позволяет получить значение указанного параметра для первого элемента коллекции. Если параметр не найден, то возвращается значение undefined. Получим значение параметра id первого тега <div>.

   alert($("div").attr("id")); // div1

 

   <div id="div1">Текст</div><br>

   <div id="div2">Текст</div>


Второй формат метода attr() позволяет задать значение указанного параметра для всех элементов коллекции. В качестве примера создадим текстовое поле, в котором по умолчанию будет подсказка пользователю. Если поле получит фокус ввода, то подсказка должна исчезнуть. Если в поле не было введено значение, то при потере фокуса подсказка должна опять появиться в поле.

$("#txt1").focus(function() {
   var elem = $(this);
   if (elem.attr("value") == "[Введите текст]") {
      elem.attr("value", "") ;
   }
});
$("#txt1").blur(function() {
   var elem = $(this);
   if (elem.attr("value") == "") {
      elem.attr("value", "[Введите текст]");
   }
});

 
 <input type="text" id="txt1" value="[Введите текст]">

 

Задать значение параметрам, которые в HTML указываются без значений, можно одним из двух способов.

$("#btn1").attr("disabled", true);

$("#btn1").attr("disabled", "disabled");

 

Третий формат метода attr()  позволяет задать сразу несколько параметров за один вызов метода. Для этого параметры и значения должны быть указаны следующим образом.
{
Параметр1: "3начение1",
Параметр2: "Значение2",

...
ПараметрN: "ЗначениеN"
}
Зададим URL-адрес и текст подсказки всем ссылкам.


$("a").attr(
{
href: "linkl.html",
title: "Нажми меня"
}
);

Четвертый формат метода attr() позволяет выборочно задать значение указанного параметра, в зависимости от каких-либо условий. В параметре <Функция обратного вызова> указывается ссылка на функцию следующего формата.

 

function <Название функции>([<Индекс>]) {
// ...

}
На каждой итерации в функцию передается ссылка (this) на текущий DOM-элемент. Чтобы задать значение параметру, необходимо внутри функции обратного вызова вернуть новое значение. Если в параметре указать переменную, то через нее будет доступен индекс текущего элемента в коллекции.

 

В качестве примера установим идентификатор для DIV в зависимости от положения на странице.


$("div").attr("id", function (arr) {
return "div-id" + arr;
})
.each(function () {
$("span", this).html("(ID = '<b>" + this.id + "</b>')");
});


<div>Нулевой <span></span></div>
<div>Первый <span></span></div>
<div>Второй <span></span></div>

 Результат будет таковым:

Нулевой (ID = 'div-id0')
Первый (ID = 'div-id1')
Второй (ID = 'div-id2')

 

Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити