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