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

Ромчик
2

Уроки по jQuery

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

Методы jQuery позволяют нам производить некоторые действия над выбранными элементами.

И первый метод, который мы рассмотрим — это метод скрытия элемента.

hide() — метод скрытия элемента

Для того, чтобы скрыть выбранные элементы к ним необходимо применить метод hide. Метод hide (t, l), где t — время продолжительности скрытия элемента, l — функция, которая выполнится после скрытия элемента. Скрытие элемента происходит путем уменьшения высоты и ширины до 0. Например, мы хотим скрыть div с id равным example:


$('div#example').hide();

В этом случае наш элемент исчезнет мгновенно.

Если же мы зададим какое-то время на скрытие, например 4000мс


$('div#example').hide('4000');

То, наш элемент div будет исчезать в течении 4 секунд путем уменьшения его ширины и высоты до 0.

Пример действия данного метода можно посмотреть тут.

show() — метод отображения элемента

Противоположный предыдущему методу — метод отображения элемента. Метод show (t, l) — отображает элемент, где t — время продолжительности отображения элемента, l — функция, которая выполниться после отображения элемента. Метод show действует аналогично методу hide, только не скрывает элемент, а отображает его.

Пример действия данного метода можно посмотреть тут.

toggle() — метод отображения/скрытия элемента

Метод toggle действует аналогично предыдущим методам. Только метод toggle скрывает элемент, если он был не скрыт и отображает элемент, если он был скрыт. Все остальное аналогично методам hide и show.

Заметьте методы hide, show и toggle скрывают элементы не изменяя их прозрачности.

Пример действия данного метода можно посмотреть тут.

fadeOut() — метод плавного исчезновения элемента

Метод fadeOut (t,l) — плавно скрывает элемент путем изменения его прозрачности, где t — время скрытия элемента, l — функция, которая выполнится после исчезновения элемента.

Ну и пример. Теперь мы хотим скрыть div с id равным example путем плавного его исчезновения на протяжении 4 секунд, путем изменения прозрачности.


$('div#example').fadeOut('4000');

Пример действия данного метода можно посмотреть тут.

fadeIn() — метод плавного появления элемента

Метод fadeIn противоположен предыдущему методу. Данный метод отображает элемент путем изменения его прозрачности.

Пример действия данного метода можно посмотреть тут.

fadeTo() — метод плавного изменения прозрачности до указанного значения

Если мы не хотим, чтобы элемент полностью исчез или появился, как это делают методы fadeOut и fadeIn, то мы можем воспользоваться методом fadeTo.

fadeTo(t,o,l) — изменяет прозрачность элемента до указанного значения o ( o изменяется от 0 до 1) за время t. L — это функция, которая выполниться после того, как элемент достигнет указанной прозрачности.

Пример действия данного метода можно посмотреть тут.

fadeToggle() — метод плавного появления/скрытия элемента

Метод по своему действию аналогичен методам fadeIn и fadeOut. Если мы к элементу применим метод fadeToggle, то элемент появиться, если он был скрыт и исчезнет, если он был видим. Появления и исчезновение элемента происходит путем изменения его прозрачности.

Пример действия данного метода можно посмотреть тут.

slideUp() — метод плавного сворачивания элемента

Метод slideUp(t,l) позволяет нам свернуть выбранный элемент путем изменения его высоты, где t — время сворачивания элемента, l — функция, которая будет выполнена после сворачивания элемента.

Пример действия данного метода можно посмотреть тут.

slideDown() — метод плавного разворачивания элемента

Метод slideDown противоположен по своему назначению предыдущему методу.

Пример действия данного метода можно посмотреть тут.

slideToggle() — метод плавного сворачивания/разворачивания элемента

Метод slideToggle (t,l) аналогичен методам slideUp и slideDown. Данный метод свернет элемент, если он был развернут и развернет — если элемент свернут за время t. L — это функция, которая выполниться после того как элемент будет полностью свернут/развернут.

Пример действия данного метода можно посмотреть тут.

Мы с Вами рассмотрели основные методы jQuery, которые скрывают или отображают элементы. На этом я данную статью завершаю, но не завершаю рассмотрение методов jQuery. Так, что не пропускайте выхода новых статей подписавшись на RSS моего блога или подписавшись на email рассылку, Вы также можете следить за обновлениями блога в группе в Вконтакте или в facebook.

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

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