008-JQuery 事件
ready(fn) ：当DOM载入就绪可以查询及操纵时绑定一个要执行的函数
1 // 方式一 2 $(document).ready(function(){ 3 // 在这里写你的代码... 4 }); 5 6 // 方式二，简写 7 $(function($) { 8 // 你可以在这里继续使用$作为别名... 9 });
- on(events,[selector],[data],fn) ：在元素上绑定事件处理函数
- off(events,[selector],[fn]) ：在元素上移除事件处理函数
- bind(type,[data],fn) ：为指定元素绑定事件处理函数
- unbind(type,[data|fn]]) ：为指定元素移除绑定的事件处理函数
- one(type,[data],fn) ：为指定元素绑定一次性事件处理函数
- trigger(type,[data]) ：为指定元素触发自定义事件
- triggerHandler(type, [data]) ：为指定元素触发自定义事件，但不会执行浏览器默认动作
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>事件处理</title> 6 <script src="js/jquery-1.8.3.min.js"></script> 7 </head> 8 <body> 9 <div id="box"> 10 box 11 </div> 12 <button>off</button> 13 <script> 14 $("#box").on("click",function () { 15 $(this).css("color","red"); 16 }) 17 $("button").click(function () { 18 $("#box").off("click"); 19 }) 20 </script> 21 </body> 22 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>事件处理</title> 6 <script src="js/jquery-1.8.3.min.js"></script> 7 </head> 8 <body> 9 <div id="box"> 10 box 11 </div> 12 <button>unbind</button> 13 <script> 14 // 方法1：只执行一次的函数 15 $("#box").bind("click",function () { 16 $(this).css("color","red"); 17 $(this).unbind("click"); 18 }); 19 // 方法2：只执行一次的函数 20 $("#box").one("click",function () { 21 $(this).css("color","red"); 22 }) 23 </script> 24 </body> 25 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>事件处理</title> 6 <script src="js/jquery-1.8.3.min.js"></script> 7 </head> 8 <body> 9 <button id="old">.trigger("focus")</button> 10 <button id="new">.triggerHandler("focus")</button><br/><br/> 11 <input type="text" value="To Be Focused"/> 12 <script> 13 $("#old").click(function(){ 14 $("input").trigger("focus"); 15 }); 16 $("#new").click(function(){ 17 $("input").triggerHandler("focus"); 18 }); 19 $("input").focus(function(){ 20 $("<span>Focused!</span>").appendTo("body").fadeOut(1000); 21 }); 22 </script> 23 </body> 24 </html>
- live(type, [data], fn) ：位指定的元素添加事件处理函数，即使这个元素是后来添加的
- die(type, [fn]) ：删除live所添加的事件
- delegate(selector,[type],[data],fn) ：给子元素添加事件处理函数
- undelegate([selector,[type],fn]) ：删除子元素添加的事件处理函数
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>事件委派</title> 6 <script src="js/jquery-1.8.3.min.js"></script> 7 </head> 8 <body> 9 <div id="box"> 10 <p>line</p> 11 </div> 12 <button id="add">添加</button> 13 <button id="del">删除</button> 14 <script> 15 $("#add").click(function () { 16 $("#box").append("<p>new</p>"); 17 }) 18 // 添加委派事件 19 $("p").live("click",function () { 20 $(this).css("color","red"); 21 }) 22 // 删除委派的单击事件 23 $("#del").click(function () { 24 $("p").die("click"); 25 }) 26 </script> 27 </body> 28 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>事件委派</title> 6 <script src="js/jquery-1.8.3.min.js"></script> 7 </head> 8 <body> 9 <div id="box"> 10 <p>line</p> 11 <p>line</p> 12 <p>line</p> 13 <p>line</p> 14 </div> 15 <script> 16 $("#box").delegate("p","click",function () { 17 $(this).css("color","red"); 18 }) 19 </script> 20 </body> 21 </html>
- hover([over,]out) ：鼠标移入/移出时触发的事件
- toggle([speed],[easing],[fn]) ：鼠标点击时触发的切换事件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>事件切换</title> 6 <script src="js/jquery-1.8.3.min.js"></script> 7 <style> 8 .nav{ 9 width:120px; 10 height:40px; 11 color:#fff; 12 background: #000; 13 line-height: 40px; 14 text-align: center; 15 float: left; 16 } 17 .active{ 18 background: #ccc; 19 color: #000; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="nav"> 25 导航 26 </div> 27 <div class="nav"> 28 导航 29 </div> 30 <div class="nav"> 31 导航 32 </div> 33 <div class="nav"> 34 导航 35 </div> 36 <div class="nav"> 37 导航 38 </div> 39 <div class="nav"> 40 导航 41 </div> 42 <div class="nav"> 43 导航 44 </div> 45 <script> 46 $(".nav").hover( 47 function () { 48 $(this).addClass("active"); 49 }, 50 function () { 51 $(this).removeClass("active"); 52 } 53 ); 54 </script> 55 </body> 56 </html>
- blur([[data],fn]) ：当元素失去焦点时触发
- change([[data],fn]) ：当元素值发生改变时触发
- click([[data],fn]) ：单击时触发
- dblclick([[data],fn]) ：双击时触发
- error([[data],fn]) ：发生错误时触发
- focus([[data],fn]) ：获得焦点时触发
- focusin([data],fn) ：获得焦点时触发，可以在父元素上检测子元素获取焦点的情况
- focusout([data],fn) ：当元素失去焦点时触发，可以在父元素上检测子元素获取焦点的情况
- keydown([[data],fn]) ：当键盘或按钮按下时触发
- keypress([[data],fn]) ：当键盘或按钮按下时触发，与keydown不同的是每插入一个字符就会发生keypress事件
- keyup([[data],fn]) ：当按钮被松开时触发
- mousedown([[data],fn]) ：鼠标移动到元素上方并按下时触发
- mouseenter([[data],fn]) ：鼠标移入元素时触发
- mouseleave([[data],fn]) ：鼠标离开元素时触发
- mousemove([[data],fn]) ：鼠标指针在指定的元素中移动时触发
- mouseout([[data],fn]) ：鼠标离开元素或者元素的子元素时触发
- mouseover([[data],fn]) ：鼠标移入元素或者元素的子元素时触发
- mouseup([[data],fn]) ：当在元素上的鼠标按钮松开时触发
- resize([[data],fn]) ：当浏览器窗口调整时触发
- scroll([[data],fn]) ：当用户滚动元素或窗口时触发
- select([[data],fn]) ：当 textarea 或文本类型的 input 元素中的文本被选择时触发
- submit([[data],fn]) ：当提交表单时触发
- unload([[data],fn]) ：当用户离开页面时触发
1 //在服务器端记录JavaScript错误日志: 2 $(window).error(function(msg, url, line){ 3 jQuery.post("js_error_log.php", { msg: msg, url: url, line: line }); 4 }); 5 // 隐藏JavaScript错误 6 $(window).error(function(){ 7 return true; 8 }); 9 //给你IE的用户隐藏无效的图像 10 $("img").error(function(){ 11 $(this).hide(); 12 });
