JQuery学习笔记(2)

 

jQuery中的事件和动画

1.jQuery中的事件

JavaScript和html之间的交互通过用户在浏览器操作页面引发的事件来处理。jQuery提供了优雅的事件处理语法和强大的事件处理能力。

加载DOM $(document).ready()方法

事件模块中最重要的一个函数，极大提高了web应用程序的响应速度。在DOM完全就绪时就可以被调用。

$(document).ready(function(){})等价于$(function(){})

事件绑定 bind()方法（事件解绑定，unbind()）

格式为bind(type [, data] ,fn);

示例：$(#pannel h5.head).bind("click",function(){ $(this).next().show();})

Tips: this 引用的是携带响应行为的dom元素，将其直接转换为jQuery对象

合成事件 hover()方法 toggle()方法

hover()用于模拟光标悬停事件，hover(enter , leave);

toggle()用于模拟鼠标连续点击事件，toggle(fn1,fn2,...fnN); 第一次点击触发fn1，第二次触发fn2...

事件对象

IE-DOM和DOM实现事件对象的方法各不相同，jQuery对此进行了扩展和封装，使任何浏览器中都能很轻松的获取事件对象以及事件对象的一些属性。

$(element).bind("click",function(event){}); //event为事件对象

冒泡事件

点一个span，也会触发其外部的div以及外部的body的已经定义的click事件，可通过 event.stopPropagation();来停止冒泡。

默认事件

点击表单中的提交就会提交，有时候需要阻止元素的默认行为。 event.preventDefault();

Tips:如果想同时停止冒泡和默认，可以在事件处理函数中 return false; 这是一种简写。

模拟操作

有些时候我们定义了事件，可以通过 trigger() 来触发。

$('#btn').bind("myClick",function(){.....});

$('#btn').trigger("myClick");

2.jQuery中的动画

show()方法与hide()方法

show()除了可以使元素显示，还可以添加速度参数，show(1000)就是1000毫秒显示出来。 高、宽、不透明度同时变。

$("element").show("slow");//还有normal,fast

fadeIn()方法和fadeOut()方法

他们只改变元素的不透明度，同样可以设置速度参数。

自定义动画：animate()方法

animate(params,speed,callback)为其结构，params为属性和值的映射组，callback为在动画完成时的执行参数，可选。示例为left当前位置上减500px,最后改变样式。

$(this).animate({left:"+=500px"},3000，function(){$(this).css("border","5px solid blue")})

Tips：如果想延迟动画可在animate后加 .delay(1000)

Tips：动画animate()方法链式书写，动画是顺序发生的。

停止动画: stop()方法

stop([clearQueue],[gotoEnd]);为其结构。stop()方法会结束当前正在进行的动画，并立即执行队列中的下一个动画。clearQueue参数设为true时，可以立即停止并把剩下的动画都清空。gotoEnd参数可以让正在执行的动画直接到达结束时刻的状态。

$(this).stop(true).animate({height:"150"},200).animate({width:"300"},300)

判断元素是否处于动画状态: is(":animated")

if(!$(document).is(":animated")){//如果没动画，则添加新动画....}

其他动画方法

toggle()方法: 切换元素可见状态： $(this).next().toggle();

slideToggle()方法: 通过高度变化切换元素可见状态 $(this).next().sildeToggle();

fadeToggle()方法: 通过不透明度变化切换元素可见状态 $(this).next().fadeToggle();

fadeTo()方法: 以渐进方式调整元素的不透明度到指定的值。$(this).next().fadeTo(600,0.2);