attr

« Обратно к странице атрибутов

[редактировать]

attr( имя )

Получение доступа к свойству первого совпавшего элемента.
Используя этот метод можно легко получить значение свойства первого совпавшего элемента. Если элемент не имеет указанного атрибута, то возвращается undefined (не определено). Атрибутами могут быть: title, alt, src, href, width, style и т.д.
Аргументы:

имя Строка
Имя свойства.
Примеры:
Поиск атрибута title в первом блоке <em> на странице.
    var title = $("em").attr("title");
    $("div").text(title);
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<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>
Name Type

[редактировать]

attr( свойства )

Устанавливает атрибуты всех элементов набора используя при этом объект, который содержит пары ключ/значение.
Это лучший способ указать большое количество свойств для каждого совпавшего элемента. Обратите внимание, что Вы должны использовать ‘className’ в качестве ключа, если необходимо указать класс в качестве атрибута. Также можно использовать для этой цели .addClass( class ) или .removeClass( class ). Помните, что это рекурсивно вызывает attr( ключ, значение ) или attr( ключ, функция ), поэтому если одно из свойств, которые Вы передаете, является функцией, то функция выполнится и не сохранится в качестве атрибута.

Аргументы:
свойства Map
Пары ключ:значение для указания свойств объекта.
Примеры:
Установка некоторых атрибутов для всех <img> на странице.

    $("img").attr({
          src: "/images/hat.gif",
          title: "jQuery",
          alt: "jQuery Logo"

        });
    $("div").text($("img").attr("alt"));
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">

<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>
Name Type

[редактировать]

attr( ключ, значение )

Изменяет значение единственного свойства для каждого совпавшего элемента.
Аргументы:

ключ Строка
Имя свойства, значение которого нужно изменить.
значение Объект
Значение, которое необходимо установить.
Примеры:
Отключает все кнопки с индексом выше первого.
$("button:gt(1)").attr("disabled","disabled");
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<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>
Name Type

[редактировать]

attr( ключ, функция )

Изменяет значение единственного свойства для каждого совпавшего элемента.
Но вместо указания непосредственно значения, как описано выше, указывается функция, которая возвращает значение как свой результат.
Аргументы:
ключ Строка
Имя свойства, значение которого нужно изменить.
функция Функция
Функция, возвращающая значение, которое необходимо установить. Пространство: текущий элемент, аргумент: индекс текущего элемента.

function callback(indexArray) {
  // indexArray == position in the jQuery object
  this; // dom element
}
Примеры:
Указывает атрибут ID в зависимости от положения блока div на странице.
    $("div").attr("id", function (arr) {
          return "div-id" + arr;
        })
        .each(function () {
          $("span", this).html("(ID = '<b>" + this.id + "</b>')");
        });
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<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>
Указывает атрибут изображения src, значение которого берется из атрибута title.
    $("img").attr("src", function() {
          return "/images/" + this.title;
        });
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<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>
Name Type