Как добавить атрибут jquery

Работа с атрибутами в 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() :

Например, получим значение атрибута href элемента #search :

При применении attr() к набору элементов, этот метод вернёт значение указанного атрибута только для первого элемента.

Для того, чтобы вернуть значение указанного атрибута для каждого элемента набора, можно воспользоваться each() или map() .

Если атрибута, значение которого мы хотим получить у элемента нет, то attr() вернёт undefined :

Этот сценарий можно использовать для проверки наличия определённого атрибута у элемента.

Например, проверим имеется ли у элемента #logo» атрибут title :

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

Изменение значения атрибута осуществляется также посредством attr() .

Вариант синтаксиса attr() для установки значения одному атрибуту:

Кстати, если установить атрибуту null , то он будет удалён.

Например, поменяем значение атрибута src элемента #logo :

Установка сразу нескольких атрибутов элементу осуществляется в формате объекта:

Пример установки элементу #logo несколько атрибутов:

Кроме этого в jQuery имеется также вариант установки атрибута с помощью функции:

В этом случае значение атрибута будет определяться результатом (строка или число), возвращаемой функцией. Если функция ничего не возвращает или undefined , то текущее значение не изменяется (оно остаётся прежним).

Обратиться к текущему элементу в функции можно с помощью ключевого слова this .

• index — индекс элемента в наборе;
• valueAttr — текущее значение атрибута;

Например, установим для всех <li> , которые не имеют id атрибут id=»index-{index}» (где: {index} — порядковый номер элемента в наборе).

Добавление нового атрибута

В jQuery, установка нового атрибута или изменение существующего — это одна и также операция.

Пример, в котором всем ссылкам на странице установим атрибут rel со значением nofollow :

Пример, в котором добавим ко всем <li> атрибут data-index со значением соответствующем порядковому номеру этого элемента в #list :

Как в jQuery удалить атрибут у элемента

В jQuery удаление атрибута обычно осуществляется с помощью метода removeAttr() :

Например, удалим атрибут rel у всех ссылок на странице:

В jQuery удалить атрибут можно также с помощью attr() . Для этого ему нужно в качестве значения установить null .

Как добавить атрибут jquery

Given an HTML document containing some elements and the task is to add the attributes to the HTML elements.

Approach: Given an HTML document containing <label>, <input> and <button> elements. The <input> element contains the type and id attribute. When user click on the button, the jQuery function is called. We use $(selector).attr() method to add the attributes. Here, we are adding the placeholder attribute to the input field.

Манипулирование атрибутами элементов в jQuery

Данный урок посвящён чтению и изменению атрибутов элементов в jQuery.

Атрибуты — это пара имя/значение, которая назначается элементам в теге. Примеры атрибутов (href, title, src, class):

jQuery дает возможность читать, добавлять, изменять или удалять любой атрибут в элементе. Для этого используются следующие методы:

• attr() для чтения, добавления и изменения атрибутов
• removeAttr() для удаления атрибутов

В данном уроке разбирается работа с методами attr() и removeAttr() .

Для работы с классами CSS существуют специальные методы jQuery, которые описаны в другом уроке. При работе над проектом в jQuery приходится очень часто манипулировать классами CSS, а атрибут class может содержать несколько имён классов, что значительно усложняет работу с ним, по сравнению с другими атрибутами.

Если вы собираетесь работать со значениями полей ввода, то лучше использовать метод val() , который не только обеспечивает упрощённый вариант работы с атрибутом value , но и может читать и устанавливать значения в выбранных элементах списка select .

Читаем значение атрибута

Чтение значения атрибута элемента осуществляется просто. Нужно только вызвать метод attr() для объекта jQuery, который содержит элемент, передав ему имя атрибута для чтения. Метод возвращает значение атрибута:

Если ваш объект jQuery содержит несколько элементов, метод attr() читает значения атрибута только для первого элемента из набора.

Устанавливаем значения атрибутов

Метод attr() можно использовать также для добавления или изменения значений атрибутов:

• Если атрибут не существует в элементе, он будет добавлен и ему будет присвоено заданное значение.
• Если атрибут уже существует, его значение будет обновлено заданным значением.

Существует три способа использовать метод attr() для добавления или изменения атрибутов:

1. Можно добавлять/изменять атрибуты для любого элемента (или набора элементов).
2. Можно добавлять/изменять несколько атрибутов сразу для элемента (или элементов) с помощью задания карты имён атрибутов и значений.
3. можно динамически добавлять/изменять единичный атрибут для нескольких элементов с помощью возвратной функции.

Устанавливаем один атрибут

