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

В этой теме рассмотрим jQuery методы attr() и removeAttr(), которые используются для работы с атрибутами элементов.

Что такое HTML-атрибуты?

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():

// attributeName – атрибут, значение которого нужно получить
.attr('attributeName')

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

<a id="search" href="https://yandex.ru">Яндекс</a>

<script>
// получим значение атрибута href и сохраним его в переменную href
var href = $('#search').attr('href');
// выведем значение переменной href в консоль
console.log(href); // https://yandex.ru
</script>

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

<div class="section" id="section-1">...</div>
<div class="section" id="section-2">...</div>
<div class="section" id="section-3">...</div>

<script>
var attr = $('.section').attr('id');
console.log(attr); // "section-1"
</script>

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

$('.section').each(function() {
  console.log( $(this).attr('id') );
});

// Результат:
//  section-1
//  section-2
//  section-3

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

<h1>...</h1>

<script>
var id = $('h1').attr('id');
console.log(id); // undefined
</script>

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

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

<img src="image.png" id="logo" alt="...">

<script>
if ($('#logo').attr('title') === undefined) {
  // атрибут есть
} else {
  // атрибута нет
}
</script>

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

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

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

// attributeName – имя атрибута
// value – новое значение (строка, число или null)
.attr('attributeName', value)

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

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

<img id="logo" src="logo.png">

<script>
$('#logo').attr('src', 'new_logo.png');
</script>

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

// attributes – объект, содержащий набор пар «атрибут: значение»
.attr(attributes)

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

<img id="logo">

<script>
  $('#logo').attr({
    src: 'logo.png',
    width: '250',
    height: '250',
    alt: '...'
  });
</script>

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

// attr - имя атрибута
.attr('attr', function(index, value) {
  // ...
})

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

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

Параметры функции:

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

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

<ul>
  <li>One</li>
  <li>Two</li>
  <li id="item-3">Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

<script>
$('li').attr('id', function(index, valueAttr){
  if (valueAttr === undefined) {
    return 'item-' + (index + 1);
  }
})
</script>

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

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

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

$('a').attr('rel', 'nofollow');

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

<ul id="list">
  <li></li>
  <li></li>
  <li></li>
</ul>

<script>
$('#list li').attr('data-index', function(index) {
  return index + 1;
});
</script>

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

// attributeName - атрибут, который нужно удалить
.removeAttr('attributeName')

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

$('a[rel]').removeAttr('rel');

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

$('a[rel]').attr('rel', null);

Ещё темы этого раздела:

• Добавление и удаление DOM-свойств (disabled, checked, selected и др.)
• Добавление и удаление классов
• Получение и установка CSS-свойств элементам
• data-атрибуты и внутреннее хранилище jQuery

• Главная»
• Уроки»

• jQuery»

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

• Метки урока:
• разное
• кодинг
• jquery

<a href="http://www.elated.com/">Ссылка на сайт</a>
<p title="Введение">Какой-нибудь текст</p>
<img src="myphoto.jpg" alt="Моя фота" width="300" height="300" />
<div class="summary">Здесь текст резюме</div>

// Выводим значение атрибута 'href' элемента #myLink
alert ( $('a#myLink').attr('href') );

// Изменяем значение атрибута 'href' элемента #myLink на значение 'http://www.example.com/'
// (если атрибут "href" не существует, он будет создан автоматически)

$('a#myLink').attr('href', 'http://www.example.com/');

// Изменяем все ссылки на указание на 'http://www.example.com/'
$('a').attr('href', 'http://www.example.com/');

{
  имя1: значение1,
  имя2: значение2,
  ...
}

// Устанавливаем атрибуты 'src' и 'alt' для элемента img #myPhoto 

$('img#myPhoto').attr({
  'src': 'mypic.jpg',
  'alt': 'My Photo'
});

// Устанавливаем атрибуты 'src' и 'alt' для всех элементов img

$('img').attr({
  'src': 'mypic.jpg',
  'alt': 'My Photo'
});

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$( init );

