jQuery事件与动画

1、 $(document).ready()&window.onload区别：
　　window.onload在网页多有元素（包含元素的所有关联文件）完全加载到浏览器后才执行，即JS此时才可以访问网页中的任何元素；
　　$(document).ready()在DOM完全就绪时就可以被调用，此时网页的所有元素对jQuery而言都是可以访问的，但这时并不意味着这些元素关联的文件都已经下载完毕。
　　window.onload事件一次只能保存对一个函数的引用，它会自动用后面的函数覆盖前面的函数，因此不能在现有行为上添加新的行为；
　　$(document).ready()每次调用都会在现有的行为上追加新的行为，这些行为函数会根据注册的顺序依次执行。

 

2、 toggle()方法： toggle(fn1,fn2...fnN)
　　toggle()方法用于模拟鼠标连续单击事件，第一次单击元素，触发指定的第一个函数fn1,依次类推，直到触发最后一个。随后的每次单击都重复对这几个函数的轮番调用;
　　toggle()在jQuery中还有另一个作用：切换元素的可见状态，如下：　　

　　$("div").toggle(function(){
　　　　$(this).next().show();
　　},function(){
　　　　$(this).next().hide();
　　})

 

3、事件冒泡

如下代码：

<script>
$("span").bind("click",function(){
    var txt = $("msg").html()+"<p>内层span元素被单击</p>";
    $("msg").html(txt);
})
$("content").bind("click",function(){
    var txt = $("msg").html()+"<p>外层div元素被单击</p>";
    $("msg").html(txt);
})
$("body").bind("click",function(){
    var txt = $("msg").html()+"<p>body元素被单击</p>";
    $("msg").html(txt);
})
</script>
<div id="content">
    外层div元素
        <span>内层span元素</span>
    外层div元素
</div>
<div id="msg"></div>    

事件会按照DOM得层次结构依次向上直至顶端，如果需要停止事件冒泡，stopPropagation()方法如下：
　　$("span").bind("click",function(event){
　　　　var txt = $("msg").html()+"<p>内层span元素被单击</p>";
　　　　$("msg").html(txt);
　　　　event.stopPropagation();
　　})

表单提交时如果需要阻止默认行为（文本框输入值为空是不允许提交），需要使用preventDefault()方法：

<script>
　　$(function(){
	$("#sub").bind("click",function(event)){
		var username = $("username").val();
		if(username == ""){
			$("#msg").html("<p>文本框不能为空</p>");
			event.preventDefault();
		}
	})
　　})
</script>
<form>
　　username:<input type="text" id="username"/>
　　<input type="submit" value="commit" id="sub"/>
</form>
<div id="msg"></div>

如果想同时对事件对对象停止冒泡和默认行为，可在事件处理中返回false,如下：
　　event.preventDefault() -------> return false;
　　enent.stopPorpagation() -------> return false;

 

4、其他用法
1）绑定多个事件类型：
下面这两种写法是等同的：
$(function(){
　　$("#div").bind("mouseover mouseout",function()){
　　　　$(this).toggleClass("over");
　　})
})

$(function(){
　　$("#div").bind("mouseover",function()){
　　　　$(this).toggleClass("over");
　　}).bind("mouseout"),function(){
　　　　$(this).toggleClass("over");
})

2） 相同事件名称，不同命名空间的执行方法
$(function(){
　　$("#div").bind("click",function()){
　　　　$("body").append("<p>click事件</p>");
　　});
　　$("#div").bind("click.plugin",function()){
　　　　$("body").append("<p>click.plugin事件</p>");
　　});
　　$("#button").bind("click",function()){
　　　　$("body").trigger("click!");
　　});
})
当点击<div>元素后，会同时触发click和click.plugin事件，如果只是点击<button>元素，则只触发click事件，不触发click.plugin事件，
(注意trigger("click!")中！的作用是匹配所有不包含在命名空间中的click方法)

 

5、jQuery动画

1) 停止动画：stop()方法
　　stop(): 只停止当前正在进行的动画；
　　stop(true)： 把当前元素接下来尚未执行完的动画队列清空；
　　stop(true,true): 停止当前动画并直接到达当前动画的末状态，并清空动画队列；
　　stop(false,true): 让当前动画直接到达末状态
jQuery只能设置正在执行的动画的最终状态，而没有提供直接到达未执行动画队列最终状态的方法。

2）判断元素是否处于动画状态
if(! $(element).is(":animated")){
　　doSomeThing...
}