一、 jQuery中的事件
*加载DOM
1.执行时机
jQuery中的$(document).ready()方法代替JS中的window.onload()方法。但是两者执行时机不同。window.onload()是等页面所有元素都加载完成后调用，$(document).ready()是等DOM完全就绪即可被调用。例如一个大型图片库网站，window.onload()需要等所有图片加载完毕后才可以进行操作；$(document).ready()不需要等所有图片加载完毕。因为相关文件没有下载完，所以图片高度等属性此时不一定有效，要解决这个问题可以用load():
$(window).load(function(){
//编写代码
})等价于JS的
window.onload=function(){
//编写代码
}2.多次使用
window.οnlοad=function(){}只能写一次
$(document).ready(function(){ })可以写多次
$(document).ready(function(){})可以简写为 $(function(){})
*事件绑定
在文档装载完成以后，如果打算为元素 绑定时间来完成某些操作 ，则可以使用bind()
bind(type[.data] , fn)
bind()有三个参数
第一个参数是事件类型，类型包括：blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、error等，也可以是自定义名称；
第二个参数为可选参数，作为event.data属性值传递给事件对象的额外数据对象
第三个参数则是用来绑定的处理函数
注意：可以发现jQuery中的事件比JS事件绑定类型少了“on”，例如jQuery中click(),JS里的是onclick()
$(function(){
$("#a").bind("mouseover",function(){
$(this).next().show();
}).blind("mouseout",function(){
$(this).next().hide();
})
})//给id为a的元素添加鼠标滑过事件 以上可以简写为
$(function(){
$("#a").mouseover(function(){
$(this).next().show();
}).mouseout(function(){
$(this).next.hide();
})
})*合成事件
1.hover(enter,leave)
hover()用于模拟鼠标悬停事件，当移动到元素上是触发第一个函数（enter），当光标滑出出发第二个函数（leave）
$(function(){
$("#a").hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
});
});注意:hover()方法准确来说是替代bind(“mouseenter”)和bind(“mouseleave”)，而不是bind(“mouseover”)与bind(“mouseout”)
2.toggle()
toggle()可以切换元素的可见状态，如果元素是可见的，单击以后则为隐藏，如果元素是隐藏的，单击切换为可见
$(function(){
$("#a").toggle(function(){
$(this).next().toggle();
},function(){
$(this).next().toggle();
});
});*事件冒泡
1.什么是事件冒泡
1.1事件冒泡引发的行为
<body><div><span></span></div></body>
给他们全部添加点击事件，此时点击span元素，外层div与body绑定的事件也相应先后响应，响应顺序：span div body。这种现象就是事件冒泡
如果不想出现这种情况，应在相应单击事件中加 event.stopPropagation();，此时只触发单击的那个事件。1.2 阻止默认行为
网页中某些元素有自己的默认行为，如单击链接后自动跳转，单击表单提交按钮会自动提交表单，但是如果想验证表单是否符合条件，不符合条件不提交表单的时候，应该加：event.preventDefault（）;或：return false;
*事件对象的属性
(1)event.type获得事件的类型
如：
$("a").click(function(){
alert(event.type);
return false;
})//结果为:click(2)event.target 获取触发事件的元素
$("a").click(function(){
var tg=event.target;
alert(tg.href);
return false;
})//结果为http://google.com
<a href="http://google.com">google</a>(3)event.which
在点击事件中获取鼠标左、中、右按键；在键盘事件中获取键盘按键
鼠标按键：左：1 ；中：2；右3
$("a").mousedown(function(e) {
alert(e.which);
});
$("a").keyup(function(e) {
alert(e.which);
});(4)event.metaKey
键盘事件中获取<ctrl>按键
*移除事件
首先添加一个移除事件按钮<button id="delA">移除</button>
1.移除以前元素上注册的事件
例如删除a的所有click事件
$("#delA").click(function(){
$("a").unbind("click")
})unbind([type],[data])
第一个参数是事件类型，第二个参数是将要移除的函数
如果没有参数，则删除所有绑定事件；
如果提供了事件类型，则只删除该类型的绑定事件；
如果两个参数都有，则只删除这个特定的事件处理函数。
2.移除其中一个事件
如以下代码：
$("#btn").bind("click",myFun1=function(){
$("#test").append("<p>..1</p>");
}).bind("click",myFun2=function(){
$("#test").append("<p>..2</p>");
})
此时可以删除其中一个事件
$("#delA").click(function(){
$("#btn").unbind("click",myFun2);
})*模拟操作
模拟用户操作，例如单击，用户要点击以后再触发事件，但是如果用模拟操作，用户进入界面不需点击就可触发事件：
1.常用模拟
$("#a").trigger("click");或者：$("#a").click();2.触发自定义事件
如为元素绑定一个“myClick”事件：
$("#btn").bind("myClick",function(){..})想要触发这个事件：$("#btn").trigger("myClick");
3.传递数据
trigger（type，[data]）
第一个参数是要处罚的事件类型，第二个参数是要传递给事件处理函数的附加数据，以数组形式传递，通常可以传递一个参数给回调函数来区别这次是代码触发的还是用户触发的。
$("#btn").bind("myClick",function(event,message1,message2){//获取数据
$("#test").append("<p>"+message1+message2+"</p>");
});
$("#b").trigger("myClick",["我的自定义"+"事件"])；//传递两个参数
4.执行默认操作
$("input").trigger("focus");//不仅触发focus事件，还会使其得本身到焦点
$("input").triggerHandler("focus");//只触发focus事件，不会使其得到焦点*其他用法
1.绑定多个事件类型
$(function(){
$("div").bind("mouseover mouseout",function(){
$(this).toggleClass("over");//加一个over类
})
})//鼠标滑入class切换为over类，滑出显示先前的值2.添加事件命名空间，便于管理
为元素绑定的多个事件类型用命名空间规范起来
jQuery支持事件命名空间，以方便事件管理。例如，在下面的示例中，为div元素绑定多个事件类型，然后使用命名空间进行规范，从而方便管理。所谓事件命名空间，就晨事件类型后面以点语法附加一个别名，以便引用事件，如”click.a”，其中”a”就是click当前事件类型的别名，即事件命名空间
如：
$(“div”).bind(“click.a”,function(){});
$(“div”).bind(“dbclick.a”,function(){});
$(“div”).bind(“mouseover.a”,function(){});
$(“div”).bind(“mouseout.a”,function(){});若在所有绑定的事件类型后面附加命名空间，这样在删除事件时，就可以直接指定命名空间。如$(“div”).unbind(“.a”);
同样，如果相同的事件类型设置不同的命名空间，如果仅删除某一个事件处理程序，则只需要指定命名空间即可。
另外，在trigger()方法中，如果事件类型后面附加感叹号，则表示触发不包含命名空间的特定事件类型。
$(“div”).bind(“click”,function(){});
$(“div”).bind(“click.a”,function(){});
$(“div”).trigger(“click!”)//注意click后边的感叹号的作用是匹配所有不包含在任命空间中的click方法，如果需要两者都触发，可以改为：
$("div").trigger("click");二、jQuery中的动画
1.show() hide()
show与hide都是立即显示或隐藏元素，也可以加参数控制速度
show(“slow”)（600毫秒）,还有“normal”（400毫秒）“fast”（200毫秒）；或者直接给毫秒数show(1000)；hide（）参数相同
hide（）同时减少内容的高度、宽度、不透明度
show（）从上到下增加高度，，从左到右增加宽度，同时增加不透明度
2.fadeIn() 淡入 ； fadeOut() 淡出 参数同上
只改变元素的不透明度
3.slideUp() 由下往上缩短隐藏 ； slideDown()由上往下延伸显示 参数同上
只改变元素高度
4.自定义动画方法 animate()
animate(params,speed,callback)
(1)params:一个包含样式属性及值的映射，比如{property1:”value1”,property2:”value2”,..}
(2)speed:速度参数，可选
(3)callback:在动画完成时执行的函数，可选
4.1 自定义简单动画
<div id="panel"><div>
#panel{
position:relative;
width:100px;
height:100px;
border:1px solid red;
background：#96E000;
cursor：pointer;
}
要使元素动起来，要改变元素的left属性，为了能使animate()影响该元素的top、left、bottom、right样式属性，必须先把position样式设置为relative或者absolute，此时才可以调整元素使其动起来。
$(function(){
$("#panel").click(function(){
$(this).animate({left:"500px"},3000);
})
})//3秒内向右移动500像素4.2累加、累减动画
在上例500px前加+=就是累加 ，-=就是累减
$(this).animate({left:"+=500px"},3000);//在当前位置累加500px4.3多重动画
4.3.1 同时执行多个动画
例如向右移动同时放大元素的高度
$(this).animate({left:"500px"，height:"200px"},3000);4.3.2 顺序执行多个动画
只需按顺序分开写就可以
$(this).animate({left:"500px"},3000)
.animate({height:"200px"},3000)4.4综合动画
单击元素后让他向右移动的同时增大它的高度，并将它的不透明度从50%到100%，然后再让他从上向下移动，同时宽度增大，最后以淡出方式隐藏
$(function(){
$("#panel").css("opacity","0.5");
$("#panel").click(function(){
$(this).animate({left:"500px",height:"200px",opacity:"1"},3000)
.animate({top:"200px",width:"200px"},3000)
.fadeOut("slow");
})
})5.动画回调函数
在上个例子中，如果想在最后一步切换css样式而不是淡出的话，直接将fadeOut改成css（）是出不了效果的，因为css（）在一开始会被立即执行，但是可以用回调函数加在最后
$(function(){
$("#panel").css("opacity","0.5");
$("#panel").click(function(){
$(this).animate({left:"500px",height:"200px",opacity:"1"},3000)
.animate({top:"200px",width:"200px"},3000,function(){
$(this).css("border","5px solid blue");
})
})
})6.停止动画和判断是否处于动画状态
6.1停止元素的动画
stop([clearQueue],[gotoEnd])
stop()会结束当前正在执行的动画，并立即执行队列中的下一个动画
两个都是可选参数，布尔值，第一个参数是否要清空未执行完的动画队列，第二个参数代表是否直接将正在执行的动画跳到末状态
例如hover 鼠标移入过快过慢状态切换与动作不一致，可以在移入移出事件前加stop来结束当前动画，立即执行下一动画
$("#a").hover(function(){
$(this).stop()
.animate(...);
},function(){
$(this).stop()
.animate(....);
})$("#a").hover(function(){
$(this).stop()
.animate({height:"150px"},200)//如果此时光标移出将执行下面的动画，而不是光标移出事件中的动画
.animate({width:"150px"},300);
},function(){
$(this).stop()
.animate({height:"100px"},200)
.animate({width:"200px"},300);
})若动画在第一阶段height光标移出，只会停止当前动画，执行width动画，但是预期效果是执行移出事件动画，此时应该清楚未完成动画，给stop加参数
$("#a").hover(function(){
$(this).stop(true)
.animate({height:"150px"},200)
.animate({width:"150px"},300);
},function(){
$(this).stop(true)
.animate({height:"100px"},200)
.animate({width:"200px"},300);
})可以设置stop(false,true)让当前正在执行的动画直接到达末状态
可以设置stop(true,true),停止当前动画并直接到达当前动画的末状态，并清空动画队列
jQuery只能设置正在执行的动画的最终状态，没有提供直接到达未执行动画队列的最终状态的方法
6.2 判断元素是否处于动画状态
在使用动画时要避免动画类及而导致的动画与用户行为不一致，当用户快速在某个元素上执行animate动画时，就会进行动画累积，这时候要判断是否正处于动画状态。
if(!$(element).is(":animated")){
//如果没有正在进行的动画，则添加新动画
}6.3 延迟动画
delay()
delay(1000),对动画进行延时操作，即可以推迟队列中函数的执行，也可以用于自定义队列
6.4 其他动画方法
1.toggle（）切换元素可见状态
单击后切换下一元素可见性
$(function(){
$("#pp").click(function(){
$(this).next().toggle();
})
})2.slideToggle()替代 slideUp()和slideDown()
$(function(){
$("#pp").click(function(){
$(this).next().slideToggle();
})
})3.fadeTo()把元素的不透明度以渐进方式调整到指定的值
$(function(){
$("#pp").click(function(){
$(this).next().fadeTo(600,0.2);
})
})4.fadeToggle()替代fadeOut()和fadeIn()
403
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