function init() {

  // Устанавливаем атрибут 'alt' для всех элементов 'img'
  $('img').attr( 'alt', setAltText );

  function setAltText( index, attributeValue ) {
    return ( 'Рисунок ' + (index+1) + ': ' + this.src );
  }
}
</script>
</head>
<body>
<img src="myphoto.jpg"/>
<img src="yourphoto.jpg"/>
</body>
</html>

// Удаляем атрибут 'title' из элемента #myLink
$('a#myLink').removeAttr('title');

// Удаляем атрибут 'title' изо всех ссылок
$('a').removeAttr('title');

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

• 

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

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

• 

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

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

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

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

• 

  Рисуем диаграмму Ганта

  jQuery плагин для создания диаграммы Ганта.

• 

  AJAX и PHP: загрузка файла

  Пример того как осуществить загрузку файла через PHP и jQuery ajax.

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

Чтение и изменение атрибутов (attr, prop)

Приведём пример считывания значения атрибута с помощью метода attr. Для считывания значения необходимо передать название атрибута параметром. К примеру, попробуем получить значение атрибута attr из поля для ввода текста:

<input type="text" value="Тише, мыши, кот на крыше" id="mouse">
<script>
   var a = $('#mouse').attr('value'); // получает значение атрибута 'value'
   console.log( a ); // выведет 'Тише, мыши, кот на крыше'
</script>

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

<input type="text" value="Тише, мыши, кот на крыше" id="mouse">
<script>
   $('#mouse').attr('value', 'Сыр!');
</script>

После выполнения этого кода у текстового поля с id равным «mouse» будет изменён атрибут value с «Тише, мыши, кот на крыше» на «Сыр!».

Для работы с атрибутом «value» можно использовать специальный метод val. Если не передать ему никакой параметр, то он вернёт значение атрибута value у элемента. А если передать параметр, то он будет установлен как новое значение. Продемонстрируем это, изменив ранее приведённые примеры. Сначала прочитаем значение:

<input type="text" value="Тише, мыши, кот на крыше" id="mouse">
<script>
   var a = $('#mouse').val(); // получает значение атрибута 'value'
   console.log( a ); // выведет 'Тише, мыши, кот на крыше'
</script>

Теперь установим значение:

<input type="text" value="Тише, мыши, кот на крыше" id="mouse">
<script>
   $('#mouse').val('Сыр!');
</script>

К сожалению, метод attr не является всемогущим. К примеру, он не может определить отмечена ли галочка «checked» в чекбоксе или является ли поле формы неактивным «disabled». Для этого необходимо использовать метод «prop«. Работает он точно так же, как и attr, но при задании второго параметра надо использовать значения «true» или «false» (он их и возвращает, если не задан второй параметр). Продемонстрируем это на примере чекбокса:

<input type="checkbox" id="mouse">
<script>
   var a = $('#mouse').prop('checked'); // вернёт "false", потому что не "checked"
   $('#mouse').prop('checked', true); // меняем состояние чекбокса на "checked"
   var a = $('#mouse').prop('checked'); // вернёт "true", потому что "checked"
</script>

Теперь посмотрим деактивированные «disabled» поля формы (в них нельзя ничего набрать):

<input type="text" id="mouse">
<script>
   var a = $('#mouse').prop('disabled'); // вернёт "false"
   $('#mouse').prop('disabled', true); // меняем состояние на "disabled"
   var a = $('#mouse').prop('disabled'); // вернёт "true"
</script>

Удаление атрибутов (метод removeAttr)

Иногда появляется необходимость в полном удалении атрибута тега. Попробуем взять пример из предыдущего параграфа и полностью удалить атрибут «value». Для этого используем метод removeAttr, который удаляет атрибуты (значение и название) элементов. Этому методу необходимо передать только название атрибута. Код будет выглядеть так:

<input type="text" value="Тише, мыши, кот на крыше" id="mouse">
<script>
   $('#mouse').removeAttr('value');
