第二十二节 jQuery事件 

 1 <!-- 事件函数列表：
 2         blur() 元素失去焦点
 3         focus() 元素获得焦点
 4         click() 鼠标单击
 5         mouseover() 鼠标进去（进入子元素也触发）
 6         mouseout() 鼠标离开（离开子元素也触发）
 7         mouseenter() 鼠标进入（进入子元素不触发）
 8         mouseleave() 鼠标离开（离开子元素不触发）
 9         hover() 同时为mouseenter和mouseleave事件指定函数
10         ready() DOM加载完成
11         resize() 浏览器窗口的大小发生改变
12         scroll() 滚动条的位置发生变化
13         submit() 用户递交表单
14          -->
15 <!DOCTYPE html>
16 <html lang="en">
17 <head>
18     <meta charset="UTF-8">
19     <title>Document</title>
20     <script type="text/javascript" src="../jquery-1.12.4.min.js"></script>
21     <script type="text/javascript">
22         $(function(){
23 
24             // 在获取焦点的时候做什么事情
25             /*
26             $('#input01').focus(function(){
27                 alert('获取焦点');
28             })
29             */
30             
31             // 一进入页面就获取输入框焦点，提高用户体验
32             $('#input01').focus();
33 
34             // 失去焦点，用于表单提交时如果用户输入不规范，弹窗提醒
35             $('#input01').blur(function(){
36                 var sVal = $(this).val();
37                 //  获取input里的值
38                 alert(sVal);
39             })
40 
41             $('#form1').submit(function(){
42                 // alert('已提交');
43                 
44             
45                 // 阻止默认提交行为
46                 return false;
47             })
48         });
49     </script>
50 </head>
51 <body>
52     <form id="form1">
53         <input type="text" name="" id="input01">
54         <input type="text" name="" id="input02">
55         <input type="submit" name="" value="提交" id="sub">
56     </form>
57 </body>
58 </html>

 

posted @ 2020-03-14 19:42  kog_maw  阅读(111)  评论(0)    收藏  举报