jQuery常用事件详解
window.onload：在浏览器加载web页面时触发，可以写多次onload事件，但后者覆盖前者
ready：在浏览器加载web页面时触发，可以写多次ready事件，不会后者覆盖前者，依次从上向下执行，我们常用$(函数)简化，ready和onload同时存在时，二者都会触发执行，ready先于onload执行
<body> <script type="text/javascript"> //定义a()和b()二个方法 function a() { alert("JS方式"); } function b() { alert("JQUERY方式"); } //使用JS方式加载a() window.onload = function() { a(); } //使用jQuery方式加载b()方法 $(document).ready(function() { b(); }); //使用jQuery最简方式加载b()方法 $(function() { b(); }); //将js方式的onload与jquery方式的ready对比，看哪个执行快 window.onload = function() { alert("传统"); } $(function() { alert("现代"); }); </script> </body>
change：当内容改变时触发
<body> <select id="city"> <option value="bj">北京</option> <option value="sh">上海</option> <option value="gz">广州</option> </select> <script type="text/javascript"> //当<select>标签触发onchange事件,显示选中<option>的value和innerHTML属性的值 $("#city").change(function() { var $option = $("#city option:selected"); var value = $option.val(); var text = $option.text(); alert(value + ":" + text); }); </script> </body>
focus：焦点获取
select：选中所有的文本值
<body> <input type="text" value="加载页面时获取光标并选中所有文字" size="50" /> <script type="text/javascript"> //加载页面时获取光标并选中所有文字 $(function() { //光标定位文本框 $(":text").focus(); //选中文本框的所有文本 $(":text").select(); }); </script> </body>
keyup/keydown/keypress（这几个事件发生的顺序是:keydown,keypress,keyup）
<body> <script type="text/javascript"> //当按键弹起时，显示所按键的unicode码 $(function() { //IE浏览器会自动创建event这个事件对象，那么程序员可以根据需要来使用该event对象 $(document).keyup(function() { //获取按钮的unicode编码 var code = event.keyCode; alert(code); }); $(document).keydown(function() { //获取按钮的unicode编码 var code = event.keyCode; alert(code); }); $(document).keypress(function() { //获取按钮的unicode编码 var code = event.keyCode; alert(code); }); }); </script> </body>
mousemove：在指定区域中不断移动触发
mouseover：鼠标移入时触发
mouseout：鼠标移出时触发
<body> X=<input type="text" id="xID" /><br /> Y=<input type="text" id="yID" /> <script type="text/javascript"> //显示鼠标移动时的X和Y座标 $(function() { $(document).mousemove(function() { var x = event.clientX; var y = event.clientY; $("#xID").val(x); $("#yID").val(y); }); }); </script> </body>
<body> <table border="2" align="center" width="80%" id="tableID"> <tr> <td>张三</td> <td>男</td> <td>22</td> </tr> <tr> <td>李四</td> <td>男</td> <td>24</td> </tr> </table> <hr /> <img height="120px" src="../images/zgl.jpg" style="position:absolute;left:30%;border-style:dashed;border-color:white" /> <img height="120px" src="../images/lb.jpg" style="position:absolute;left:60%;border-style:dashed;border-color:white" /> <script type="text/javascript"> //鼠标移到某行上，某行背景变色 $("table tr").mouseover(function() { $(this).css("background-color", "blue"); }); //鼠标移出某行，某行还原 $("table tr").mouseout(function() { $(this).css("background-color", "white"); }); //鼠标移到某图片上，为图片加边框 $("img").mouseover(function() { $(this).css("border-color", "red"); }); //鼠标移出图片，图片还原 $("img").mouseout(function() { $(this).css("border-color", "white"); }); </script> </body>
submit：在提交表单时触发，true表示提交到后台，false表示不提交到后台
<body> <form action="xxx.html" method="post"> 用户名：<input type="text" /> <input type="submit" value="表单提交" /> </form> <script type="text/javascript"> //浏览器加载web页面时触发 $(function(){ //将光标定位于文本框中 $(":text").focus(); }); //检测是否为中文，true表示是中文，false表示非中文 function isChinese(str){ if(/^[\u3220-\uFA29]+$/.test(str)){ return true; }else{ return false; } } //当表单提交前检测 $("form").submit(function(){ var flag = false; //获取文本框的中内容 var name = $(":text").val(); //去二边的空格 name = $.trim(name); //如果没有填内容 if(name.length == 0){ alert("用户名必填"); //将光标定位于文本框中 $(":text").focus(); //清空文本框中的内容 $(":text").val(""); }else{ //调用方法 flag = isChinese(name); //如果不是中文 if(!flag){ alert("用户名必须填中文"); //将光标定位于文本框中 $(":text").focus(); //清空文本框中的内容 $(":text").val(""); } } return flag; }); </script> </body>
