锋利的jQuery学习笔记之事件和动画

1.jQuery中的事件

1.加载DOM

执行时机

以浏览器装载文档为例，在页面加载完毕后，浏览器会通过javaScript为DOM元素添加事件。

常规javaScript中使用window.onload方法，而在jQuery中使用$(document).ready();方法。

window.onload和$(document).ready()；功能相似，但在执行时机方面有区别：

window.onload是在网页上所有元素(包括元素的关联文件)完全加载到浏览器后才执行，即javaScript此时才可以访问网页中的任何元素。而$(document).ready()方法在DOM完全就绪就可以被调用，可能关联文件未下载完，但已经可以访问网页中的所有元素了，因为此时关联文件可能未下载完，所以类似于设置图片的高度和宽度这样的属性，不一定有效。

jQuery中的另一个关于页面加载的方法load()方法：如果处理函数绑定给window对象，则在所有内容加载完毕后触发，如果绑定在元素上，则在元素的内容加载完毕后触发。

多次使用

javaScript中的onload事件一次只能保存对一个函数的引用，它会自动用后面的函数覆盖前面的函数，不能在现有的行为上添加新的行为；下图为例：后面的onload事件会覆盖前面的。





而在jQuery中：多次使用$(document).ready()，每次都会在原有的行为上追加新的行为，这些行为函数会根据注册的顺序依次执行；下图为例：两次$(document).ready()方法中的行为都被执行，且按注册顺序。

简写方式：

$(document).ready(function(){});可以简写成：$(function(){})；或$().ready(function(){})；

2.事件绑定

语法：bind(type [, daya] , fn);

type：事件类型；fn：绑定的事件的处理函数

例：$("p").bind(click function(){})；简写：$("p").click(function(){})；

3.合成事件

hover()方法：语法：hover(函数1，函数2)；

hover()函数用于模拟光标悬停状态，光标移动到元素上时，触发函数1，当光标移出这个元素时，会触发函数2.



toggle()方法：语法（fn1，fn2，fn3，......fnN）；

toggle()方法用于模拟鼠标连续点击事件，第一次单机元素触发指定的fn1，当再次单机元素时触发指定的fn2，直到最后一个。

如果通过点击使内容达到隐藏和显示的目的，那么很适合使用toggle方法（.show和.hide()）

toggle()方法的另一个作用：切换元素的可见状态。

4.事件冒泡

阻止事件冒泡：停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行，在jQuery中提供了stopPropagation()方法来停止事件冒泡。



阻止默认行为：网页中的元素有自己的默认行为，例如：单机超链接后会跳转，单机提交按钮表单会提交，有时需要阻止元素的默认行为，jQuery提供了preventDefault()方法。

阻止事件冒泡和阻止默认行为都可以使用简写：return false；

jQuery不支持事件捕获，如果需要使用，可以直接使用原生javaScript。

5.事件对象的属性

event.type；//可以获取到事件的类型

event.preventDefault()方法；//阻止事件的冒泡

event.stopPropagation()方法；//阻止事件的默认行为

evemt.target；//获取到触发事件的元素。

event.pageX和event.pageY；//获取到光标相对于页面的x坐标和y坐标。

evemt.which；//获取鼠标单击事件中获取的左（1），中（2），右键（3）。

6.移除事件

unbind()语法：unbind("事件类型","将要移除的函数")；

如果没有参数，则删除所有绑定的事件。

如果提供了事件类型的参数，则只删除该类型的绑定事件

如果将要移除的函数作为第二个参数，则只有这个特定的事件处理函数会被移除

one()方法：只处理一次就移除的事件，其他与bind()方法相同

7.模拟操作

例如click事件可以通过模拟用户操作，来达到单击的效果。

在jQuery中使用trigger()方法完成模拟操作：$("p").trigger("click");

可以直接使用简写，效果相同：$("p").click();

trigger()方法不仅能触发浏览器支持的具有相同名称的事件，也可以触发自定义名称的事件。

例如为元素绑定一个myClidk的事件：

$("#id").bind("myClick",function(){

$("#text").append("<p>123445</p>");

})

想要触发这个事件可以使用：$("#id").trigger("myClick");

trigger(参数1，[参数2])；此方法有两个参数，参数1为事件名称，参数2为传递给事件处理函数的附加数据，此数据可以有多条，呈数组状态进行传递。

