一.jQuery中的事件
1.加载DOM 以浏览器装载文档为例,在页面加载完毕后,浏览器会通过JavaScript为DOM元素添加事件。在常规JavaScript代码中,通常使用window.onload方法,而在jQuery中,使用是$(document).ready()方法。但是要注意一下二者的区别: 执行时机:window.onload()方法是在网页中所有元素(包括所有关联文件)完全加载到浏览器后才执行。而通过jQuery中的$(document).ready()方法注册的事件处理程序在DOM完全就绪时就可以被调用(并不是所有关联文件都下载完毕)。当有时候元素的关联文件还未下载完,可以使用jQuery中另一个关于页面加载的方法—load()方法:$(window).load(function(){
//编写代码})等价于JavaScript中的以下代码:window.οnlοad=function(){
//}多次使用:假设网页中有两个函数,当使用window.onload方法时不能同时编写多个,那样只会执行最后那个函数,而$(document).ready()方法可以同时编写多个,就是在现有的行为上追加新的行为,且会顺序执行。例:$(document).ready(function(){
one();})$(document).ready(function(){ two();})简写方式:$(function(){
//})2.事件绑定 在文档装载完成后,可以使用bind()方法来对匹配元素进行特定事件的绑定:bind(type [, data] , fn); //第一个参数事件类型,第二个可选参数,第三个用来绑定的处理函数
1若要判断元素是否隐藏和显示循环出现时,可以使用jQuery中的is()方法来完成。 3.合成事件 jQuery有两个合成事件,属于自定义方法: hover()方法—用于模拟光标悬停事件hover(enter,leave); //光标移动在此时触发第1个函数,离开时触发第2个函数
1toggle()方法—用于模拟鼠标连续单击事件/还可以切换元素的可见状态toggle(fn1,fn2,...fnN); //第一次单击触发第一个函数,第二次单击触发第二个,依次触发
14.事件冒泡 在页面上可以有多个事件,也可以多个元素相应同一个事件,假设页面上有一个div元素,另一个span元素嵌套在里面,并且都被绑定了click事件,同时body元素上也绑定了click事件,当单击内部span元素时,会触发span元素的click事件,同时也会按照DOM的层次结构顺序响应嵌套的每一个元素,称为顺序冒泡,顺序为span—div—body。 停止事件冒泡:event.stopPropagation();
1阻止元素的默认行为:event.preventDefault();
1也可以将上面的方法换成简写方式:return false;
1事件捕获:事件捕获和事件冒泡是刚好相反的两个过程,事件捕获是从最外层元素开始,然后再到最里层元素。 5.事件对象的属性event.type——获取事件类型
event.preventDefault()——阻止默认行为event.stopPropagation()——阻止事件冒泡event.target——获取到触发事件的元素event.relatedTarget——访问mouseover和mouseout的相关元素event.pageX和event.pageY——获取到光标相对于页面的x坐标和y坐标event.which——在鼠标单击事件中获取鼠标的左、中、右键event.metaKey——为键盘事件中获取ctrl按键6.移除事件 在绑定事件过程中,不仅可以为同一个元素绑定多个事件,也可以为多个元素绑定同一个事件。 移除按钮元素上以前注册的事件:<button id="delAll">删除所有事件</button>
$('#delAll').click(function(){ $('#btn').unbind("click");});语法:unbind([type],[data]); //第一个参数事件类型,第二个参数将要移除的函数 移除元素的其中一个事件:$('#delTwo').click(function(){
$('#btn').unbind("click",myFun2); //首先为处理函数指定一个变量myFun2,然后删除绑定函数2});One()方法可以为元素绑定处理函数,触发一次后立即解除:one(type,[data],fn);
17.模拟操作 使用trigger()方法完成模拟操作,不需要单击页面加载完毕便会输出:$('#btn').trigger("click"); //常用模拟
$('#btn').trigger("click"); //触发自定义事件trigger(type,[data]) //第一个参数要触发的事件类型,第二个事件传递给事件处理函数的附加数据$("input").trigger("focus"); //执行浏览器默认操作$("input").triggerHandler("focus"); //只触发绑定事件,不执行浏览器默认操作8.其他用法 绑定多个事件类型: $("div").bind("mouseover mouseout",function(){ }) 添加事件命名空间,便于管理:$("div").bind("mouseover.plugin",function(){ }) 相同事件名称,不同命名空间执行方法二.jQuery中的动画
1. show()方法和hide()方法$("element").hide(); //隐藏
$("element").show(); //显示$("element").css("display","none"); //通过css方法隐藏show方法和hide方法让元素动起来$("element").show("slow"); //慢速显示
12.fadeIn()方法和fadeOut()方法—改变元素的不透明度 3.slideUp()方法和slideDown()方法—改变元素的高度 4.自定义动画方法animate()animate(params,speed,callback); //一个包含样式属性及值的映射,速度,在动画完成时执行的函数
15.动画回调函数 6.停止动画和判断是否处于动画状态 停止元素的动画:stop([clearQueue],[gotoEnd]); //是否清空未执行完的动画队列,是否直接将正在执行的动画跳转到末状态
1判断元素是否处于动画状态:if(! $(element).is(":animated")){
//如果当前没有进行动画,则添加新动画}延迟动画:delay(); 7.其他动画方法toggle(speed,[callback])——切换元素的可见状态
slideToggle(speed,[easing],[callback])——通过高度变化来切换匹配元素的可见性fadeTo(speed,opacity,[callback])——把元素的不透明度以渐进方式调整到指定的值fadeToggle(speed,[easing],[callback])——通过不透明度变化来切换匹配元素的可见性