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

Ромчик
1

Уроки по jQuery

Доброго времени суток. Данная статья является дополнением к статье «Изучаем jQuery. Часть 7.1 Методы манипуляции над элементами». В данной статье Вы не узнаете ничего нового. Но в этой статье Вы найдете видео с примерами демонстрации методов. Так, что если интересно, то вперед…

Метод hide()

Рассмотрим html-код:


<!doctype html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<link href="./css/style.css" rel="stylesheet" media="screen">

<script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript" src="./js/script.js"></script>

<title>Изучаем jQuery</title>

</head>

<body>

<div id="wrapper">

<div id="header" align="center">Header</div>

<div id="example">Example</div>

<div id="content">

<p>Content</p>

<p>Test</p>

</div>

<div id="sidebar"><span>Sidebar</span></div>

<div id="clear"></div>

</div>

<div id="footer">

Footer

</div>

</body>

</html>

С помощью метода hide мы хотим скрыть элемент div с id=»example» за четыре секунды. Для этого в нашем файле скриптов добавляем следующий код:


$(function(){

$("#example").hide(4000);

});

Посмотрим, что получилось.

Метод show()

Рассмотрим html-код приведенный выше. Давайте сделаем, чтобы div с id=»example» скрылся за четыре секунды (это мы проделали выше). А затем снова появился за четыре секунды. Для этого мы будем использовать метод show(). Напишем в наш файл скриптов следующий код:


$(function(){

$("#example").hide(4000);

$("#example").show(4000);

});

Но так, лучше не делать мы два раза выбираем один и тот же элемент, а это дольше работает плюс забирает лишние ресурсы. Изменим наш код:


$(function(){

var a = $("#example").hide(4000);

a.show(4000);

});

Что мы сделали? Просто в переменную а поместили нашу выборку.

Давайте посмотрим, что получилось.

Метод toggle()

Возьмем html-код приведенный выше. Теперь мы хотим, чтобы элемент div c id=»example» исчез, если он был видим за четыре секунда или появился, если он был невидим за четыре секунды. Для этого используем метод toggle(). Добавим в наш файл скриптов следующий код:


$(function(){

$("#example").toggle(4000);

});

Теперь не меняя скрипта изменим html-код (скроем элемент div с id=»example»):


<!doctype html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<link href="./css/style.css" rel="stylesheet" media="screen">

<script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript" src="./js/script.js"></script>

<title>Изучаем jQuery</title>

</head>

<body>

<div id="wrapper">

<div id="header" align="center">Header</div>

<div id="example" style="display:none">Example</div>

<div id="content">

<p>Content</p>

<p>Test</p>

</div>

<div id="sidebar"><span>Sidebar</span></div>

<div id="clear"></div>

</div>

<div id="footer">

Footer

</div>

</body>

</html>

Проверим, что получилось.

Метод fadeOut()

Рассмотрим html-код:


<!doctype html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<link href="./css/style.css" rel="stylesheet" media="screen">

<script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript" src="./js/script.js"></script>

<title>Изучаем jQuery</title>

</head>

<body>

<div id="wrapper">

<div id="header" align="center">Header</div>

<div id="example">Example</div>

<div id="content">

<p>Content</p>

<p>Test</p>

</div>

<div id="sidebar"><span>Sidebar</span></div>

<div id="clear"></div>

</div>

<div id="footer">

Footer

</div>

</body>

</html>

Теперь мы хотим, чтобы элемент div с id=»example» растворился за четыре секунды. Для этого и применяется метод fadeOut(). Добавим в наш файл скриптов следующий код:


$(function(){

$("#example").fadeOut(4000);

});

Посмотрим, что получилось.

Метод fadeIn()

Рассмотрим html-код, в котором элемент div с id=»example» скрыт


<!doctype html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<link href="./css/style.css" rel="stylesheet" media="screen">

<script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript" src="./js/script.js"></script>

<title>Изучаем jQuery</title>

</head>

<body>

<div id="wrapper">

<div id="header" align="center">Header</div>

<div id="example" style="display:none">Example</div>

<div id="content">

<p>Content</p>

<p>Test</p>

</div>

<div id="sidebar"><span>Sidebar</span></div>

<div id="clear"></div>

</div>

<div id="footer">

Footer

</div>

</body>

</html>

Мы хотим, чтоб элемент div с id=»example» появился меняя свою прозрачность за четыре секунды. Для этого и используется метод fadeIn().

