锋利的JQuery-Jquery中的事件和动画
有时候觉得这些内容都好简单，真想看看就算了。
事件绑定
bing(type [,data],fn)
第一个参数：事件类型包括：blur,focus,load,resize,scroll,unload,click,dbclick,
mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,
mouseleave,change,select,submit,keydow,keypress,keyup和error
第二个参数可选，作为event.data属性值传递给事件对象的额外数据对象。
第三个参数用来绑定处理函数
通过一个实例：
<h5 class="head">什么是jQuery?</h5> <div class="content"> jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 </div>
实现随鼠标移动而显示的效果：
(function(){ $("#panel h5.head").mouseover(function(){ $(this).next("div.content").show(); }); $("#panel h5.head").mouseout(function(){ $(this).next("div.content").hide(); }) })
合成事件
1.hover()
语法为hover(enter,leave),上面的例子则可以写成：
$(function(){ $(#panel h5.head).hover(function(){ $(this).next("div.content").show(); },function(){ $(this).next("div,content").hiden(); }) })
2.toggle()
语法为toggle(fn1,fn2,fn3..):
$(function(){ $(#panel h5.head).toggle(function(){ $(this).addClass("highlight"); $(this).next("div.content").show(); },function(){ $(this).removeClass("highlight"); $(this).next("div,content").hiden(); }) })
冒泡事件
<script type="text/javascript"> $(function(){ // 为span元素绑定click事件 $('span').bind("click",function(){ var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>"; $('#msg').html(txt); }); // 为div元素绑定click事件 $('#content').bind("click",function(){ var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>"; $('#msg').html(txt); }); // 为body元素绑定click事件 $("body").bind("click",function(){ var txt = $('#msg').html() + "<p>body元素被点击.<p/>"; $('#msg').html(txt); }); }) </script> <body> <div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素 </div> <div id="msg"></div> </body>
<script type="text/javascript"> $(function(){ // 为span元素绑定click事件 $('span').bind("click",function(event){ var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>"; $('#msg').html(txt); event.stopPropagation(); // 阻止事件冒泡 }); // 为div元素绑定click事件 $('#content').bind("click",function(event){ var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>"; $('#msg').html(txt); event.stopPropagation(); // 阻止事件冒泡 }); // 为body元素绑定click事件 $("body").bind("click",function(){ var txt = $('#msg').html() + "<p>body元素被点击.<p/>"; $('#msg').html(txt); }); }) </script> <body> <div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素 </div> <div id="msg"></div> </body>
<script type="text/javascript"> $(function(){ $("#sub").bind("click",function(event){ var username = $("#username").val(); //获取元素的值 if(username==""){ //判断值是否为空 $("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息 event.preventDefault(); //阻止默认行为 ( 表单提交 ) //或者return false; } }) }) </script> <body> <form action="test.html"> 用户名：<input type="text" id="username" /> <br/> <input type="submit" value="提交" id="sub"/> </form> <div id="msg"></div> </body>
事件对象属性
<script> $(function(){ $("a").click(function(event) { alert(event.type);//获取事件类型 return false;//阻止链接跳转 }); }) </script> <body> <a href='http://google.com'>click me .</a> </body> "click"
event.preventDefault()方法
event.stopPropagation()方法
<script> $(function(){ $("a[href=http://google.com]").click(function(event) { alert(event.target.href);//获取触发事件的<a>元素的href属性值 return false;//阻止链接跳转 }); }) </script>
event.relatedTarget()：mouseover和mouseout所发生的元素可以通过event.relatedTarget()