trigger()方法触发事件后，会执行浏览器默认操作。例如：$("input").trigger("focus");

以上代码不仅会触发focus事件，还会使input本身获得焦点（浏览器的默认操作）

如果只想触发绑定事件，而不想执行默认操作，则可以使用：triggerHandler()方法

该方法只会触发本身绑定的事件，不会执行默认操作。

8.其他用法

绑定多个事件：$(function(){

$("div").bind("mouseover mouseout",function(){})

})

当光标滑入div元素时，与滑出时，都会执行事件绑定的这个函数

2.jQuery中的动画

用jQuery做动画效果，需要在标准模式下。

1.show()方法和hide()方法

在一个html文档中，为一个元素调用hide()方法，会将该元素的display样式改为none。

$("element").hide();//通过hide方法隐藏元素

$("element").css("display","none")；//通过css的方法与hide方法效果相同。

$("element").show()；//通过show方法显示元素

对show()方法和hide()方法可以指定参数：参数为数字毫秒，为显示或消失的速度。

2.fadeIn()方法和fadeOut()方法

fadeIn()方法：在一定时间内增加元素的不透明度

fadeOut()方法：在一定时间内降低元素的不透明度。

3.slideUp()方法和slideDown()方法

这两种方法只会改变元素的高度

如果一个元素的display属性为none，当调用slideDown()方法时，这个元素会由上至下延伸显示

slideUp()方法正好相反，元素将又下至上缩短隐藏。

4.自定义动画animate()方法

在jQuery中可以使用animate()方法来自定义动画，语法：animate(params,speed,callback);

参数说明：params：包含样式及属性值的映射，｛属性1：值，属性2：值｝

speed：速度参数，可选

callback：动画完成后执行的函数，可选

自定义简单动画：

$(function(){ $("#id1").click(function(){ $(this).animate({left:"500px"},3000); }) })

left原为100，通过修改为500px,并设定3000毫秒可以执行向右移的动画

通过设置animate({left:"+=500px"},3000)可以每次点击都会向右移500px。

通过设置animate({left:"500px",width:"200px"},3000)可以执行多个动画，多个动画同时发生

如果需要按顺序执行：只需要将代码拆卡，按顺序写就可以了。

这样动画的执行具有先后顺序，称为动画队列。

5.动画回调函数

在上面自定义动画时，如果在动画队列中最后一步为修改css的样式（.css(......)），那么这个css的样式修改在动画开始时就会进行修改，不再动画队列中。

如果需要让非动画方法实现排队，只需要把该非动画方法写在最后一个动画的回调函数中即可

animate({left:"500px",width:"200px"},3000).animate({left:"+=500px"},3000,function(){回调函数})

6.停止动画，判断是否处于动画状态

如果需要在某处停止动画：需要使用stop()方法

语法：stop（参数1，参数2）//两个参数都是boolean值

参数1：代表是否要清空未执行完的动画队列

参数2：代表是否要将正在执行的动画跳转到末状态

直接使用stop()方法，会立即停止当前正在执行的动画，如果接下来还有动画等待执行，则以当前状态开始接下来的动画。

组合动画的停止不能使用stop方法，必须使用带参数的stop方法，stop(true)，第一个参数为true。

可以把未执行的动画队列清空。

判断元素是否处于动画状态：

当用户快速在某个元素上执行动画时，就会出现动画积累，导致动画与用户的行为不一致。

解决方法是判断是否处于动画状态，不处于，才为动画添加新的动画

if(!$("div").is(":animated")){//没有进行动画，则添加新的动画}

延迟动画：

在动画执行过程中如果想要对动画进行延迟操作，则可以使用delay()方法；

$("div").animate({width:"300px"},3000).delay(1000).animate({left:"300px"},3000);

7.其他动画方法

toggle()方法：切换元素的显示状态。

$("div").click(function(){$(this).next().toggle();});

相当于hide()和show()的切换

slideToggle()方法：通过高度的变化，来改变元素的可见性

相当于slideUp()和slideDown()的切换

fadeTo()方法：把元素的不透明度以渐进的方式调整到指定的值

语法：fadeTo(时间，不透明度)；

fadeToggle()方法：通过调整元素的不透明度，来改变元素的可见性。

相当于fadeOut()和fadeIn()的切换