JQuery основы. Методы: attr, removeAttr, addClass, removeClass, css, animate. Часть 5

Ромчик
5

Изучаем jquery

Доброго времени суток. Мы продолжаем изучать 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 свойств элементов.

Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger

  • wdtime - 10.05.2014 в 11:41

    Читайте также: jQuery addClass и jQuery removeClass

  • bkjq - 05.07.2014 в 22:01

    removeClass ( [] )— удаляет указанный класс у всех элементов коллекции. В качестве параметра можно указать несколько классов через пробел. Если название класса не указано, то будут удалены все классы.
    Пример
    Сделаем такой пример что при нажатии на кнопку с идентификатором input_1. У нас удалятся все классы с именем class1, благодаря методу removeClass(). Таким образом мы видим что у нас два блока div имеют данный класс благодаря которому текст в блоках синий. А после нажатия на кнопку данный класс удаляется и текст станет чорным.

  • bkjq - 05.07.2014 в 22:07

    addClass()-добавляет указанный класс всем элементам коллекции. В качестве параметра можно указать несколько названий классов через пробел.
    Пример
    Напишем простой скрипт что при наведении мыши на блок (div id=»premer_content1″) в блоке (div id=»div_1″) добавится (методом addClass) клас class2, при уходе мыши с блока (div id=»premer_content1″) удалим (методом removeClass) class2 и добавим class1.

  • Виталик - 11.02.2017 в 17:56

    $(«.iPad»).click(function(){
    event.preventDefault();
    $(«#the_best»).attr(‘href, #the_best_ipad’);
    });
    Сделал как здесь написано но не работает, при клике на ссылку с классом «ipad» у ссылке c id «the_best» должен меняться значение атрибут href на «the_best_ipad» но ничего не происходит подскажите пожалуйста

    • Ромчик - 11.02.2017 в 18:12

      Нужно так:

      $(«.iPad»).click(function(){
      event.preventDefault();
      $(«#the_best»).attr('href', '#the_best_ipad');
      });

      в attr, два параметра, а у Вас один
      ‘href, #the_best_ipad’

  • ©2012-2017 По всем вопросам обращайтесь через форму обратной связи

    Яндекс.Метрика