Только для читателей Lifeexample возможно открыть интернет-магазин на Moguta.CMS со скидкой в 15%

<<< Паттерн Observer || PHP время выполнения скрипта >>>

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

01.12.2012
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 добавлены атрибуты

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 ленту блога.

Нравится

Комментарии

  • Андрей

    Спасибо. Пригодится.

  • serialmint.ru

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

  • Slava

    Привет! А что же делать, если нужно задать сразу несколько свойств для выбранного объекта? Допустим, что нам нужно задать для таблицы в исходной

    • А в чем сложность? Задайте несколько свойств.

  • zaychik

    В результате, каждая ссылка получит новый атрибут ‘class’ с уникальным значением ‘element-1’, ‘element-2’ etc..

  • Оставить комментарий

    Подписаться на комментарии к этой статье по RSS

    Размещение статей и контекстных ссылок
    Яндекс.Метрика