首页 > 代码库 > jquery api 常见 事件操作
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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。