锋利的jQuery重点知识点学习总结
第四章：jQuery中的事件和动画
jQuery中的事件
SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。
1.加载dom： $(window).load(function(){}) == window.onload = function(){}:简写方式：$(function(){ }) // $().read(function(){ })
2.事件绑定： bind();
1).格式：bind(type[,data],fn);
2).参数：第一个参数是事件类型，类型包括：blur、focus、load、resize、sroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、、、、
第二个参数是可选参数，作为event.data属性值传递给事件对象的额外数据对象。
第三个参数是用来绑定的处理函数。
$(function(){ $("#panel h5.head").bind("click",function(){ $(this).next().show(); }) }) //可以简写为： $(function(){ $("#panel h5.head").click(function(){ $(this).next().show(); }) })
3).绑定事件类型
//鼠标点击 $("#panel h5.head").bind("click",function(){ var content=$(this).next(); if(content.is(":visible")){ content.hide(); }else{ content.show(); } })
//鼠标滑过 $("#panel h5.head").bind("mouseover",function(){ $(this).next().show(); }).bind("mouseout",function(){ $(this).next().hide(); })
//简写化 $(function(){ $("#panel h5.head").mouseover(function(){ $(this).next().show(); }).mouseout(function(){ $(this).next().hide(); })
3.合成事件：hover() / toggle()
1）.hover() 语法结构：hover（enter,leave）；//模拟光标悬停事件。
//合成事件hover $(function(){ $("#panel h5.head").hover(function(){ $(this).next().show(); },function(){ $(this).next().hide(); }); })
2）.toggle:语法结构:toggle(fn1,fu2,.....fuN);//模拟鼠标连续单击，第一次单击触发第一个函数，第二次单击触发第二个函数，依次往后可以设置多次。
//toggle $(function(){ $("#panel h5.head").toggle(function(){ $(this).next().show(); },function(){ $(this).next().hide(); }); })
3）.加强效果
//添加高亮样式 $(function(){ $("#panel h5.head").toggle(function(){ $(this).addClass("highlight"); $(this).next().show(); },function(){ $(this).removeClass("highlight"); $(this).next().hide(); });
4.事件冒泡
1）.停止事件冒泡：stopPropagation() //event:事件对象
$('span').bind("click",function(event){
var txt=$('#msg').html()+"<P>内层span元素被点击.<p/>"
$('#msg').html(txt);
return false;//停止事件冒泡与 一样
});
2）.阻止默认行为：preventDefault(),对调用stopPrapagation()方法和preventDefault()的简写方式就是在处理函数中返回：return false；
5.事件对象的属性
event.type可以获取到事件的类型；
event.stopPropagation()方法停止事件冒泡；
event.preventDefault()方法阻止默认行为；
event.target 获取到触发事件的元素；
event.relatedTarget 获取到相关元素；
event.pageX和event.pageY 获取到光标相对于页面的x坐标和y坐标；
event.which 获取鼠标单击时的左、中、右键；
event.metaKey 获取<ctrl>按键；
6.移除事件：unbind([type],[data])
1).参数说明：第一个参数是事件类型，第二个参数是将要移除的函数。注意：如果没有参数则删除所有绑定事件。
$('#delAll').click(function(){
$("#btn").unbind("click",myfun2);
7.模拟操作：trigger():会执行默认操作，triggerHandler():不执行默认操作
//执行默认操作与不执行 $("input").bind("focus",function(){ $("#test").append("<p> 随机事件</p>"); }) //$("input").trigger("focus");//鼠标焦点会默认落在input框里面 $("input").triggerHandler("focus"); })
8.其他用法：
1>.绑定多个事件类型：
$("div").bind("mouseover mouseout",function(){
$(this).toggleClass("over");
2>.根据命名空间删除事件
$('div').bind("click.plugin",function(){
$("body").append("<p>click事件</p>");
}).bind("mouseover.plugin",function(){
$("body").append("<p>mouseover事件</p>");
}).bind("dblclick",function(){
$("body").append("<p>dblclick事件</p>");
});
//根据命名空间删除事件
$("button").click(function(){
$("div").unbind(".plugin");
});
3>.相同的事件名称不同的命名空间
//相同的事件名称不桶的命名空间 $("div").bind("click",function(){ $("body").append("<p>click事件</p>"); }).bind("click.plugin",function(){ $("body").append("<p>click.plugin事件</p>"); }); $('button').click(function(){ //$('div').trigger("click!");//根据命名空间触发事件，！是指不包含在命名空间里的事件 $('div').trigger("click");//没有感叹号就是包括所有的click事件都触发 });
4.2 jQuery中的动画
1.show() / hide() 方法：隐藏/显示
2.fadeIn() /fadeOut() 方法：按照透明度由显示 -消失
3.slideUp() / slidDown() :slidDown()时，元素由上至下延申展示
4.animate():自定义动画：animate(params,speed,callback);
参数说明：1》params：一个包含样式属性及值的映射
2》speed：速度参数
3》callback：在动画完成时执行的函数。
1>.显示/隐藏
//hide\show 加时间 $("input:eq(1)").click(function(){ $("#panel h5.head").click(function(){ $(this).next().toggle(600); }) })
2>.淡入淡出 == fadeTo()
//fadeOut/fadeIn慢慢淡出 $("#panel h5.head").toggle(function(){//$(this).next().fadeToggle(); $(this).next().fadeOut(1600); },function(){ $(this).next().fadeIn(1600); });
简化：
$("#panel h5.head").click(function(){
$(this).next().fadeToggle();
});
3>.由下至上压缩隐藏/由上至下延申展示
//slideUp/slideDown 由下至上压缩隐藏/由上至下延申展示 $("#panel h5.head").toggle(function(){//$().next().slideToggle(); $(this).next().slideUp("slow"); },function(){ $(this).next().slideDown(); })
简化：
$("#panel h5.head").click(function(){
$(this).next().slideToggle();
});
4>.animate简单移动
//animate简单移动 $("#panel2").click(function(){ $(this).animate({left:"+=500px"},3000); })
5>.多重动画
//多重动画 $("#panel2").click(function(){ $(this).animate({left: "500px",height:"200px"},3000); })
6>.动画队列
//动画队列 $("#panel2").click(function(){ $(this).animate({left: "500px"},3000) .animate({height:"200px"},3000); })
7>.综合动画
//综合动画 $("#panel2").css("opacity","0.5");//设置不透明度 $("#panel2").click(function(){ $(this).animate({left: "500px",height:"200px",opacity: "1"},3000) .animate({top: "200px",width:"200px"},3000) .fadeOut("slow"); });
8>.动画回调函数
//动画回调函数 $("#panel2").click(function(){ $(this).animate({left: "500px",height:"200px",opacity: "1"},3000) .animate({top: "200px",width:"200px"},3000,function(){ $(this).css("border","5px solid blue"); }) });
9>.停止组合元素的动画
//停止组合元素动画 $("#panel2").hover(function(){ $(this).stop(false,true) .animate({height:"150"},2000) .animate({width:"300"},3000); },function(){ $(this).stop(false,true) .animate({height:"22"},2000) .animate({width:"60"},3000); });
10>.判断是否是动画
//判断是否是动画 function animateIt(){ $("#mover").slideToggle("slow",animateIt); } function animateIt2(){ $("#mover").fadeToggle("slow",animateIt2); } animateIt(); $("button").click(function(){ if(!$("#mover").is(":animated")){ $('#mover').fadeToggle("slow",animateIt2); }else{ $('#mover').stop(); } });
11>.延迟动画 delay(10000)
//延迟动画 $("#panel2").click(function(){ $(this).animate({left: "500px",height:"200px",opacity: "1"},3000) .delay(10000) .animate({top: "200px",width:"200px"},3000) .delay(2000) .fadeOut("slow"); })
12>.把元素的不透明度调整到指定的值
$("#panel h5.head").click(function(){
$(this).next().fadeTo(600,0.2);
});
