Использование атрибутов
В предыдущей главе мы увидели, как можно находить элементы на странице по их классу или ID. Эти два свойства связаны, поскольку вы можете использовать их при стилизации элементов на основе CSS, но через jQuery можно находить элементы на основе любых атрибутов. Это возможно благодаря куче типов селекторов атрибутов, и в этой статье мы рассмотрим некоторые из них.
Поиск элементов с определенным атрибутом
Самая простая задача на выбор элементов по атрибуту — это найти все элементы, у которых задан определенный атрибут. Обратите внимание, что в следующем примере мы не запрашиваем какое-то конкретное значение атрибута, фактически, он может его вообще не иметь. Синтаксис для такого селектора — это пара квадратных скобок, в которых записан нужный атрибут, например, [name] или [href]. Ниже приведен пример:
Test 1
Test 2
Test 3
Мы используем селектор атрибута чтобы найти на странице все элементы, у которых есть атрибут title, и затем подчеркиваем их. Как уже упоминалось ранее, такой запрос соответствует элементам, у которых есть title, независимо от того, какое у него значение. Но иногда вам может потребоваться найти элементы с определенным атрибутом и заданным значением этого атрибута.
Поиск элементов с заданным значением определенного атрибута
Ниже приведен пример, в котором мы ищем элементы с заданным значением:
Link 1
Link 2
Link 3
Селектор просто говорит jQuery найти все ссылки (тег a), у которых есть атрибут target равный строковому значению «_blank», и затем добавить к ним текст «[new window]». Но что если вы ищете все элементы, у которых нет данного значения? Инвертировать селектор очень легко:
$("a[target!='_blank']").append(" [same window]");Разница в использовании != вместо =. Это общепринятый способ отрицания оператора во многих языках программирования.
Есть и другие возможности.
Найти элементы со значением, начинающимся с заданной строки можно с помощью оператора ^=:
$("input[name^='txt']").css("color", "blue");Найти элементы со значением, заканчивающимся на заданную строку — с помощью $=:
$("input[name$='letter']").css("color", "red");Найти элементы, со значением, содержащим определенное слово:
$("input[name*='txt']").css("color", "blue");This article has been fully translated into the following languages:
Is your preferred language not on the list? Click here to help us translate this article into your language!
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 позволяет получать и устанавливать значения атрибутов элементов, содержащихся в объекте 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.
Урок №11 — Работа с атрибутами
В видео мы научимся работать с различными атрибутами. Мы научимся добавлять атрибуты, проверять атрибуты и совершать действия в зависимости от значения атрибута.
Видеоурок
jQuery дает большие возможности при работе с различными атрибутами HTML тегов. За счёт jQuery вы можете добавить класс, id, подсказку и множество других атрибутов к любому тегу.
Чтобы добавить атрибут к тегу необходимо выбрать тег через jQuery и применить к нему метод attr () . Он принимает два параметра: название атрибута, а также его значение.
$("p:last-child").attr("title", "Это последний абзац в документе");В коде выше мы добавляем всплывающую подсказку к последнему абзацу на HTML-странице.
Весь код будет доступен после подписки на проект!