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

Ромчик
0

Уроки по jQueryДоброго времени суток. Мы продолжаем изучать замечательную библиотеку JavaScript – jQuery. Так мы с Вами научились подключать jQuery к проекту, причем остановились на нескольких способах подключения, рассмотрели вопросы связанные с выборкой элементов в jQuery  и остановились на фильтрации элементов выборки , узнали, что такое цепная функция и что такое автоматический цикл в jQuery . Рассмотрели основные методы манипуляции над элементами, остановились на изучении событий. Так в прошлой статье «Изучаем jQuery. Часть 8.3 События»мы приступили к изучению событий связанных с html-формой. И в этой статье мы продолжим изучать эти события.

И первое событие, которое рассмотрим – это событие select.

Событие select()

Событие select() возникает, когда в элементах <textarea> и <input type=’text’> происходит выделение текста.

Рассмотрим пример. Возьмем следующий 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">

<form action="#">

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

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

</form>

</div>

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

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

</div>

<div id="footer">

Footer

</div>

</body>

</html>

Теперь хотим, когда мы выделяем текст в элементе input c id=»name» появилась надпись «Мы выделили текст».

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


$(function(){

$("#name").select(function(){

alert("Мы выделили текст");

});

});

Смотрим, как это выглядит

Событие submit()

Событие submit() возникает, когда происходит отправка формы на сервер. Давайте рассмотрим пример.

Возьмем следующий 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">

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

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

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

<input type="submit">

</form>

</div>

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

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

</div>

<div id="footer">

Footer

</div>

</body>

</html>

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


$(function(){

$('#myform').submit(function(){

alert('Данные были отправлены');

});

});

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

Событие change()

Событие change() возникает, когда данные заданного элемента формы были изменены.

Например, рассмотрим следующий 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">

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

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

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

<input type="submit">

</form>

</div>

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

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

</div>

<div id="footer">

Footer

</div>

</body>

</html>

Теперь, если мы изменим данные в input с id=»name» и отправим их на сервер, то должно появиться сообщение «Данные были изменены». Для этого изменим наш файл скриптов следующим образом:


$(function(){

$('#name').change(function(){

alert('Данные были изменены');

});

});

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

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

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

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

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