Attr jquery что это

This use of a function to compute attribute values can be particularly useful when modifying the attributes of multiple elements at once.

Note: If nothing is returned in the setter function (ie. function(index, attr)<> ), or if undefined is returned, the current value is not changed. This is useful for selectively setting values only when certain criteria are met.

• Ajax
  • Глобальные Ajax события
  • Вспомогательные методы
  • Низкоуровневый интерфейс
  • Сокращенные методы
  • Базовые
  • Пользовательские
  • Затухание
  • Скольжение
  • События браузера
  • Загрузка документа
  • Прикрепление обработчиков
  • Объект событие
  • События формы
  • События клавиатуры
  • События мыши
  • Class атрибут
  • Копирование
  • DOM Вставка вокруг
  • DOM Вставка внутрь
  • DOM Вставка вне
  • DOM Удаление
  • DOM Замена
  • Общие аттрибуты
  • Свойства стилей
  • Манипуляция коллекциями
  • Хранилище данных
  • DOM методы элементов
  • Методы установки
  • Экземпляр объекта jQuery
  • Глобальный объект jQuery
  • Атрибут
  • Базовые
  • Базовые фильтры
  • Фильтры потомков
  • Фильтры содержимого
  • Форма
  • Иерархия
  • jQuery расширение
  • Фильтр видимости
  • Фильтрация
  • Обход
  • Обход элементов
  • Версия 1.3
  • Версия 1.7
  • Версия 1.8
  • Версия 1.9
  • Версия 1.10
  • Версия 3.0

  Русская документация по jQuery.
  При использовании любых материалов с сайта ссылка на сайт обязательна.

  jQuery метод .attr()

  jQuery метод .attr() получает значение атрибута для первого элемента в наборе совпавших элементов, или устанавливает один или несколько атрибутов для набора выбранных элементов.

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

  Как правило, значения атрибутов являются строками, за исключением нескольких атрибутов, например, таких как value и tabindex.

  Для получения и изменения таких свойств DOM, как checked , selected , или disabled , используйте метод .prop(). С версии jQuery 1.6 метод .attr() возвращает undefined для таких атрибутов, которые не были установлены (в более ранних версиях в большинстве случаев возвращалась пустая строка).

  jQuery синтаксис:

  /* Возвращение значения: */ Синтаксис 1.0: $(selector).attr( attributeName ) attributeName - String /* Установка значений: */ Синтаксис 1.0: $(selector).attr( attributeName, value ) /* установка значения одного атрибута */ $(selector).attr( attributeName: value, /* установка значений нескольких атрибутов */ attributeName: value >) value - String, или Integer, или null. Синтаксис 1.1: $(selector).attr( attributeName, function( index, currentValue ) ) /* установка значения атрибута с использованием функции */ attributeName - String currentValue - String index - Integer.

  Добавлен в версии jQuery

  1.0 (синтаксис обновлен в 1.1)

  Значения параметров

  Параметр	Описание
  attributeName	Параметр определяет имя атрибута.
  value	Задает значение атрибута. Если в качестве значения используется null , то метод будет действовать как и .removeAttr().
  function (index, currentValue)	Функция возвращает значение атрибута, которое будет установлено. Внутри функции this ссылается на текущий элемент в наборе. index - получает индекс элемента в наборе. currentValue - получает текущее значение атрибута выбранных элементов.

  Пример использования

     Использование jQuery метода .attr() (получение значения)  $( document ).ready(function() $( "button" ).click(function() // задаем функцию при нажатиии на элемент $( "p" ).attr( "title" ); // получаем значение атрибута для первого элемента в наборе совпавших элементов >); >);  Клик title = "Подсказка 1">Первый абзац title = "Подсказка 2">Второй абзац title = "Подсказка 3">Третий абзац  

  В этом примере с использованием jQuery метода .attr() мы при нажатии на кнопку получаем значение глобального атрибута title для первого элемента в наборе совпавших элементов.

  Результат нашего примера:

  

  Рассмотрим следующий пример в котором с использованием метода .attr() установим один и несколько атрибутов для выбранных элементов:

     Использование jQuery метода .attr() (установка значения)  $( document ).ready(function() $( "button" ).click(function() // задаем функцию при нажатиии на элемент $( "p" ).attr( "title" ); // получаем значение атрибута для первого элемента в наборе совпавших элементов $( "p:first" ).attr( "title", "Подсказка 1" ); // устанавливаем значение атрибута title для первого элемента console.log( $( "p:first" ).attr( "title" ) ); // выводим в консоль значение атрибута title $( "p:last" ).attr( "title": "Подсказка 3", // устанавливаем значение атрибутов title и class для последнего элемента "class": "last">); console.log( $( "p:last" ).attr( "title" ) ); // выводим в консоль значение атрибута title console.log( $( "p:last" ).attr( "class" ) ); // выводим в консоль значение атрибута class >); >);  Клик Первый абзац Второй абзац Третий абзац  

  В этом примере с использованием jQuery метода .attr() мы при нажатии на кнопку:

  • Устанавливаем значение глобального атрибута title для первого элемента в документе (селектор :first) и после этого выводим в консоль его значение.
  • Устанавливаем значение глобальных атрибутов title и class для последнего элемента в документе (селектор :last) и после этого выводим в консоль значение этих атрибутов. Обратите внимение, что если вы устанавливаете значение глобального атрибута class с использованием метода .attr(), то наименование атрибута обязательно должно находиться в кавычках, на остальные атрибуты это требование не распостраняется.

  Результат нашего примера:

  

  Рассмотрим следующий пример в котором с использованием метода .attr() и функции установим атрибут для выбранных элементов:

     Использование jQuery метода .attr() (установка значения функцией)  $( document ).ready(function() $( "button" ).click(function() // задаем функцию при нажатиии на элемент $("p").attr("title", function( index, currentValue ) // функция возвращает для элемента новое значение атрибута title return currentValue + " " + ( index + 1 ); // старое значение атрибута + пробел + индекс элемента плюс один >); >); >);  Клик title = "Подсказка">Первый абзац title = "Подсказка">Второй абзац title = "Подсказка">Третий абзац  

  В этом примере с использованием jQuery метода .attr() и функции, переданной в качестве параметра метода, при нажатии на кнопку мы возвращаем и устанавливаем для каждого элемента в наборе новое значение глобального атрибута title. При этом новое значение атрибута состоит: старое значения ("Подсказка"), пробел и индекс элемента, увеличенный на один.

  Результат нашего примера:

  

  jQuery DOM методы

  © 2016-2024 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу basicweb.ru@gmail.com

  Кажется, вы используете блокировщик рекламы 🙁

  Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

  Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.

  Работа с атрибутами в jQuery

  HTML-атрибуты – это дополнительные значения для установления различных характеристик HTML-элементам в HTML-коде. С помощью них можно определённым образом настроить элемент и отрегулировать его поведение. Все атрибуты указываются внутри открытого тега и отделяются друг от друга посредством пробела.

  

  Кроме атрибутов у нас имеются ещё DOM-свойства , которые в большинстве случаев являются их отражением.

  Образуются DOM-свойства во время чтения браузером HTML-кода, т.е. при строительстве DOM. DOM – это объектная модель документа. При её создании теги становятся элементами (узлами), а HTML-атрибуты переводятся в соответствующие DOM-свойства этих элементов.

  Для сведений, атрибут, который мы устанавливаем в HTML-коде называется атрибутом содержимого . А DOM-свойство – IDL-атрибутом .

  Более подробно прочитать про атрибуты, DOM-свойства и их отличия можно в этой статье.

  В заключение можно отметить, что при написании кода на JavaScript зачастую лучше использовать именно DOM-свойства, а не соответствующие им атрибуты. Кстати, в jQuery для выполнения операций с DOM-свойствами имеется специальный метод prop() . Описывается он в этой статье.

  А сейчас познакомимся с методами jQuery для работы с атрибутами.

  Методы attr() и removeAttr()

  В jQuery для выполнения действий над атрибутами имеется два метода:

  • attr() – используется, когда нужно, узнать значение требуемого атрибута, добавить к элементу новый атрибут или изменить текущее значение некоторого атрибута на новое;
  • removeAttr() – применяется для удаления определённого атрибута у элемента или набора элементов.

  Получение значения атрибута

  Узнать значение определённого атрибута в jQuery осуществляется через attr() :

  // attributeName – атрибут, значение которого нужно получить .attr('attributeName')

  Например, получим значение атрибута href элемента #search :

  Яндекс  

  При применении attr() к набору элементов, этот метод вернёт значение указанного атрибута только для первого элемента.

  .
   
  .
   
  .
    

  Для того, чтобы вернуть значение указанного атрибута для каждого элемента набора, можно воспользоваться each() или map() .

  JavaScript

  $('.section').each(function() { console.log( $(this).attr('id') ); }); // Результат: // section-1 // section-2 // section-3

  Если атрибута, значение которого мы хотим получить у элемента нет, то attr() вернёт undefined :

  .
    

  Этот сценарий можно использовать для проверки наличия определённого атрибута у элемента.

  Например, проверим имеется ли у элемента #logo" атрибут title :

  Изменение значения атрибута

  Изменение значения атрибута осуществляется также посредством attr() .

  Вариант синтаксиса attr() для установки значения одному атрибуту:

  JavaScript

  // attributeName – имя атрибута // value – новое значение (строка, число или null) .attr('attributeName', value)

  Кстати, если установить атрибуту null , то он будет удалён.

  Например, поменяем значение атрибута src элемента #logo :

  Установка сразу нескольких атрибутов элементу осуществляется в формате объекта:

  JavaScript

  // attributes – объект, содержащий набор пар «атрибут: значение» .attr(attributes)

  Пример установки элементу #logo несколько атрибутов:

  Кроме этого в jQuery имеется также вариант установки атрибута с помощью функции:

  JavaScript

  // attr - имя атрибута .attr('attr', function(index, value) { // . })

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

  Обратиться к текущему элементу в функции можно с помощью ключевого слова this .

  • index - индекс элемента в наборе;
  • valueAttr - текущее значение атрибута;
  • One
  • Two
  • Three
  • Four
  • Five

  Добавление нового атрибута

  В jQuery, установка нового атрибута или изменение существующего - это одна и также операция.

  Пример, в котором всем ссылкам на странице установим атрибут rel со значением nofollow :

  JavaScript

  $('a').attr('rel', 'nofollow');

  Как в jQuery удалить атрибут у элемента

  В jQuery удаление атрибута обычно осуществляется с помощью метода removeAttr() :

  JavaScript

  // attributeName - атрибут, который нужно удалить .removeAttr('attributeName')

  Например, удалим атрибут rel у всех ссылок на странице:

  JavaScript

  $('a[rel]').removeAttr('rel');

  В jQuery удалить атрибут можно также с помощью attr() . Для этого ему нужно в качестве значения установить null .

  $('a[rel]').attr('rel', null);

  Ещё темы этого раздела:

  • Добавление и удаление DOM-свойств (disabled, checked, selected и др.)
  • Добавление и удаление классов
  • Получение и установка CSS-свойств элементам
  • data-атрибуты и внутреннее хранилище jQuery

  jQuery. Метод attr(). Как получить или добавить атрибут к элементу

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

  Чтобы получить значение нужного элемента используется синтаксис с одним параметром, где в скобках указывается имя атрибута:

  .attr( attributeName )

  Если же нужно изменить значение атрибута, то используется вариант с двумя параметрами в скобках, где первый — это имя атрибута, а второй — его значение:

  .attr( attributeName, value )

  Использование метода attr() имеет два основных преимущества:

  • 1. он может быть использован напрямую к выбранному jQuery-объекту, а также применим в цепочке вызовов для определенного селектора/объекта
  • 2. кроссбраузерная совместимость, что избавляет нас от излишней рутины в работе с разными атрибутами в различных браузерах

  Параметр value — это чаще всего строка, но для атрибутов типа value могут быть и числовые значения.

  Атрибуты и Properties (свойства)

  Существует разграничение между атрибутами и свойствами объектов, соответственно, для каждой из этих групп должен быть использован свой метод для получения/изменения данных. К примеру, к свойствам selectedIndex, nodeType, tagName, nodeName, ownerDocument, defaultChecked, и defaultSelected лучше всего получать доступ с помощью специального метода prop(). С атрибутами лучше всего работать, используя метод attr().

  Однако, не все так просто с булевыми атрибутами, например, «checked». Рассмотрим пример:

  Согласно спецификации W3C, свойство checked, когда оно присутствует, всегда возвращает true, даже если в его значении в кавычках будет пусто или содержится значение false. Метод attr() будет возвращать значение из кавычек, однако, при изменении чекбокса оно может не изменяться для некоторых браузеров. Соответственно, для булевых атрибутов лучше всего использовать метод prop(). Это замечание касается и «динамических» атрибутов — selected и value.

  1 2 3

  if ( elem.checked ) if ( $( elem ).prop( "checked" ) ) if ( $( elem ).is( ":checked" ) )

  Примеры использования attr()

  Допустим у нас есть элемент-картинка:

  Теперь мы хотим заменить данное изображение на другое, изменив атрибут src. Сделать это можно таким образом:

  $( "#test_photo" ).attr( "src", "other_img.jpg" );

  Одновременно меняем alt:

  $( "#test_photo" ).attr( "alt", "other_img" );

  Эти две операции можно сделать за одно действие, передав сразу массив атрибутов и их значений:

  1 2 3 4

  $( "#test_photo" ).attr(< alt: "other_img", src: "other_img.jpg" >);

  Если у нас несколько изображений и они имеют одно и то же содержимое атрибута alt с добавлением номера элемента, то мы можем пробежаться по ним в цикле и установить нужное содержимое:

  1 2 3

  $( "#test_photo" ).attr( "alt", function( i, val ) < return "other_img " + val; >);

  Пример извлечения значения атрибута

  var altStr = $( "#test_photo" ).attr( "alt");

  Другие посты

  • Обработка изменения значения элементов input, checkbox, radio, textarea с помощью метода change() в jQuery
  • Работа с объектом Callbacks в jQuery: использование списка callback-функций
  • Ловим потерю фокуса. Метод blur() в jQuery
  • Вставка контента перед содержимым выбранного объекта. Метод before() в jQuery
  • Метод .appendTo() в jQuery. Добавление содержимого в конец элементов
  Похожие публикации:

  1. Hms core на xiaomi зачем
  2. Stream deck что это
  3. Как сделать чек лист в figma
  4. Как сменить нож на газонокосилке хутер