Изучаем jQuery. Часть 7.3 Методы манипуляции над элементами

Ромчик
1

Уроки по jQuery

Доброго времени суток. Мы продолжаем изучать jQuery, а точнее методы манипуляции над элементами. И это уже третий пост посвященный методам манипуляций над элементами первые две статьи Вы можете прочитать по ссылкам https://web-programming.com.ua/izuchaem-jquery-chast-7-1-metody-manipulyacii-nad-elementami/ и https://web-programming.com.ua/izuchaem-jquery-chast-7-2-metody-manipulyacii-nad-elementami/

Ну, что ж приступим.

Хочу немного напомнить: прежде, чем использовать какой-либо из методов над элементом необходимо вначале выбрать этот элемент. Как выбрать элементы Вы можете прочитать в моих статьях: «Изучаем jQuery. Часть 3. Выборка элементов» и «Изучаем jQuery. Часть 4. Фильтры».

После того, как мы выбрали необходимые элементы или элемент мы можем применить к ним один из методов, например, метод получения или изменения ширины.

width() — метод получения или изменения ширины

Если нам необходимо получить или изменить ширину первого элемента из выборки, то применяется метод width(). Если данный метод применяется без дополнительного параметра, то он вернет нам текущее значение ширины. Если же мы передадим этому методу параметр, то данный метод изменит ширину элемента. Например, у нас есть div с id равны id и мы хотим узнать его ширину:


$('#id').width();

Или, если мы хотим установить у div с id равным id ширину равную 150px, то:


$('#id').width(150);

Как видите ничего сложного нет. Аналогичный метод есть и для получения или изменения высоты.

height() — метод для получения или изменения высоты

Если нам необходимо получить или изменить высоту у первого элемента из выборки, то применяется метод height(). Если данный метод применяется без дополнительного параметра, то он вернет значения высоты у данного элемента, если же мы добавим к методу параметр, то данный метод установить новую высоту элемента согласно этому параметру.

Например, мы хотим узнать высоту элемента div с id равным id:


$('#id').height();

Если же мы хотим установить у этого элемента новую высоту, например, в 50px, то:


$('#id').height(50);

Аналогично мы можем получать и изменять значение у элемента.

attr() — метод получения и изменение атрибута

Если мы хотим получить или изменить атрибут у элемента, то нам необходимо использовать метод attr(). Метод attr([attr],[значение]) принимает два параметра [attr] — обязательный параметр название атрибута и [значение] — не обязательный параметр значение атрибута.

Допустим у нас есть картинка img c id равным id и у неё есть атрибут alt, который мы хотим узнать:


$('#id').attr('alt');

Теперь мы хотим изменить у данной картинки атрибут alt на «это новое значение атрибута»:


$('#id').attr('alt','это новое значение атрибута');

Но иногда у элемента необходимо не изменить, а удалить атрибут.

removeAttr() — метод удаления атрибута

Для удаления атрибута у элемента применяется метод removeAttr(). Метод removeAttr(‘<название атрибута>’) в качестве параметра принимает один обязательный параметр — название атрибута. Возьмем пример из предыдущего метода. У картинки img с id равным id мы хотим удалить атрибут alt:


$('#id').removeAttr('alt');

Довольно часто приходиться добавлять или удалять класс у элемента. Класс тоже является атрибутом элемента и можно воспользоваться предыдущими методами. Но в jQuery для добавления и удаления класса элементу есть специальные методы.

addClass() — метод добавления класса

Если мы хотим какому-то элементу добавить класс, то используем метод addClass(). Метод addClass(‘<названеи класса>’) принимает один обязательный параметр название класса. Тут бы я хотел заметить, что метод addClass добавляет, а не замещает класс. Например, у нас есть div с class равным class и мы хотим добавить этому элементу еще один класс red.


$('.class').addClass('red');

Теперь у нас получился:


<div class='class red'>...</div>

