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. Добавление содержимого в конец элементов
jQuery добавить атрибут
Здравствуйте, уважаемые читатель блога LifeExample, хочу пополнить рубрику «jQuery & JavaScript примеры», новой статьей о том как в jQuery добавить атрибут для элемента верстки.
Например, тег по стандартам может содержать такие атрибуты как:
Но ничего не мешает нам использовать собственные атрибуты, например, так:
В этом примере пользовательский атрибут resolution будет содержать настоящее разрешение картинки.
Зачем использовать пользовательские атрибуты
Вопрос о том, как с помощью jQuery добавить атрибут, чаще всего может возникнуть при построении динамических интерфейсов для веб проектов.
Программируя на JavaScript, нам часто приходится работать с атрибутами элементов, совершая те или иные действия в зависимости от их значений. В определенных случаях нам может быть не достаточно стандартного набора атрибутов и тогда с помощью библиотеки jQuery, добавить атрибут можно очень быстро и удобно, но об этом чуть позже.
Предлагаю поставить задачу, которая бы показывала необходимость добавления атрибута и работы с ним.
Задача jQuery добавить атрибут
Дано:
-
Три див блока с заданными id
1
2
3
4
5
6
7
8
9
10
11
Требуется:
- При нажатии на каждый из блоков вывести код цвета в формате RGB
Решение:
На самом деле решений много, но в рамках данной темы нам надо с помощью jQuery добавить атрибуты для наших блоков. Поэтому решением будет являться вот этот JS код:
$ ( function ( ) {
$ ( ‘div[id=header]’ ) . attr ( ‘rgbcolor’ , ‘255,0,0’ ) ;
$ ( ‘div[id=content]’ ) . attr ( ‘rgbcolor’ , ‘0,255,0’ ) ;
$ ( ‘div[id=footer]’ ) . attr ( ‘rgbcolor’ , ‘0,0,255’ ) ;
$ ( ‘div’ ) . click ( function ( ) {
alert ( $ ( this ) . attr ( ‘rgbcolor’ ) ) ;
} ) ;
} ) ;
Данными строчками кода мы добавим к имеющимся блокам новые атрибуты rgbcolor, которые будут содержать информацию о цвете. Можно каждому блоку добавить атрибут прям в HTML вот так:
1
2
3
4
5
6
7
8
9
10
11
В любой момент мы можем С помощью jQuery удалить атрибут, также быстро как и создали его.
jQuery удалить атрибут
Удаление происходит также просто, как и добавление. Опираясь на предыдущее задание, удалить пользовательские атрибуты rgbcolor можно всего одной строкой
$ ( div ) . removeAttr ( ‘rgbcolor’ ) ;
Ну, или если нужно удалить атрибут только для одного блока content, то так:
$ ( ‘div[id=content]’ ) . removeAttr ( ‘rgbcolor’ ) ;
Изменить значение атрибута
Библиотека jQuery, позволяет манипулировать атрибутами, так как нам хочется, я уже привел пример как с помощью jQuery добавить атрибут, и как его удалить. Но часто приходится еще и менять значения в ходе выполнения скрипта.
Чтобы поменять значение атрибута у элемента нам надо воспользоваться уже знакомой функцией attr .
Подобно тому, как мы задавали атрибут и его значение, также следует сделать если мы захотим его изменить
$(‘div[id=content]’).attr(‘rgbcolor’, ‘ Новое значение’ );
На этом пример работы атрибутами предлагаю завершить, поскольку все, что можно с ними сделать мы уже рассмотрели.
Теперь мы можем:
- С помощью jQuery добавить атрибут;
- С помощью jQuery удалить атрибут;
- С помощью jQuery изменить атрибут;
Читайте также похожие статьи:
Чтобы не пропустить публикацию следующей статьи подписывайтесь на рассылку по E-mail или RSS ленту блога.
Работа с атрибутами в 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 позволяет получать и устанавливать значения атрибутов элементов, содержащихся в объекте jQuery. Методы jQuery, предназначенные для работы с атрибутами, описаны в таблице ниже:
| Метод | Описание |
|---|---|
| attr(имя) | Возвращает значение атрибута с указанным именем для первого из элементов, содержащихся в объекте jQuery |
| attr(имя, значение) | Устанавливает значение атрибута с указанным именем для всех элементов, содержащихся в объекте jQuery |
| attr(объект отображения) | Устанавливает атрибуты, указанные в объекте отображения, для всех элементов, содержащихся в объекте jQuery |
| attr(имя, функция) | Устанавливает указанный атрибут для всех элементов, содержащихся в объекте jQuery, с помощью функции |
| removeAttr(имя), removeAttr(имя[]) | Удаляет атрибут (атрибуты) из всех элементов, содержащихся в объекте jQuery |
| prop(имя) | Возвращает значение указанного свойства для первого из элементов, содержащихся в объекте jQuery |
| prop(имя, значение), prop(объект отображения) | Устанавливает значение одного или нескольких свойств для всех элементов, содержащихся в объекте jQuery |
| prop(имя, функция) | Устанавливает значение указанного свойства для всех элементов, содержащихся в объекте jQuery, с использованием функции |
| removeProp(имя) | Удаляет указанное свойство из всех элементов, содержащихся в объекте jQuery |
Если метод attr() вызывается с одним аргументом, jQuery возвращает значение указанного атрибута для первого из элементов выбранного набора. Соответствующий пример приведен ниже:
$(function() < var srcValue = $('img').attr('src'); console.log("Значение атрибута: " + srcValue); >);В этом сценарии мы выбираем все элементы img в документе, а затем используем метод attr() для получения значения атрибута src, при считывании которого получаем строку. На консоль выводится следующий результат:
Получение значения атрибута для всех элементов, содержащихся в объекте jQuery, обеспечивается совместным применением методов each() и attr():
$(function() < var srcValue = $('img').each(function(index, element) < console.log('Значение атрибута src: ' + $(this).attr('src')); >); >);В этом сценарии из объекта HTMLElement, передаваемого функции в качестве аргумента, с помощью функции $() создается объект jQuery. Этот объект содержит единственный элемент, который идеально подходит для метода attr().
Установка значений атрибутов
Если метод attr() используется для установки значения атрибута, то изменение применяется ко всем элементам, содержащимся в объекте jQuery. Таким образом, в данном случае метод ведет себя иначе, чем при считывании атрибутов, когда возвращается лишь значение атрибута одного элемента. При установке атрибута метод attr() возвращает объект jQuery, что означает возможность использования цепочки вызовов.
Пример сценария, выполняющего установку значения атрибута, приведен ниже:
$(function() < $('img').attr("src", "http://professorweb.ru/downloads/jquery/lily.png"); >);В этом сценарии выбираются все элементы img в документе, и для атрибута src устанавливается ссылка на картинку lily.png. Установленное значение применяется ко всем выбранным элементам, как показано на рисунке:
Установка нескольких атрибутов
Можно установить значения нескольких атрибутов одним вызовом метода attr(), передав ему в качестве аргумента объект. Свойства такого объекта интерпретируются как имена атрибутов, а значения свойств — как значения атрибута. Этот объект принято называть . Соответствующий пример приведен ниже:
$(function() < var attrValues = < src: 'http://professorweb.ru/downloads/jquery/lily.png', style: 'border: thick solid red' >; $('img').attr(attrValues); >);В этом сценарии создается объект, определяющий свойства с именами src и style. Далее в документе выбираются элементы img, и методу attr() передается объект отображения. Вид страницы в окне браузера приведен на рисунке:
Динамическая установка значений атрибутов
Назначаемые атрибутам значения можно определять во время выполнения сценария, передавая методу attr() функцию в качестве аргумента. Соответствующий пример приведен ниже:
$(function() < $('img').attr("src", function(index, oldVal) < if (oldVal.indexOf("rose") >-1) < return "http://professorweb.ru/downloads/jquery/lily.png"; >else if ($(this).closest('#row2').length > 0) < return "http://professorweb.ru/downloads/jquery/carnation.png"; >>); >);Аргументы, передаваемые указанной функции, — это индекс обрабатываемого элемента в наборе и прежнее значение атрибута. Переменная this ссылается на текущий обрабатываемый объект HTMLElement. Если вы хотите изменить атрибут, то функция должна вернуть строку, содержащую новое значение. Если же результат не возвращается, то используется прежнее значение атрибута. В данном примере функция используется для избирательного изменения изображений, отображаемых элементами img.
Удаление атрибутов
Атрибуты можно удалять (отменять установку) с помощью метода removeAttr(), как показано в примере ниже:
$(function() < $('img').attr("style", "border: thick solid red"); $('img:odd').removeAttr("style"); >);В этом примере атрибут style сначала устанавливается с помощью метода attr(), а затем удаляется из нечетных элементов img с помощью метода removeAttr(). Вид страницы в окне браузера приведен на рисунке:
Работа со свойствами
Каждому варианту метода attr() соответствует аналогичный вариант вызова метода prop(). Различие между обоими методами состоит в том, что методы prop() имеют дело со свойствами, определяемыми объектами HTMLElement, а не со значениями атрибутов. Часто атрибуты и соответствующие свойства имеют одинаковые имена, но это не всегда так. В качестве простого примера можно привести атрибут class, представленный в объекте HTMLElement свойством className.
Пример использования метода prop() для получения значения этого свойства приведен ниже:
$(function() < $('*[class]').each(function(index, elem) < console.log("Элемент:" + elem.tagName + " " + $(elem).prop("className")); >); >);В этом примере сначала выбираются в виде набора, а затем последовательно перебираются с помощью метода each() все элементы, у которых имеется атрибут class. Для каждого элемента на консоль выводится его тип и значение свойства className.