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);