Манипуляция элементами в jQuery

В предыдущей главе мы узнали, как получить элементы, используя селекторы и различные методы, как детализировать выборку, оставив в ней только нужные элементы. Однако сама по себе выборка была бы не важна, если бы 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');