</script>

После выполнения этого JS кода, HTML код текстовое поле будет выглядеть так:

<input type="text" id="mouse">

Очередная глава из книги «jQuery in Action» (авторы Bear Bibeault и Yehuda Katz). Прежде всего извиняюсь перед читателями за столь большой промежуток между публикациями глав. Но все-таки я это сделал, чему, конечно же, рад. Надеюсь, что и вы тоже не останетесь равнодушными. Итак, продалжаем.

Глава 3. Оживляем страницу с jQuery.

3.1. Манипулирование свойствами и атрибутами объектов.

3.1.1. Манипулирование со свойствами объектов.

Самый простой способ проверить или изменить элементы выбранного нами набора позволяет нам команда each():

$(‘img’).each(function(n){
this.alt=’Это image[’+n+’] с id равным ‘+this.id;
});

Это выражение применит указанную функцию к каждому элементу <img> на странице, при этом будет изменен атрибут alt используя порядковый номер элемента и его id.

3.1.2, 3.1.3 Получение и изменение значения атрибутов.

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

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

$(“#myImage”).attr(“alt”)

так мы получим alt для элемента с id #myImage.

А так:

$(“#myImage”).attr(“alt”,”Му picture”)

как вы уже наверное догадались, установим этому же элементу alt “My picture”.

Стоит отметить, что вместо нового значения атрибута можно передавать этому методу функцию. Пример:

$(‘*’).attr(‘title’,function(index) {
return ‘I am element ’+index+’ and my name is ‘ +
(this.id ? this.id : ‘unset’);
});

эта сложная пока для нас функция пробегает через все элементы набора на странице, изменяя атрибут title в соответствии с индексом элемента и его id.

Более того, метод attr() позволяет изменять несколько атрибутов одновременно:

$(‘input’).attr({value: ‘’, title: ‘Please enter a value’});

Таким образом мы можем очистить все значения инпутов и установить их title как «Please enter a value».

3.1.4 Удаление атрибутов.

Для того, чтобы удалить атрибут у элемента DOM, в jQuery есть специальный метод removeAttr(). Например:

$(‘img’).removeAttr(‘alt’);

так мы удалим атрибут alt у всех выбранных элементов img.

3.2 Работа со стилями элементов.

3.2.1 Добавление и удаление имен классов.

Определение класса делается очень просто с помощью метода addClass(), который присваивает переданное ему имя класса всем элементам в наборе. Например:

$(‘img’).addClass(‘noBorder’);

Удаление класса делается командой removeClass():

$(‘img’). removeClass (‘noBorder’);

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

Очень полезно бывает применять такой метод в таблицах, где, допустим, нам нужно поменять закрашенные строки в белые, а белые – в закрашенные. Делается это так:

$(‘tr’).toggleClass(‘striped’);

где striped было названием класса для закрашенной строки.

3.2.2 Получение и установка стилей.

Работа напрямую со стилями дает нам большие возможности.

Метод css() работает аналогично методу attr(), позволяя нам устанавливать индивидуальные свойства CSS для элемента, передавая методу пару имя-значение или даже менять несколько свойств, передавая новые значения для них в объекте.

Более того, метод также прекрасно обрабатывает функции, переданные ему в качестве значения для свойства. Например, увеличим ширину элементов в наборе на 20 пикселей:

$(‘div.expandable’).css(‘width’,function(){
return $(this).width() + 20 + “px”;
});

Следующий пример показывает возможность передачи методу группы параметров в качестве объектов:

$(‘div.example’).css({width: ‘100px’, height: ‘200px’});

И, наконец, метод css() позволяет получить значение свойства, переданного методу. Например, узнать ширину элемента можно так:

$(‘div.examle’).css(‘width’);

Для часто используемых свойств в jQuery есть специальные команды. Так, мы можем узнать или изменить высоту и ширину объектов специальными методами height() и width(). Соответственно, если мы передаем методу значение – мы устанавливаем это значение согласно методу, его получившему, а если просто вызываем метод – получим нужное нам значение (при этом переданное значение будет установлено в пикселях), то есть:

$(‘div.example’).width(500)

установит ширину блока в 500 пикселей. Кстати, это то же самое, что и

$(‘div.example’).css(“width”,”500px”)

Узнать теперь ширину блока можно так:

$(‘div.example’).width()

3.2.3 Еще немного полезных команд для работы со стилями.

Иногда необходимо проверить, принадлежит ли элемент к определенному классу или нет. Сделать это поможет функция hasClass():

$(‘p:first’).hasClass(‘supriseMe’)

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

3.3 Установка контента элементов.

3.3.1 Замена HTML или текста.

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

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

<ul id="theList">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>

var text=$('#theList’).text();

В результате переменная text будет содержать строку «OneTwoThreeFour».

Как и с предыдущей функцией, мы можем устанавливать текстовое содержимое для элемента, если функции test() будет как параметр необходимый текст. При этом если в тексте будут символы < или > они будут заменены на спецсимволы.

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

3.3.2 Перемещение и копирование элементов.

Для добавления контента в конец существующего служит команда append().

Функция добавляет строку или HTML-фрагмент, переданные ей как параметры, к новому или существующему элементу DOM либо к набору вложенных элементов jQuery. Рассмотрим несколько примеров.

$('p').append('<b>some text</b>');

Это выражение присоединит HTML-фрагмент, созданный из переданной функции строки, к концу уже существующего содержимого всех элементов <p> на странице.

Более комплексное использование этой команды позволяет назначить существующие элементы DOM дочерними к другим элементам. То есть:

$("p.appendToMe").append($("a.appendMe"))

позволит назначить все ссылки класса appendMe дочерними элементами всех <p> на странцие класса appendToMe. При этом конечное положение назначаемых элементов зависит от числа целевых элементов. Если такой один, то назначаемые элементы будут перемещены с их первоначального положения на странице, если же целевых элементов несколько, то назначаемые элементы останутся на своем прежнем месте, а целевым элементам будут назначены их копии.

Для перемещения или копирования элемент из одного места в другое можно также использовать команду appendTo(), которая перемещает все элементы вложенного набора в конец содержимого целевого элемента, указанного как параметр функции. Смотрим пример, чтобы увидеть отличие от предыдущей функции:

$(" a.appendMe").appendTo($("p.appendToMe "))

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

Принцип работы следующих команд похож на работу append() и appendTo():
• prepend() и prependTo() – вставляет исходный элемент перед целевым, а не после.
• before() и insertBefore() – вставляет элемент перед целевыми элементами, а не перед первым потомком.
• after() и insertAfter() – вставляет элемент после целевых элементов, а не после последнего потомка.

Рассмотрим следующий пример:

$(‘<p>Привет!</p>’).insertAfter(‘p img’);

Это выражение создаст новый абзац и вставит копии его после каждого рисунка внутри абзаца.

3.3.3 Вложение элементов

Другой тип DOM-манипуляций, к которому мы часто обращаемся это вложение элементов (или группы элементов) в какой-то другой элемент. Например, нам захочется поместить все ссылки определенного класса внутрь <div>. Сделать это можно с помощью команды wrap(). Этот метод вкладывает выбранный набор элементов внутрь переданного HTML-кода либо клона переданного элемента.

Например, чтобы вложить каждую ссылку класса surprise в <div> класса hello сделаем следующее:

$(“a.surprise”).wrap(“<div class=’hello’></div>”);

Если же мы хотим вложить каждую ссылку в копию первого элемента <div> на странице:

$(“a.surprise”).wrap($(“div:first”)[0]);

Что же делать, если нам нужно поместить все выбранные элементы не по одному, а вместе в какой то общий контейнер? В этом нам поможет функция wrapAll().

Ну а когда мы хотим поместить в нужный нам контейнер не каждый элемент, а только его содержимое – используем функцию wrapInner().

3.3.4 Удаление элементов

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

При этом стоит учитывать, что, как и многие другие команды jQuery, результатом работы этой команды является опять же набор элементов. И пусть мы удалили его из DOM, мы все равно можем его дальше использовать в других функциях, например, тех же appendTo() или insertAfter() или другими похожими.

Чтобы очистить элементы от их содержимого можно использовать команду empty(). Она удаляет содержимое всех элементов DOM в наборе.

Распространено применение remove() и after() для операции замены. Делается это подобным образом:

$(‘div.elementToReplace’).after(‘<p>Я заменяю блок</p>’).remove();

Поскольку after() возвращает исходный элемент <div>, мы можем попросту убрать его, оставив только новый абзац <p>.

Если идея вам понравилась, можно доработать ее и написать следующую функцию:

$.fn.replaceWith = function(html) {
return this.after(html).remove();
}

Тогда предыдущую операцию мы выполним уже так:

$(‘div.elementToReplace’).replaceWith(‘<p>Я заменяю блок</p>’);

А что же делать, когда мы хотим не переместить элементы, а только скопировать?..

3.3.5 Клонирование элементов

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

Клонирование элементов малоэффективно, пока мы не сделаем что-нибудь с копией. Тут уже все зависит от нашей фантазии. Вот пара примеров:

$(‘img’).clone().appendTo(‘fieldset .photo’);

Это выражение делает копию всех изображений и помещает их во все элементы <fieldset> класса photo.

Еще один пример:

$(‘ul’).clone().insertBefore(‘#here’);

Выполняет похожую операцию. Здесь стоит отметить, что клонируются все элементы <ul>, включая их потомков <li> (если такие, конечно, есть).

И последний пример:

$(‘ul’).clone().insertBefore(‘#here’).end().hide();

Это выражение похоже на предыдущую операцию, но после вставки копии команда end() выбирает исходный набор, после чего он скрывается командой hide().

3.4 Операции с элементами форм

Основное действие, которое выполняется с формами – это работа с их данными. Команда val() возвращает содержимое атрибута value первого элемента в наборе. Когда элемент формы содержит несколько вариантов выбора, возвращается массив значений всех этих вариантов.

Эта команда, хотя и довольно полезная, имеет ряд ограничений. Если первый элемент набора не является элементом формы – получим сообщение об ошибке. Также эта команда не различает отмеченные и не отмеченные элементы чекбоксов или радиобатонов.

Для случая с радиобатоном можно поступить следующим образом:

$(‘[name=radioGroup]:checked’).val()

Это выражение вернет значение единственного выбранного радиобатона с именем radioGroup (или же вернет значение undefined если ни один радиобатон не был выбран). Этот пример не может быть применен к чекбоксам, так как здесь возможно более одного выбранного значения, а как уже говорилось, val() возвращает содержимое атрибута value первого элемента в наборе.

При передаче команде параметра, он будет установлен как значение для value всех выбранных элементов набора. При этом опять же есть ряд ограничений. Например, нельзя установить несколько значений для элемента с множественным выбором.

Еще одно направление использования val() – установка флажков чекбоксов и радиобатонов или выбор опций <select>. При этом передается массив значений, и, если любое из них совпадет со значением элемента, элемент будет выбран (отмечен). Например:

$(‘input,select’).val([‘one’,’two’,’three’]);

Это выражение проверит все элементы <input> и <select> на совпадение их значений с любой из переданных строк: one, two или three. При совпадении значений чекбоксы или радиобатоны будут отмечены, опция селекта будет выбрана.

Очередная глава подошла к концу. Опять же буду рад здоровой критике. Спасибо.

Также напомню, что эту и другие статьи вы всегда сможете найти в моем блоге, там же можно и подфидиться;-)

Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.

<img id="greatphoto" src="brush-seller.jpg" alt="brush seller">

$( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );

$( "#greatphoto" ).attr( "title", "Photo by Kelly Clark" );



  


                       
  

$( "#greatphoto" ).attr({
  alt: "Beijing Brush Seller",
  title: "photo by Kelly Clark"

$( "#greatphoto" ).attr( "title", function( i, val ) {
  return val + " - photo by Kelly Clark";

Последнее обновление: 1.11.2015

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

Атрибуты и свойства элементов

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

Атрибуты — это элементы разметки элементов, такие как id, style, class и ряд других. Свойства же представляют элементы объектов javascript.

Несмотря на такое различие, между свойствами и атрибутами имеет сопоставление. Так, атрибут id будет соответствовать свойству id. Например, у нас есть ссылка:

<a href="1.html" id="link1">Ссылка</a>
<script type="text/javascript">
$(function(){
	var ahref=document.getElementsByTagName('a')[0]
	console.log(ahref.id); // выведет link1
});
</script>

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

Изменение свойств

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

	$('a').each(function(index,elem){
		console.log($(elem).prop('href'));
	});

Чтобы изменить значение свойства, надо просто передать в качестве второго параметра новое значение:

	$('a').first().prop('href','33.html');

После этого первая ссылка на странице будет иметь в качестве адреса страницу 33.html.

Удаление свойств

Для удаления свойств мы можем использовать метод removeProp('имя_свойства'):

	$('a').first().removeProp('href');

После этого свойству будет присвоено новое значение: undefined, которое будет указывать, свойство не определено.

Работа с атрибутами

Работа с атрибутами во многом похожа на работу со свойствами. Так, чтобы получить значение атрибута элемента, нам надо использовать
метод attr('имя_атрибута'):

	$('a').each(function(index,elem){
		console.log($(elem).attr('href'));
	});

Действие данного метода аналогично тому, что приводилось для метода prop: вывод на консоль всех адресов ссылок.

А передавая в качестве второго параметра в метод attr некоторое значение, можно установить новое значение атрибута:

	$('a').first().attr('href','33.html');

И также для удаления значений атрибутов мы модем использовать метод removeAttr('имя_атрибута'):

$('a').first().removeAttr('href');

Обратите внимание, если в случае с удалением свойства через метод removeProp соответствующий свойству атрибут оставался, только ему присваивалось
значение свойства, то есть undefined, то при удалении атрибута через removeAttr атрибут удаляется из разметки элемента.

Пользовательские атрибуты html5

В HTML5 была введена такая функциональность, как пользовательские атрибуты. Их суть в том, что мы можем применить к элементу дополнительные атрибуты,
которые будут хранить некоторое дополнительное значение. Подобные атрибуты начинаются с префикса data-, после которого идет собственно название атрибута и его значение.
Например, в следующем примере я добавляю атрибут data-year, который будет хранить год:

<ul data-year="2010">
	<li>Java</li>
	<li>C/C++</li>
	<li>PHP</li>
</ul>

Для работы с подобными атрибутами используется метод data. Он имеет следующие варианты использования:

• data('имя атрибута'): получает значение атрибута первого элемента набора. В качестве параметра передается имя атрибута без префикса data-

  Так, мы можем получить значение атрибута из предыдущего примера следующим образом:

  console.log($('ul').data('year'));

• data(): возвращает объект javascript, который содержит набор атрибутов и их значений в виде пар ключ-значение.

  Например, пусть у нас будет элемент с двумя атрибутами:

  <ul data-year="2010" data-description="lang">

  Тогда метод data() вернул бы объект {description:'lang', year:'2010'}. И чтобы получить значение отдельного атрибута, можно написать так:

  console.log($('ul').data().year);

• data('атрибут', 'новое значение'): устанавливает в качестве значения атрибута строку, переданную в качестве второго параметра:

  $('ul').first().data('year', '2012');

  В качестве нового значения может выступать и целых объект javascript, а данный атрибут будет содержать в качестве значения весь этот объект:

  $('ul').first().data('lang', { rate: "tiobe", year: 2012 });

Если же мы захотим удалить атрибут, то для этого нужно применить метод removeData('название_атрибута'):

$('ul').removeData('year');