removeClass() — метод удаления класса

Противоположный предыдущему методу метод removeClass, который удаляет у элемента указанный класс. Метод removeClass(‘<название класса>’) принимает один обязательный параметр — название класса. Например, у нас есть:


<div class='class red'>...</div>

И мы хотим удалить у этого элемента класс red


$('.class').removeClass('red');

toggleClass() — метод добавления(если класса нет) или удаления (если класс есть)

Метод toggleClass(<название класса>) позволяет добавить класс к элементу, если этого класса нет у элемента или удалить, если заданный класс уже есть у элемента. В качестве параметра принимает обязательный параметр — название класса.

Довольно часто приходиться получать или изменять CSS свойства у элемента напрямую и для этого в jQuery есть свой метод.

css() — метод получения или изменения CSS свойств

Если нам необходимо получить или изменить CSS свойство у элемента, то используется метод css(). Метод css(‘<название свойства>’, ‘<значение свойства>’) принимает два параметра: <название свойства> — обязательный параметр и <значение свойства> — не обязательный параметр. Если мы хотим получить значение свойства, то параметр <значение свойства> опускается, если же мы хотим изменить значение свойства, то это значение задается в параметре <значение свойства>.

Тут необходимо заметить, что при получении значения CSS свойства мы получаем значение только у первого элемента из выборки. И второе на что надо обратить внимание при получении значения свойства мы получаем значение в rgb.

Например, у нас есть элемент div с id равным id и мы хотим получить значение его CSS свойства background-color:


$('#id').css('background-color');

Теперь мы хотим изменить у этого элемента CSS свойство background-color на #39a32e:


$('#id').css('background-color','#39a32e');

Но иногда CSS свойства необходимо изменить за определенное время, т.о. создается эффект анимации. И для этого случая в jQuery есть свой метод.

animate() — метод анимации (метод изменения CSS свойств за заданное время)

Если нам необходимо получить эффект анимации или другими словами изменить CSS свойства у элемента за определенное время, то используется метод animate(). Метод animate(‘<название свойства : значение>’, ‘<время>’) принимает два параметра первый — это пара название свойства и его конечное значение и второй параметр — это время за которое должно произойти изменение.

Например, у нас есть элемент div c id равным id и мы хотим изменить его CSS свойство margin-top на 100px за 4 секунды:


$(#id).animate({marginTop: '100'}, 4000);

Тут следует заметить, что наше CSS свойство состоит из слов разделенных дефисом. Если мы в jQuery запишем также, то jQuery не поймет. Двойные слова необходимо записывать так: первое слово, а затем без дефисов и пробелов второе слово с большой буквы.

Мы с Вами рассмотрели еще несколько методов манипуляции над объектами jQuery. А на этом пока все.

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

  • Изучаем jQuery. Часть 7.4 Методы манипуляции над элементами | Все о WEB программировании - 23.07.2013 в 09:01

    […] Доброго времени суток. Мы продолжаем изучать фреймворк JavaScript — jQuery, а точнее методы манипуляции над элементами. Прежде чем приступить к манипулированию над объектами jQuery необходимо выбрать эти объекты. Как правильно выбрать элемент Вы можете прочитать в моей статье «Изучаем jQuery. Часть 3. Выборка элементов», а чтобы более точно отобрать элементы можно воспользоваться фильтрами. О фильтрах Вы можете прочитать в статье «Изучаем jQuery. Часть 4. Фильтры». И уже после можно производит какие-либо действия. Так мы с Вами уже рассмотрели три статьи посвященных методам jQuery http://web-programming.com.ua/izuchaem-jquery-chast-7-1-metody-manipulyacii-nad-elementami/ , http://web-programming.com.ua/izuchaem-jquery-chast-7-2-metody-manipulyacii-nad-elementami/ , http://web-programming.com.ua/izuchaem-jquery-chast-7-3-metody-manipulyacii-nad-elementami/ […]

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

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