Доброго времени суток. Мы продолжаем изучать jQuery. Я напомню, что jQuery — это фреймворк JavaScript. И мы с Вами уже научились делать выборку элементов, делать фильтрацию выборки, производить стандартные операции над элементами без эффектов, производить стандартные операции над элементами с эффектами. А сегодня мы остановимся на изучении методов, которые работают с атрибутами элементов…

На практике достаточно часто необходимо изменять различные атрибуты у html элементов, добавлять и удалять классы, просматривать и изменять различные css-свойства элементов. Для этого в jQuery есть специальные методы, которые мы и рассмотрим.

Метод attr()

Метод attr(key, value) служит для возвращения или изменения значения атрибута у элемента, где:

• key — название атрибута
• value — значение атрибута (если значение указано, то изменяет его, в противном случае просто возвращает)

Например, у div с id=test есть width=300px и мы хотим узнать его ширину

$(document).ready(function(){
 $('#test').attr('width');
})

Метод removeAttr()

Метод removeAttr(key) — удаляет указанный атрибут, где:

• key- название атрибута

Например у нас есть div с id=test есть width=300px и мы хотим удалить данный атрибут:

$(document).ready(function(){
 $('#test').removeAttr('width');
})

Метод addClass()

Метод addClass(name) — добавляет класс к выбранному элементу с именем name.
Например, добавим к div с id=test класс example:

$(document).ready(function(){
 $('#test').addClass('example');
})

Метод removeClass()

Метод removeClass(name) — удаляет класс у элемента с именем name.
Например у нас есть div с id=test и, мы хоти удалить наш класс у данного div-а:

$(document).ready(function(){
 $('#test').removeClass('example');
})

Метод css()

Метод css(name, value) — позволяет получить css свойство элемента с имененем name (если не задано вторым параметром значение данного свойства) или изменять значение css свойства с именем name на значение value (если второй параметр value задан)
Например у нас есть заголовки h1 и мы хотим изменить размер шрифта до 20px, тогда:

$(document).ready(function(){
 $('h1').css('font-size',20);
})

Метод animate()

До сих пор мы рассматривали простое изменение свойств элементов, но в jQuery есть еще один замечательный метод, который позволяет изменять свойства элемента плавно, как бы анимируя его. Это метод animate(settings, time, function), где:

• setting — свойства, которые будут изменять свое значение
• time — время за которое данные свойства будут менять значение
• function — функция, которая начнет свое выполнение после, того как произойдет изменение.

Например у нас есть div с id=test и width=1000px. Мы хотим изменить ширину данного div до 500px за 4 секунды.

$(document).ready(function(){
 $('#test').animate({'width':'500px'},4000);
})

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