Изучаем jQuery. Часть 8.5 События

Ромчик
0

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

И первое событие, которое мы рассмотрим – это событие error()

Событие error()

Событие error() возникает, если при загрузке элемента возникает ошибка. Давайте рассмотрим пример. Возьмем следующий 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"><p>Example</p></div>

<div id="content">

<img id="image" src="/123.png" >

<form action="#"  id="myform">

<p>Введите Ваше имя</p>

<input id="name" type="text" size="40" value="123">

<input type="submit">

<input type="reset">

</form>

</div>

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

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

</div>

<div id="footer">

Footer

</div>

</body>

</html>

Мы вставляем картинку <img id=»image» src=»/123.png» >, которой заведомо нет на сервере, т.е картинка загрузиться не сможет. Теперь если картинка не загружена, то должно появиться  сообщение «Картинка не загружена». Для этого в наш файл со скриптом вставим следующий код:


$(function(){

$('#image').error(function(){

alert('Картинка не загружена');

});

});

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

Событие resize()

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


$(window).resize(function(){

alert('Размеры окна браузера изменилось.');

});

Смотрим демонстрационное видео.

Событие scroll()

Событие scroll() возникает, когда элемент был прокручен. Давайте рассмотрим пример. Возьмем следующи 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"><p>Example</p></div>

<div id="content">

<img id="image" src="/123.png" >

<form action="#"  id="myform">

<p>Введите Ваше имя</p>

<input id="name" type="text" size="40" value="123">

<input type="submit">

<input type="reset">

<p><textarea rows="5" cols="21" name="text" >Пример события scroll Пример события scroll Пример события scroll Пример события scroll Пример события scroll Пример события scroll</textarea></p>

</form>

</div>

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

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

</div>

<div id="footer">

Footer

</div>

</body>

</html>

Теперь, когда мы прокручиваем элемент textarea у нас должно появиться сообщение «Элемент textarea был прокручен. Для этого в файл скриптов добавим следующий код:


$(function(){

$('textarea').scroll(function(){

alert('Элемент textarea был прокручен');

});

});

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

Мы с Вами рассмотрели три события jQuery связанные с браузером. А в следующей, заключительной статье о событиях jQuery, мы остановимся на событиях связанных с загрузкой страницы. Так, что не пропускайте выхода новых статей.

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

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

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