jquery api 常见 事件操作

change.html

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>ready.html</title>
 5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6     <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
 7   </head>
 8   <body>
 9     <select>
10         <option value="bj">北京</option>    
11         <option value="sh">上海</option>    
12         <option value="gz">广州</option>
13     </select>
14     
15     <script type="text/javascript">
16         //当<select>标签触发onchange事件,显示选中<option>的value和innerHTML属性的值
17         $("select").change(function(){
18             var $option = $("select option:selected");
19             var value = $option.val();
20             var html = $option.html();
21             alert(value+":"+html);
22         });
23         
24                 
25     </script>    
26   </body>
27 </html>

focus.html

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>focus.html</title>
 5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6     <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
 7   </head>
 8   <body>
 9     <input type="text" value="加载页面时获取光标并选中所有文字" size="50"/>    
10     <script type="text/javascript">
11         //加载页面时获取光标并选中所有文字
12         $(function(){
13             //将光标定位于文本框
14             var $text = $(":text");
15             //选中文本框中的内容
16             $text.select();            
17         });
18     </script>
19   </body>
20 </html>

keyup.html

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>focus.html</title>
 5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6     <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
 7   </head>
 8   <body>
 9     <script type="text/javascript">
10         //当按键弹起时,显示所按键的code码
11         $(document).keyup(function(){
12             //获取浏览器产生的事件对象,该事件对象,无需程序员代码创建,
13             //是每个浏览器自已产生的,即IE和firefox浏览器产生的事件            
14             //对象可以不同。
15             var code = event.keyCode;
16             alert(code); 
17         });
18     </script>
19   </body>
20 </html>

 


mousemove.html

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>focus.html</title>
 5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6     <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
 7   </head>
 8   <body>
 9   
10       X=<input type="text" id="xID"/>
11     <br/>
12     Y=<input type="text" id="yID"/>
13     
14     <script type="text/javascript">
15             $(document).mousemove(function(){
16                 //显示鼠标移动时的X和Y座标
17                 var x = event.clientX; 
18                 var y = event.clientY;
19                 //将x和y坐标设置到文本框中
20                 $("#xID").val(x); 
21                 $("#yID").val(y); 
22             });
23     </script>
24     
25     
26   </body>
27 </html>

 


mouseover_mouseout.html

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>focus.html</title>
 5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6     <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
 7   </head>
 8   <body>
 9     <table border="2" align="center" width="80%" id="tableID">
10         <tr>
11             <td>张三</td>
12             <td></td>
13             <td>22</td>
14         </tr>
15         <tr>
16             <td>李四</td>
17             <td></td>
18             <td>24</td>
19         </tr>
20         <tr>
21             <td>王五</td>
22             <td></td>
23             <td>26</td>
24         </tr>
25         <tr>
26             <td>周六</td>
27             <td></td>
28             <td>28</td>
29         </tr>
30     </table>
31     <hr/>
32     <img height="120px" src="../images/zgl.jpg" style="position:absolute;left:30%"/>
33     <img height="120px" src="../images/lb.jpg" style="position:absolute;left:60%"/>
34     <script type="text/javascript">
35     //鼠标移到某行上,某行背景变色,字体加租
36     $("table tr").mouseover(function(){
37         $(this).css("background-color","#AABBCC");
38     });
39     //鼠标移出某行,某行还原
40     $("table tr").mouseout(function(){
41         $(this).css("background-color","white");
42     });
43     //鼠标移到某图片上,为图片加边框
44     $("img").mouseover(function(){
45         $(this).css("border-style","ridge");
46     });
47     //鼠标移出图片,图片还原
48         $("img").mouseout(function(){
49             $(this).css("border-style","none");
50     });
51     </script>
52   </body>
53 </html>

 


ready.html

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>ready.html</title>
 5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6     <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
 7   </head>
 8   <body>
 9     <script type="text/javascript">
10         //定义a()和b()二个方法
11         function a(){
12             alert("a");
13         }
14         function b(){
15             alert("b");
16         }
17         /*使用DOM方式加载a()和b()二个方法
18           window.onload = function(){
19               a();
20           }
21           window.onload = function(){
22               b();
23           }
24           */
25         /*使用jQuery方式加载a()和b()二个方法
26           $(document).ready(function(){
27               a();
28           });
29           $(document).ready(function(){
30               b();
31           });
32           */
33         
34         //使用jQuery最简方式加载a()和b()二个方法
35           $(function(){
36               a();
37           });
38           $(function(){
39               b();
40           });
41     </script>          
42   </body>
43 </html>

 


submit.html

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>ready.html</title>
 5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6     <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
 7   </head>
 8   <body>
 9       <form action="submit.html" method="post">
10         <select>
11             <option value="bj">北京</option>    
12             <option value="sh" selected>上海</option>    
13             <option value="gz">广州</option>
14         </select>
15         <input type="submit" value="表单提交"/>
16     </form>
17     <script type="text/javascript">
18         //当表单提交前检测
19         $("form").submit(function(){
20             //..
21             return false;
22         });
23     </script>
24   </body>
25 </html>

 

jquery api 常见 事件操作,布布扣,bubuko.com

jquery api 常见 事件操作

上一篇:使用WebMatrix发布网站到Windows Azure


下一篇:Find Query Window的运作(手电筒)