JQuery основы. Методы: attr, removeAttr, addClass, removeClass, css, animate. Часть 5
Доброго времени суток. Мы продолжаем изучать 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 свойств элементов.
Читайте также: jQuery addClass и jQuery removeClass
removeClass ( [] )— удаляет указанный класс у всех элементов коллекции. В качестве параметра можно указать несколько классов через пробел. Если название класса не указано, то будут удалены все классы.
Пример
Сделаем такой пример что при нажатии на кнопку с идентификатором input_1. У нас удалятся все классы с именем class1, благодаря методу removeClass(). Таким образом мы видим что у нас два блока div имеют данный класс благодаря которому текст в блоках синий. А после нажатия на кнопку данный класс удаляется и текст станет чорным.
addClass()-добавляет указанный класс всем элементам коллекции. В качестве параметра можно указать несколько названий классов через пробел.
Пример
Напишем простой скрипт что при наведении мыши на блок (div id=»premer_content1″) в блоке (div id=»div_1″) добавится (методом addClass) клас class2, при уходе мыши с блока (div id=»premer_content1″) удалим (методом removeClass) class2 и добавим class1.
$(«.iPad»).click(function(){
event.preventDefault();
$(«#the_best»).attr(‘href, #the_best_ipad’);
});
Сделал как здесь написано но не работает, при клике на ссылку с классом «ipad» у ссылке c id «the_best» должен меняться значение атрибут href на «the_best_ipad» но ничего не происходит подскажите пожалуйста
Нужно так:
$(«.iPad»).click(function(){
event.preventDefault();
$(«#the_best»).attr('href', '#the_best_ipad');
});
в attr, два параметра, а у Вас один
‘href, #the_best_ipad’