Изучаем jQuery. Часть 8.4 События
Доброго времени суток. Мы продолжаем изучать замечательную библиотеку 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-формой. А в следующей статье мы рассмотрим события связанные с браузерами так, что не пропускайте выхода новых статей.
