jQuery中的事件和动画
一、jQuery中的事件
1.加载DOM
（1）执行时机
$(document).ready()方法和window.onload方法有相似的功能，但是在执行时机方面是有区别的。window.onload方法是在网页中所有元素完全加载到浏览器后才执行，而$(document).ready()是在DOM完全就绪时就可以被调用。另外需要注意的是，假设在DOM就绪时调用了$(document).ready()方法，有可能此时元素的关联文件还未下载完。例如与图片有关的HTML下载完毕，并且已经解析DOM树了，但是图片还未加载完毕，就无法获取图片的高度和宽度这些属性。因此可以使用另一个关于页面加载的方法：load()来解决这个问题。load()方法会在onload事件中绑定一个处理函数。如果处理函数绑定给window对象，则会在所有内容加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。代码如下：
$(window).load(function(){
//编写代码
})
等价于
window.onload = function(){
//编写代码
}
（2）多次使用
假设网页中有2个函数，javascript代码如下：
function one(){
alert(“one”) ;
}
function two(){
alert(“two”) ;
}
当网页加载完毕后，通过如下javascript代码来分别调用one函数和two函数：
window.onload = one ;
window.onload = two ;
然而当运行代码后，发现只弹出字符串“two”对话框。字符串“one”对话框不能被弹出的原因是javascript的onload事件一次只能保存一个函数的引用，它会自动用后面的函数覆盖前面的函数，因此不能在现有的行为上添加新的行为。但是jQuery的$(document).ready()方法可以处理两个行为按顺序触发。例如下列jQuery代码：
function one(){
alert(“one”) ;
}
function two(){
alert(“two”) ;
}
$(“document”).ready(function(){
one() ;
})
$(“document”).ready(function(){
two() ;
});
运行代码后，会先弹出字符串“one”对话框，然后弹出字符串“two”对话框。
（3）简写方式
$(document).ready(function(){
//编写代码
})
可以简写成：
$(function(){
//编写代码
})
另外，$(document)也可以简写为$()。当$()不带参数时，默认参数就是“document”因此可以简写为：
$().ready(function(){
//编写代码
})
2.事件绑定
在文档装载完成后，如果打算为元素绑定事件来完成某些操作，则可以使用bind()方法来匹配元素进行特定事件的绑定，bind()方法的调用格式为：
bind(type [,data] , fn) ;
bind()方法有3个参数：
第1个是事件类型。
第2个参数为可选参数，作为event.data属性值传递给事件对象的额外数据对象。
第3个参数是用来绑定的处理函数。
（1）基本效果
下面通过一个示例来了解bind()方法的用法。假设网页中有一个FAQ，单击“标题”链接将显示内容。HTML代码如下：
<div id = “panel”>
<h5 class = “head”>什么是jQuery？</h5>
<div class = “content”>
jQuery是继Prototype之后有一个优秀的……
</div>
</div>
jQuery代码：
$(function(){
$("#panel h5.head").bind("click",function(){
$(this).next().show();
})
});
运行代码，单击标题“链接”，“内容”就展开了。与ready()一样，bind()也可以多次调用。
（2）加强效果
让上面的例子中实现效果：单击一次“标题”，显示“内容”，再单击一次“标题”，隐藏“内容”。
jQuery代码如下：
$(function(){
$("#panel h5.head").bind("click",function(){
var $content = $(this).next();
if ($content.is(":visible")) {
$content.hide();
} else {
$content.show();
}
})
})
（3）改变绑定事件的类型
上面的例子中，给元素绑定的事件类型时click，当用户单击的时候会触发绑定事件，然后执行事件的函数代码。现在把事件类型换成mouseover和mouseout，jQuery代码如下：
$(function(){
$("#panel h5.head").bind("mouseover",function(){
$(this).next().show();
}).bind("mouseout",function(){
$(this).next().hide();
})
})
运行代码后，当鼠标滑过“标题”就会显示“内容”，当鼠标移出“标题”就隐藏“内容”。
（4）简写绑定事件
像click、mouseover、mouseout这类事件，在程序中会经常使用到，jQuery为此也提供了一套简写的方法。简写方法和bind()方法的使用类似，实现效果也相同，唯一的区别是能够减少代码量。
例如，把上面的例子改成使用简写绑定事件的方式，代码如下：
$(function(){
$("#panel h5 .head").mouseover(function(){
$(this).next().show();
}).mouseout(function(){
$(this).next().hide();
})
})
3.合成事件
jQuery有两个合成事件——hover()方法和toggle()方法，类似前面讲过的ready()方法，hover()方法和toggle()方法都属于jQuery自定义的方法
（1）hover()方法
hover()方法的语法结构为：
hover(enter.leave) ;
hover()方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第1个函数（enter）;当光标移出这个函数时，会触发指定的第2个函数(leave) ;
将上面的例子改写成使用hover()方法，jQuery代码如下：
$(function(){
$("#panel h5.head").hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
})
（2）toggle()方法
toggle()方法的语法结构为：
toggle(fn1,fn2,…fnN) ;
toggle()方法用于模拟鼠标连续单击事件。第1个单击元素，触发指定的第1个函数（fn1）；当再次单击同一个元素时，则触发指定的第2个函数(fn2)；如果有更多函数，则依次触发，直到最后一个。
使用toggle()方法来改写上面的例子，jQuery代码如下：
$(function(){
$("#panel h5.head").toggle(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
})
（3）再次加强效果
如果要让用户单击“标题”之后高亮“标题”，实现方法是：首先在CSS中定义一个高亮的样式，CSS代码如下：
.highlight{ background:#FF3300;}
然后编写下面的jQuery代码：
$(function(){
$("#panel h5.head").toggle(function(){
$(this).addClass("highlight");
$(this).next().show();
},function(){
$(this).removeClass("highlight");
$(this).next().hide();
})
})
4.事件冒泡
（1）事件冒泡按照DOM的层次结构像水泡一样不断上升直至顶端。
（2）事件冒泡会导致触发本不想触发的元素事件，阻止事件冒泡就要限制事件的作用范围。
在程序中使用事件对象非常简单，只需要为函数添加一个参数，jQuery代码如下：
$(“element”).bind(“click”,function(event){
//……
}) ;
停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行，在jQuery中可以使用stopPropagation()方法来停止事件冒泡。代码如下：
$(function(){
$('span').bind("click",function(event){
var txt = $('#msg').html()+"<p>内层span元素被单击</p>";
$('#msg').html(txt);
event.stopPropagation();
});
})
网页中的元素都由自己的默认行为，例如，单击超链接之后会跳转、单击“提交”按钮后表单会提交，有时需要阻止元素的默认行为。
在jQuery中，提供了preventDefault()方法来阻止元素的默认行为。代码如下：
5.事件对象的属性
（1）event.type
该方法的作用是可以获取到事件的类型
$(“a”).click(function(event){
alert(event.type) ;
return false ;
})
以上代码运行后会输出：
“click”
（2）event.preventDefault()方法
该方法的作用是阻止默认行为，在IE中无效。
（3）event.stopPropagation()方法
该方法的作用是停止事件冒泡。在IE中无效。
（4）event.target
该方法时获取触发事件元素。
$(“a[href = ‘http://google.com’]”).click(function(){
var tg = event.target ;
alert(tg.href) ;
return false ;
})
以上代码运行后会输出：
“http://google.com”
（5）event.relatedTarget
该方法获取触发事件元素的相关元素。
（6）event.pageX和event.pageY
该方法获取到光标相对于页面X坐标和Y坐标。
（7）event.which
该方法的作用是在鼠标单击实践中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按键。
（8）event.metaKey
该方法获取键盘中<ctrl>键。
6.移除事件
（1）移除按钮元素上以前注册的事件
unbind()方法，语法结构：unbind([type],[data]) ;
（2）移除<button>元素的其中一个事件
$(‘#btn’).unbind(“click”,myFun2) ;
对于只需要触发一次，随后就要立即解除绑定的情况，jQuery提供了一种简写的方法——one()方法。语法结构：
one(type,[data],fn) ;
二、jQuery中的动画
1.show()方法和hide()方法
这两种方法可以控制“内容”的显示和隐藏。在HTML文档里，为一个元素调用hide()方法，会将该元素的display样式改为“none”。
2.show()方法和hide()方法让元素动起来。如果希望在调用show()方法时，元素慢慢地显示出来，可以为show()方法指定一个速度参数，例如：$(“element”).show(“slow”) ;
运行该代码后，元素将在600毫秒内慢慢地显示出来，其它速度关键字还有“normal”、“fast”。（长度分别是400毫秒和200毫秒）
除了使用速度关键字之外，还可以指定一个数字，单位是毫秒。例如：
$(“element”).show(“1000”) ;
2.fadeIn()方法和fadeOut()方法
这两种方法改变元素的不透明度。fadeOut()方法在一定时间内降低元素的不透明度知道元素完全消失。fadeIn()方法相反。
3.slideUp()方法和slideDown()方法
这两种方法只会改变元素的高度。slideUp()方法缩短元素的高度，直到隐藏。slideDown()方法刚好相反。