Статья, в которой рассмотрим какие в jQuery имеются методы для работы с HTML-атрибутами элементов.
- Что такое HTML-атрибуты?
- Методы jQuery для выполнения операций над HTML атрибутами
- Как получить значение атрибута в jQuery?
- Как изменить значение атрибута?
- Как в jQuery добавить новый атрибут к элементу?
- Как в jQuery удалить атрибут у элемента?
- Зачем использовать пользовательские атрибуты
- Задача jQuery добавить атрибут
- jQuery удалить атрибут
- Изменить значение атрибута
- Читайте также похожие статьи:
- .add >jQuery Object
- .has >boolean
- .removeClass()
- .removeClass(«class1 class2 . «)
- .removeClass(function(index, class))
- .toggle >:jQuery Object
Что такое HTML-атрибуты?
HTML-атрибуты — это такие сущности, которые используются для установления различных характеристик HTML элементу. Они задаются внутри открытого тега элемента.
Кроме HTML-атрибутов у нас есть ещё DOM-свойства. Это другие сущности, но связанные с HTML-атрибутами.
Чтобы понять как они связаны, нужно знать, что такое DOM.
DOM — это объектная модель документа, которую строит браузер, в соответствии с HTML-страницей, которую мы запросили, например, введя её URL в адресную строку. В DOM теги становятся объектами (узлами), а HTML-атрибуты — свойствами этих узлов.
Браузер при изменении DOM изменяет HTML-код, и наоборот, при изменении HTML-кода изменяет DOM. При этом синхронизация HTML-атрибутов и соответствующих им DOM-свойств не всегда осуществляется один к одному. Как это происходит можно прочитать в статье «Работа с HTML атрибутами и DOM свойствами»
При этом более предпочтительно выполнять операции не с HTML-атрибутами, а с соответствующими им DOM-свойствами. Для этого в jQuery имеется специальный для этого случая метод prop. Выполнять же операции с атрибутами следует, когда вам это действительно нужно выполнить через HTML.
Методы jQuery для выполнения операций над HTML атрибутами
В jQuery для выполнения действий над HTML-атрибутами имеется два метода .
Первый метод – это attr . Он используется, когда вам нужно, узнать значение требуемого атрибута, добавить к нему новый HTML-атрибут или изменить текущее значение некоторого атрибута на новое.
Второй метод – это removeAttr . Данный метод применяется для удаления определённого атрибута у элемента или набора элементов.
Разберём, как работать с данными методами более подробно.
Как получить значение атрибута в jQuery?
Получить в jQuery значение необходимого атрибута осуществляется с помощью метода prop .
Пример, в котором получим значение атрибута href у элемента #search :
Если вы применили метод attr к набору элементов, то в этом случае он вернёт значение атрибута только для первого элемента этого набора .
Для того чтобы получить значение у каждого элемента набора можно воспользоваться jQuery-методом each или map .
Метод attr возвращает undefined когда вы попытаетесь получить значение атрибута, которого у него нет.
Это можно использовать для проверки наличия определённого атрибута у элемента.
Например, проверим имеется ли атрибут title у элемента #image-logo» :
Как изменить значение атрибута?
Изменение значения атрибута осуществляется тоже с помощью метода attr . Для этого используется следующий синтаксис:
Пример, котором поменяем значение атрибута src у элемента #logo :
Как в jQuery добавить новый атрибут к элементу?
В jQuery, да также, как и в JavaScript, нет различия в операциях, когда мы хотим изменить значение атрибуту или установить новый атрибут.
Пример, в котором всем ссылкам на странице установим атрибут rel со значением nofollow :
Пример, в котором добавим ко всем li , находящихся в списке #list атрибут data-index , которое будет иметь значение в соответсвии с их порядковвым номером:
Если функция ничего не вернула или возвратила undefined , то текущее значение атрибута не будет изменено (оно останется прежним). Данную особенность полезно использовать, когда значение атрибута необходимо установить только в зависимости от некоторых условий.
Как в jQuery удалить атрибут у элемента?
В jQuery удаление атрибута обычно осуществляется с помощью метода removeAttr .
Синтаксис метода removeAttr :
Например, удалим атрибут rel у всех ссылок на странице:
В jQuery удалить атрибут также можно с помощью метода attr . В этом случае ему нужно в качестве значения установить значение null .
Здравствуйте, уважаемые читатель блога LifeExample, хочу пополнить рубрику «jQuery & JavaScript примеры», новой статьей о том как в jQuery добавить атрибут для элемента верстки.
Элементом верстки можно считать любой тег в HTML коде страницы, это может быть
Например, тег по стандартам может содержать такие атрибуты как:
Но ничего не мешает нам использовать собственные атрибуты, например, так:
В этом примере пользовательский атрибут resolution будет содержать настоящее разрешение картинки.
Зачем использовать пользовательские атрибуты
Вопрос о том, как с помощью jQuery добавить атрибут, чаще всего может возникнуть при построении динамических интерфейсов для веб проектов.
Программируя на JavaScript, нам часто приходится работать с атрибутами элементов, совершая те или иные действия в зависимости от их значений. В определенных случаях нам может быть не достаточно стандартного набора атрибутов и тогда с помощью библиотеки jQuery, добавить атрибут можно очень быстро и удобно, но об этом чуть позже.
Предлагаю поставить задачу, которая бы показывала необходимость добавления атрибута и работы с ним.
Задача jQuery добавить атрибут
Дано:
-
Три див блока с заданными >
- При нажатии на каждый из блоков вывести код цвета в формате RGB
- С помощью jQuery добавить атрибут;
- С помощью jQuery удалить атрибут;
- С помощью jQuery изменить атрибут;
