Только для читателей Lifeexample возможно открыть интернет-магазин на Moguta.CMS со скидкой в 15%
jQuery добавить атрибут
Здравствуйте, уважаемые читатель блога LifeExample, хочу пополнить рубрику "jQuery & JavaScript примеры", новой статьей о том как в jQuery добавить атрибут для элемента верстки.
Элементом верстки можно считать любой тег в HTML коде страницы, это может быть <div>, <table>, <a>, <img> и т.п. Каждый из допустимых HTML тегов может иметь свои атрибуты, как определенные стандартами W3C (World Wide Web Consortium) так и любые пользовательские.
Например, тег <img> по стандартам может содержать такие атрибуты как:
- class
- id
- src
- title
- alt
- align
- border
- height
- hspace
- ismap
- longdesc
- usemap
- vspace
- width
Но ничего не мешает нам использовать собственные атрибуты, например, так:
1 | <img resolution = "1920x1280" width = "500" height="200"> |
В этом примере пользовательский атрибут resolution будет содержать настоящее разрешение картинки.
Зачем использовать пользовательские атрибуты
Вопрос о том, как с помощью jQuery добавить атрибут, чаще всего может возникнуть при построении динамических интерфейсов для веб проектов.
Программируя на JavaScript, нам часто приходится работать с атрибутами элементов, совершая те или иные действия в зависимости от их значений. В определенных случаях нам может быть не достаточно стандартного набора атрибутов и тогда с помощью библиотеки jQuery, добавить атрибут можно очень быстро и удобно, но об этом чуть позже.
Предлагаю поставить задачу, которая бы показывала необходимость добавления атрибута и работы с ним.
Задача jQuery добавить атрибут
Дано:
- Три див блока с заданными id
- Каждый блок содержит названия цвета.
1 2 3 4 5 6 7 8 9 10 11 | <div id="header"> Красный </div> <div id="content"> Зеленый </div> <div id="footer"> Синий </div> |
Требуется:
- При нажатии на каждый из блоков вывести код цвета в формате RGB
Решение:
На самом деле решений много, но в рамках данной темы нам надо с помощью jQuery добавить атрибуты для наших блоков. Поэтому решением будет являться вот этот JS код:
1 2 3 4 5 6 7 8 | $(function(){ $('div[id=header]').attr('rgbcolor', '255,0,0' ); $('div[id=content]').attr('rgbcolor', '0,255,0' ); $('div[id=footer]').attr('rgbcolor', '0,0,255' ); $('div').click(function(){ alert($(this).attr('rgbcolor')); }); }); |
Данными строчками кода мы добавим к имеющимся блокам новые атрибуты rgbcolor, которые будут содержать информацию о цвете. Можно каждому блоку добавить атрибут прям в HTML вот так:
1 2 3 4 5 6 7 8 9 10 11 | <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 можно всего одной строкой
1 | $(div).removeAttr('rgbcolor'); |
Ну, или если нужно удалить атрибут только для одного блока content, то так:
1 | $('div[id=content]').removeAttr('rgbcolor'); |
Изменить значение атрибута
Библиотека jQuery, позволяет манипулировать атрибутами, так как нам хочется, я уже привел пример как с помощью jQuery добавить атрибут, и как его удалить. Но часто приходится еще и менять значения в ходе выполнения скрипта.
Чтобы поменять значение атрибута у элемента нам надо воспользоваться уже знакомой функцией attr.
Подобно тому, как мы задавали атрибут и его значение, также следует сделать если мы захотим его изменить
1 | $('div[id=content]').attr('rgbcolor', ' Новое значение' ); |
На этом пример работы атрибутами предлагаю завершить, поскольку все, что можно с ними сделать мы уже рассмотрели.
Теперь мы можем:
- С помощью jQuery добавить атрибут;
- С помощью jQuery удалить атрибут;
- С помощью jQuery изменить атрибут;
Читайте также похожие статьи:
Чтобы не пропустить публикацию следующей статьи подписывайтесь на рассылку по E-mail или RSS ленту блога.
Комментарии
Спасибо. Пригодится.
В определенных случаях нам может быть не достаточно стандартного набора атрибутов и тогда с помощью библиотеки jQuery, добавить атрибут можно очень быстро и удобно, но об этом чуть позже. Если выбрано несколько элементов, то значение будет взято у первого.
Привет! А что же делать, если нужно задать сразу несколько свойств для выбранного объекта? Допустим, что нам нужно задать для таблицы в исходной
А в чем сложность? Задайте несколько свойств.
В результате, каждая ссылка получит новый атрибут ‘class’ с уникальным значением ‘element-1’, ‘element-2’ etc..
А если у меня id=content_n
где n уникальное число