Чтобы установить или изменить атрибут элемента нужно вызвать метод attr() с указанием имени атрибута и значения. Например:

Также можно установить один и тот же атрибут для нескольких элементов:

Устанавливаем несколько атрибутов с использованием карты

Вы можете установить несколько атрибутов одновременно для одного или нескольких элементов с помощью карты. Это список пар имя/значение, которое выглядит следующим образом:

В следующем примере устанавливаются два атрибута для элемента img одновременно:

Также вы можете устанавливать атрибуты для нескольких элементов:

Устанавливаем атрибуты с использованием возвратной функции

Вместо того, чтобы передавать значения атрибутов методу attr() , можно передать имя возвратной функции. Так можно динамически устанавливать значения атрибута для нескольких элементов в соответствии с позицией элемента, существующим значением атрибута или другими свойствами.

Возвратная функция должна принимать два аргумента:

• Индекс позиции текущего выбранного элемента в наборе (начинается с ноля)
• старое значение атрибута для текущего выбранного элемента

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

Кроме текущего положения элемента и старого значения атрибута ваша функция может получить доступ к самому элементу с помощью ключевого слова this . Таким образом можно получить доступ к любому свойству или методу элемента из возвратной функции.

В примере используется возвратная функция для добавления атрибута alt каждому изображению на странице на основании положения изображения и его атрибута src :

После выполнения кода, первое изображение будет иметь атрибут alt со значением «Рисунок 1: myphoto.jpg» , а второе изображение будет иметь атрибут alt со значением «Рисунок 2: yourphoto.jpg» .

Удаление атрибута

Для удаления атрибута из элемента нужно вызвать метод removeAttr() , передав ему имя атрибута для удаления. Например:

Вы также можете вызвать метод removeAttr() для объекта jQuery, который содержит несколько элементов. Метод removeAttr() удалит заданный атрибут изо всех элементов:

Резюме

В данном уроке были рассмотрены вопросы работы с атрибутами элементов в jQuery:

• Чтение значений атрибутов
• Установка одного атрибута
• Установка нескольких разных атрибутов одновременно
• Использование возвратной функции для динамической установки значений атрибутов в наборе элементов
• Удаление атрибутов из элемента

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.elated.com/articles/jquery-manipulating-element-attributes/
Перевел: Сергей Фастунов
Урок создан: 10 Августа 2010
Просмотров: 128159
Правила перепечатки

5 последних уроков рубрики «jQuery»

• 

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Манипуляции с атрибутами в jQuery

Метод attr() получает или устанавливает значение атрибута элемента на странице. Если элемент не имеет такого атрибута, то возвращается значение undefined.

Получить значение атрибута в jQuery

Получение значения атрибута style у всех элементов, найденных селектором «p».

$(function () <
var style = $(«p»).attr(«style»);
>);
<p style=»color: grey; font-weight: bold;»>
Получение значения атрибута style
</p>

Добавить атрибут в jQuery

Метод attr(«имя_атрибута»,»значение») умеет добавлять новые атрибуты элементам. Установим значения атрибута «class» у всех параграфов, независимо от того, имеет ли параграф класс .oneClass.

$(function () <
$(«p»).attr(«class», «oneClass»);
>);
.oneClass <
color: purple;
>
<p>
Добавление нового атрибута
</p>
<p >
Добавление нового атрибута с классом
</p>
<p>
Добавление нового атрибута
</p>

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

Метод removeAttr() — удаляет указаный атрибут элемента. Удаляет стили у всех параграфов «p».

Пример 1

Пример 2

Удаляет все стили у параграфов при событии клик.

<p style=»font-size:120%;color:red»>Первый параграф.</p>
<p style=»font-weight:bold;color:blue»>Второй параграф.</p>
<button>Удалить все стили атрибута</button>

Атрибуты input в jQuery

Метод val() — возвращает значение атрибута value у выбранного элемента формы.

$(«button»).click(function() <
$(«input:text»).val(«Александр Пушкин»);
>);
<p>Автор: <input type=»text» name=»user»></p>
<button>Записать в поле ввода</button>

Добавить класс к элементу в jQuery

Метод addClass() — добавляет класс к указанным элементам страницы и не заменяет уже существующие.

Метод removeClass() — удаляет выбранные классы у элементов на странице.

Переключатель классов на jQuery

Метод toggleClass() добавляет или удаляет заданный класс по принципу переключателя (добавляет, если элемент не содержит класса, и удаляет, если класс есть).

$(function () <
$(«#toggle»).on(«click», toggle);
function toggle() <
$(«p»).toggleClass(«classOn»);
>
>);

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.