jquery добавить атрибут к элементу

Статья, в которой рассмотрим какие в jQuery имеются методы для работы с HTML-атрибутами элементов.

Содержание

1. Что такое HTML-атрибуты?
2. Методы jQuery для выполнения операций над HTML атрибутами
3. Как получить значение атрибута в jQuery?
4. Как изменить значение атрибута?
5. Как в jQuery добавить новый атрибут к элементу?
6. Как в jQuery удалить атрибут у элемента?
7. Зачем использовать пользовательские атрибуты
8. Задача jQuery добавить атрибут
9. jQuery удалить атрибут
10. Изменить значение атрибута
11. Читайте также похожие статьи:
12. .add >jQuery Object
13. .has >boolean
14. .removeClass()
15. .removeClass(«class1 class2 . «)
16. .removeClass(function(index, class))
17. .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 добавить атрибут

Дано:

Три див блока с заданными >

div id = «header» >
Красный
/ div >

div id = «content» >
Зеленый
/ div >

div id = «footer» >
Синий
/ div >

Требуется:

• При нажатии на каждый из блоков вывести код цвета в формате RGB

Решение:

На самом деле решений много, но в рамках данной темы нам надо с помощью jQuery добавить атрибуты для наших блоков. Поэтому решением будет являться вот этот JS код:

Данными строчками кода мы добавим к имеющимся блокам новые атрибуты rgbcolor, которые будут содержать информацию о цвете. Можно каждому блоку добавить атрибут прям в HTML вот так:

div id = «header» rgbcolor = «255,0,0» >
Красный
/ div >

div id = «content» rgbcolor = «0,255,0» >
Зеленый
/ div >

div id = «footer» rgbcolor = «0,0,255» >
Синий
/ div >

В любой момент мы можем С помощью jQuery удалить атрибут, также быстро как и создали его.

jQuery удалить атрибут

Удаление происходит также просто, как и добавление. Опираясь на предыдущее задание, удалить пользовательские атрибуты rgbcolor можно всего одной строкой

Ну, или если нужно удалить атрибут только для одного блока content, то так:

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

Библиотека jQuery, позволяет манипулировать атрибутами, так как нам хочется, я уже привел пример как с помощью jQuery добавить атрибут, и как его удалить. Но часто приходится еще и менять значения в ходе выполнения скрипта.

Чтобы поменять значение атрибута у элемента нам надо воспользоваться уже знакомой функцией attr .

Подобно тому, как мы задавали атрибут и его значение, также следует сделать если мы захотим его изменить

На этом пример работы атрибутами предлагаю завершить, поскольку все, что можно с ними сделать мы уже рассмотрели.

Теперь мы можем:

• С помощью jQuery добавить атрибут;
• С помощью jQuery удалить атрибут;
• С помощью jQuery изменить атрибут;

Читайте также похожие статьи:

Чтобы не пропустить публикацию следующей статьи подписывайтесь на рассылку по E-mail или RSS ленту блога.

Добавляет классы clName1, clName2, . всем выбранным элементам.

Если из этих элементов некоторые уже принадлежат каким-то классам, то новый (новые) класс добавится к существующим, а не заменит их.

.add >jQuery Object

Добавляет классы, список которых возвращает заданная пользователем функция.

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

Функция вызывается отдельно для каждого из выбранных элементов.
При вызове ей передаются следующие параметры:
index — позиция элемента в наборе,
>

.has >boolean

Проверяет наличие класса className у выбранных элементов страницы.
Если хотя бы один из элементов содержит этот класс, то функция вернет true, иначе вернет false.

В примере мы ищем класс с именем selected в разных наборах элементов.

.removeClass()

.removeClass(«class1 class2 . «)

.removeClass(function(index, class))

.toggle >:jQuery Object

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

В нашем примере мы переключаем (добавляем/удаляем) класс с именем ‘highlight’ для параграфа на котором был сделал клик.

Источник: computermaker.info