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>
