标签：
$(document).ready()/$()：
DOM完全就绪时执行注册的函数而不用等到所有的元素完全加载到浏览器后才执行。
1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="js/jquery-1.11.3.js"></script> 7 <script type="text/javascript"> 8 $(function(){ 9 var title = $("ul li:first").attr("title"); 10 alert(title); 11 }); 12 </script> 13 </head> 14 <body> 15 <p title="选择你最喜欢的水果.">你最喜欢的水果是？</p> 16 <ul> 17 <li title="苹果">苹果</li> 18 <li title="橘子">橘子</li> 19 <li title="菠萝">菠萝</li> 20 </ul> 21 </body> 22 </html>
load()：
在元素的onload事件中绑定处理函数，在元素的内容加载完毕后触发。
1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="js/jquery-1.11.3.js"></script> 7 <script type="text/javascript"> 8 $(function(){ 9 $(window).load(function(){ 10 alert($("ul li:last").attr("title")); 11 }); 12 }); 13 </script> 14 </head> 15 <body> 16 <p title="选择你最喜欢的水果.">你最喜欢的水果是？</p> 17 <ul> 18 <li title="苹果">苹果</li> 19 <li title="橘子">橘子</li> 20 <li title="菠萝">菠萝</li> 21 </ul> 22 </body> 23 </html>
bind()：
用来匹配元素进行特定事件的绑定。
参数有(type [,data],fn)，事件类型包括blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、error，可以使用自定义名称。数据对象包含在event.data对象中。
1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="js/jquery-1.11.3.js"></script> 7 <script type="text/javascript"> 8 $(function(){ 9 $("ul li") 10 .bind("mouseover",function(){ 11 $(this).attr("style","background-color:#f00") 12 }) 13 .bind("mouseout",function(){ 14 $(this).attr("style","background-color:#fff").trigger("outed"); 15 }).bind("outed",function(){ 16 alert("outed"); 17 }); 18 }); 19 </script> 20 </head> 21 <body> 22 <p title="选择你最喜欢的水果.">你最喜欢的水果是？</p> 23 <ul> 24 <li title="苹果">苹果</li> 25 <li title="橘子">橘子</li> 26 <li title="菠萝">菠萝</li> 27 </ul> 28 </body> 29 </html>
hover()：
用于模拟鼠标悬停事件。
参数有(enter,leave)。
1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="js/jquery-1.11.3.js"></script> 7 <script type="text/javascript"> 8 $(function(){ 9 $("ul li").hover(function(){ 10 $(this).attr("style","background-color:#0f0") 11 },function(){ 12 $(this).attr("style","background-color:#fff") 13 }); 14 }); 15 </script> 16 </head> 17 <body> 18 <p title="选择你最喜欢的水果.">你最喜欢的水果是？</p> 19 <ul> 20 <li title="苹果">苹果</li> 21 <li title="橘子">橘子</li> 22 <li title="菠萝">菠萝</li> 23 </ul> 24 </body> 25 </html>
toggle()：
用于模拟鼠标连续单击事件。
参数有(fn1,fn2,...fnn)。
1 <script type="text/javascript"> 2 $(function(){ 3 $("ul li").toggle(function(){ 4 $(this).attr("style","background-color:#f00"); 5 },function(){ 6 $(this).attr("style","background-color:#0f0"); 7 },function(){ 8 $(this).attr("style","background-color:#00f"); 9 }); 10 }); 11 </script>
事件冒泡：
当一个元素嵌套在另一个元素里并且都被绑定了click事件，则每一个元素都会按照特定的顺序响应click事件。
1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6 <script type="text/javascript" src="js/jquery-1.11.3.js"></script> 7 <script type="text/javascript"> 8 $(function(){ 9 $("span").bind("click",function(){ 10 var txt = $("#msg").html() + "<p>内层span元素被单击.</p>"; 11 $("#msg").html(txt); 12 }); 13 $("#content").bind("click",function(){ 14 var txt = $("#msg").html() + "<p>外层div元素被单击.</p>"; 15 $("#msg").html(txt); 16 }); 17 $("body").bind("click",function(){ 18 var txt = $("#msg").html() + "<p>body元素被单击.</p>"; 19 $("#msg").html(txt); 20 }); 21 }); 22 </script> 23 </head> 24 <body> 25 <div id="content"> 26 外层div元素 27 <span>内层span元素</span> 28 外层div元素 29 </div> 30 <div id="msg"></div> 31 </body> 32 </html>
事件对象：
jQuery对原始事件对象进行了封装和扩展，以便简化事件对象的使用。
event.type-获取事件类型。
event.stopPropagation()-用于停止事件冒泡，阻止事件中其他对象的事件处理函数被执行。
1 <script type="text/javascript"> 2 $(function(){ 3 $("span").bind("click",function(event){ 4 var txt = $("#msg").html() + "<p>内层span元素被单击.</p>"; 5 $("#msg").html(txt); 6 event.stopPropagation(); 7 }); 8 $("#content").bind("click",function(){ 9 var txt = $("#msg").html() + "<p>外层div元素被单击.</p>"; 10 $("#msg").html(txt); 11 }); 12 $("body").bind("click",function(){ 13 var txt = $("#msg").html() + "<p>body元素被单击.</p>"; 14 $("#msg").html(txt); 15 }); 16 }); 17 </script>
event.preventDefault()-用于阻止默认行为。
如果要同时停止冒泡和默认行为，可以在事件处理函数中返回false。
event.target-获取触发事件的元素
event.relatedTarget-获取鼠标移动事件中移入或移出的元素。
event.pageX-获取光标相对于页面的X坐标，如果页面上有滚动条，则要加上滚动条的宽度。
event.pageY-获取光标相对于页面的Y坐标，如果页面上有滚动条，则要加上滚动条的高度。
event.which-在鼠标单击事件中获取鼠标的左、中、右键；在键盘事件中获取键盘的按键。
event.metaKey-获取键盘事件中的ctrl按键。
unbind()：
用于移除绑定的事件。
参数有([type],[data])，如果没有参数，则删除所有绑定的事件；如果有type参数，则删除指定类型的事件；如果把在绑定时传递的处理函数作为第2个参数，则只有这个特定的事件处理函数会被删除。
one()：
用于绑定只会触发一次的函数。
trigger()：
用于模拟用户操作。
参数有(type,[data])，第1个参数时要触发的事件类型，第2个参数时要传递给事件处理函数的附加数据，以数组形式传递。
triggerHandler()：
用于触发元素上绑定的特定事件，同时取消浏览器对此事件的默认操作。
事件命名空间：
用于把为元素绑定的多个事件类型用命名空间规范起来，以方便集合操作。
$().trigger("name!")：
用于匹配所有不包含在命名空间中的click方法。
标签：
原文地址：http://www.cnblogs.com/qhdxqxx/p/5159276.html