Добавим следующий код в наш файл скриптов:


$(function(){

$("#example").fadeIn(4000);

});

Проверим, что у нас получилось.

Метод fadeTo()

Рассмотрим предыдущий html-код. Элемент div с id=»example» скрыт. Мы хотим, что бы этот элемент изменил свою прозрачность до 0.5 за две секунды. Для этого используется метод fadeTo(). В файл скриптов добавим следующий код:


$(function(){

$("#example").fadeTo(2000,0.5);

});

Посмотрим, что получилось.

Метод fadeToggle()

Рассмотрим html-код:


<!doctype html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<link href="./css/style.css" rel="stylesheet" media="screen">

<script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript" src="./js/script.js"></script>

<title>Изучаем jQuery</title>

</head>

<body>

<div id="wrapper">

<div id="header" align="center">Header</div>

<div id="example">Example</div>

<div id="content">

<p>Content</p>

<p>Test</p>

</div>

<div id="sidebar"><span>Sidebar</span></div>

<div id="clear"></div>

</div>

<div id="footer">

Footer

</div>

</body>

</html>

Элемент div c id=»example» не скрыт. Нам необходимо сделать так, чтобы, если div c id=»example» не скрыт, то скрыть его, а если этот элемент скрыть, то показать его путем изменения прозрачности. Для этого используется метод fadeToggle(). Добавим в наш файл скриптов следующий код:


$(function(){

$("#example").fadeToggle(4000);

});

Посмотрим, что получилось. Затем добавим к элементу div с id=»example» сттиль, который его спрячет. И посмотрим опять, что получилось.

Смотрим видео.

Метод slideUp()

Рассмотрим html-код:


<!doctype html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<link href="./css/style.css" rel="stylesheet" media="screen">

<script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript" src="./js/script.js"></script>

<title>Изучаем jQuery</title>

</head>

<body>

<div id="wrapper">

<div id="header" align="center">Header</div>

<div id="example">Example</div>

<div id="content">

<p>Content</p>

<p>Test</p>

</div>

<div id="sidebar"><span>Sidebar</span></div>

<div id="clear"></div>

</div>

<div id="footer">

Footer

</div>

</body>

</html>

Теперь мы хотим, чтобы элемент div с id=»example» свернулся вверх за четыре секунды. Для этого используется метод sladeUp(). Добавим следующий код в наш файл скриптов:


$(function(){

$("#example").slideUp(4000);

});

Давайте посмотрим, что получилось.

Метод slideDown()

Рассмотрим следующий html-код:


<!doctype html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<link href="./css/style.css" rel="stylesheet" media="screen">

<script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript" src="./js/script.js"></script>

<title>Изучаем jQuery</title>

</head>

<body>

<div id="wrapper">

<div id="header" align="center">Header</div>

<div id="example" style="display:none">Example</div>

<div id="content">

<p>Content</p>

<p>Test</p>

</div>

<div id="sidebar"><span>Sidebar</span></div>

<div id="clear"></div>

</div>

<div id="footer">

Footer

</div>

</body>

</html>

Как видим элемент div с id=»example» скрыт. Теперь мы хотим, чтобы этот элемент развернулся за четыре секунды. Для этого используется метод sladeDown(). Давайте в наш файл скриптов поместим следующий код.


$(function(){

$("#example").slideDown(4000);

});

Смотрим, что получилось.

Метод slideToggle()

Метод slideToggle() разворачивает элемент, если он свернуть, и сворачивает, если элемент развернут.

Рассмотрим предыдущий html-код. Наш элемент div с id=»example» свернут. Применим к нему метод slideToggle(4000), чтобы он развернулся за четыре секунды. В файл со скриптами добавим следующий код:


$(function(){

$("#example").slideToggle(4000);

});

Теперь рассмотрим следующий html-код:


<!doctype html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<link href="./css/style.css" rel="stylesheet" media="screen">

<script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript" src="./js/script.js"></script>

<title>Изучаем jQuery</title>

</head>

<body>

<div id="wrapper">

<div id="header" align="center">Header</div>

<div id="example">Example</div>

<div id="content">

<p>Content</p>

<p>Test</p>

</div>

<div id="sidebar"><span>Sidebar</span></div>

<div id="clear"></div>

</div>

<div id="footer">

Footer

</div>

</body>

</html>

Т.е. элемент div с id=»example» развернут. Теперь обновим страницу. Элемент div c id=»example» должен свернуться.

Смотрим.

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

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

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

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

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