JQuery学习笔记，4JQuery中的事件和动画

JQuery中的事件和动画

1.JQuery中的事件

1.1 加载DOM

以浏览器装载文档为例，在页面加载完毕后，浏览器为通过JavaScript为DOM元素添加事件。JQuery用$(document).ready()来代替JavaScript中的window.onload方法。两者具有以下区别：

-1. 执行时机

window.onload是在网页中所有的元素(包括元素的关联文件)完全加载到浏览器后才执行，即JavaScript此时才可以访问网页中的任何元素。

$(document).ready()在DOM完全就绪时就可以被调用。

显然，把网页解析为DOM树的速度要比把网页中的所有关联文件加载完毕来得快。但是需要注意的是由于$(document).ready()只要DOM就绪就会执行，此时关联的文件可能还没有完全加载完，如图片，如果此时获取图片高度和宽度的属性就不一定准确，解决的方法可以使用JQuery中另一个关于页面加载的方法—load()方法

$(window).load(function(){

// Your code

})

-2. 多次执行

JavaScript的onload事件一次只能保存对一个函数的引用，他会自动用后面的函数函数覆盖前面的函数。

window.onload = function1;//无效，被function2覆盖

window.onload = function2;

而每次调用$(document).ready()都会在现有的行为上追加新的行为

$(document).ready(function(){

function1();//有效

})

$(document).ready(function(){

function2();//有效

})

-3. 简写方式

以下三种方式等价：

$(document).ready(function(){

// Your Code

})

$(function(){

// Your Code

})//第一种的简写

$().ready(function(){

// Your Code

})//$(document)简写为$()

1.2 事件绑定

bind(type [,data],fn)文档装载完后，可以通过bind来绑定事件

type:事件类型，如blur, focus, load, resize, scroll, unload, click, dbclick, mousedown, mouseup, mouseover, mousemove, mouseout, mouseenter, mouseleave, change, select, submit, keyperss, keyup, keydown, error等，当然也可以是自定义名称。

data:可选参数，作为event.data属性值传递给事件对象的额外数据对象；

fn:用来绑定的处理函数。

-1. 基本效果

$(function(){

$(“#head”).bind(“click”,function(){

$(this).next(“div.content”).show();

})

})

-2. 简写效果

click，mouseover，mouseout这些事件经常使用到，JQuery提供了一些简写方法，如：

$(“#head”).click(function(){

$(this).next(“div.content”).show();

}

)

-3.合成事件

·hover(enter,leave)模拟光标悬停事件，光标移动到元素上时触发enter事件，光标离开时触发leave事件，例：

$(document).ready(function(){

$("#fruit").hover(function(){

$(this).next("ul").show();

},function(){

$(this).next("ul").hide();

})

})

toggle(fn1, fn2, ... , fn)模拟鼠标连续单击事件，第一次点击触发f1事件，以此类推，例：

$(document).ready(function(){

$("#fruit").toggle(function(){

$(this).next("ul").show();

},function(){

$(this).next("ul").hide();

})

})

1.3．事件冒泡

如下图，div, li, ul 都绑定了同样的click事件F1(), 当我们点击ul元素时，就会触发函数F1三次，且顺序为ul→li→div，此即由事件冒泡引起的。

<div onclick="F1();">

<li onclick="F1();">

<ul onclick="F1();"></ul>

</li>

</div>

防止方法：

-1. 事件对象，在程序中使用事件对象很简单，只需为函数添加一个参数，如：

$(“element”).bind(“click”,function(event){ //event:事件对象

// Your code

})

这样，当单击”element”元素时，事件对象就被创建了。这个事件对象只有事件处理函数才可以访问到。事件处理函数执行完毕后，事件对象就被销毁。

2. JQuery中的动画—皆可以使用参数

2.1 show() & hide()：等同于通过设置display的样式

可以添加参数(“slow”:600ms,”normal”:400ms, “fast”:200ms,100:100ms)，采用同时增加/减少高度、宽度、透明度来实现的。

2.2 fadeIn() & fadeOut()，只改变元素的不透明度

2.3 slideUp() & slideDown()，只改变元素的高度