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. Добавление содержимого в конец элементов
Урок №11 — Работа с атрибутами
В видео мы научимся работать с различными атрибутами. Мы научимся добавлять атрибуты, проверять атрибуты и совершать действия в зависимости от значения атрибута.
Видеоурок
jQuery дает большие возможности при работе с различными атрибутами HTML тегов. За счёт jQuery вы можете добавить класс, id, подсказку и множество других атрибутов к любому тегу.
Чтобы добавить атрибут к тегу необходимо выбрать тег через jQuery и применить к нему метод attr () . Он принимает два параметра: название атрибута, а также его значение.
$("p:last-child").attr("title", "Это последний абзац в документе");В коде выше мы добавляем всплывающую подсказку к последнему абзацу на HTML-странице.
Весь код будет доступен после подписки на проект!Атрибуты и свойства
»» В данной статье используется исходный код для примеров. Сохраните эту страницу для тестирования приведенных ниже примеров.
Библиотека 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.
Добавление атрибута в jquery
Подробно о всех способах добавления атрибутов в jquery
- Добавляем атрибут в jquery
- Код добавления атрибута в jquery
Добавляем атрибут в jquery
И скрипт(в данном случае) сработает при загрузке страницы.
Результат работы данного примера:
Стенд для визуализации добавления атрибута в jquery:
Специально для вас я сделал стенд, для визуализации процесса «добавления атрибута в jquery«, чтобы вы могли это увидеть в реальном времени!
нажмите кнопку «Добавь атрибут в jquery» и вы получите результат:
Добавь атрибут в jquery
Далее. нам нужно в этом процессе разобраться!
Код добавления атрибута в jquery
Чтобы не рассказывать скучную теорию. сразу к теме.. «как добавить атрибут в jquery«
Для этого нам понадобится:
Нам нужен любой тег, пусть это будет придуманный тег:
Чтобы это не было стационарным.текстом. «добавим атрибут» в реальном времени. Для этого нам потребуется кнопка — button к ней прицепим onclick с функцией:
Конечно же не забываем, что надо подключить jquery
Далее. нам нужно любым способом обратиться к тегу в jquery.
И собственно скрипт, который и добавит новый атрибут тегу в jquery.
Живой пример добавления атрибута в _jquery
Для того, чтобы произошло добавление атрибута в_jquery, вам нужно нажать кнопку «Добавь атрибут в jquery«
Здесь тег, к которому будем добавлять новый атрибут!
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru!
© 2015 — 2024 Контакты. Реклама на сайте
Лучший хостинг : RUWEB + помощь по RUWEB