jQuery学习笔记———jQuery中的事件和动画

1、加载DOM

$(window).load(function(){
  //加载window对象所绑定的处理函数
})

2、简写方式
$(document).ready(function(){
//编写代码
})

可写成下面代码：

$(function(){
//编写代码
}）

3、事件绑定
（1）$(selector).bind(event,data,function);
第1个参数是事件类型，包括：blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等，也可以是自定义名称。（注意：jQuery中的时间绑定类型比普通的js事件绑定类型少了”on”)
第2个参数为可选参数，作为event.data属性值传给事件对象的额外数据对象。
第3个参数则是用来绑定的处理函数。

简写绑定事件：
$(selector).mouseover(function(){
//实现代码
})

绑定多个事件类型：
$(“mouseover mouseout”,function(){});

（2）on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。

$("p").on("click", function(){
alert( $(this).text() );
});

（3）off()方法移除用.on()绑定的事件处理程序

$("p").off();       //移除所有的绑定事件
$("p").off( "click", "**" );          //移除绑定的click事件

（4）one()方法为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数

当所有段落被第一次点击的时候，显示所有其文本。
jQuery 代码:
$("p").one("click", function(){
  alert( $(this).text() );
});

（5）unbind([type],[data]);
第一个参数是事件类型，第二个参数是将要移除的函数。具体说明如下：
（1）如果没有参数，则删除所有的绑定的事件；
（2）如果提供了事件类型作为参数，则只删除该类型的绑定事件；
（3）如果把在绑定时传递的处理函数作为第2个参数，则只有这个特定的事件处理函数会被删除。

（6）trigger(type,[data])方法有两个参数，第一个参数是要触发的事件类型，第二个参数是要传递给事件处理函数的附加数据，以数组形式传递。

$('#btn').trigger("click"）；     //触发浏览器支持的具有相同名称的事件
$('#btn').trigger("myClick");    //触发自定义名称的事件
$("input").triggerHandler("focus");     //只想触发绑定的focus事件，而不想执行浏览器默认操作

4、事件委派

（1）delegate() 方法指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
当点击鼠标时，隐藏或显示 p 元素：

HTML 代码:
<div style="background-color:red">
<p>这是一个段落。</p>
<button>请点击这里</button>
</div>
jQuery 代码:
$("div").delegate("button","click",function(){
  $("p").slideToggle();
});

（2）删除由 delegate() 方法添加的一个或多个事件处理程序。

从p元素删除由 delegate() 方法添加的所有事件处理器：
jQuery 代码:
$("p").undelegate();
从p元素删除由 delegate() 方法添加的所有click事件处理器：
jQuery 代码:
$("p").undelegate( "click" )

5、合成事件
（1）hover()方法
hover(enter,leave) 用于模拟光标悬停事件，当光标移到到元素上时，会触发指定的第一个函数(enter)；当光标移出这个元素时，会触发指定的第2个函数(leave)

$(selector).hover(function(){},function(){});

注意：CSS中的伪类选择器”:hover”可以用于任何元素，可是在IE6中仅可用于超链接元素。此时可以使用jQuery中的hover()方法。hover()方法替代了jQuery中的bind(“mouseenter”)和bind(“mouseleave”)方法。

（2）toggle()方法
toggle(fn1,fn2,……fnN); 用于模拟鼠标连续点击事件。第一次单击元素触发指定的第一个函数，以此类推。

6、事件冒泡
多个元素响应同一个事件
（1）停止事件冒泡

$(selector).bind("click",function(event){
//实现函数
event.stopPropagation();      //停止事件冒泡
return false;   //这种方式也可以停止事件冒泡
});

（2）阻止默认行为（网页中的元素有自己的默认行为，如单击超链接后会跳转、点击“提交”按钮后表单会提交）

$(selector).bind("click",function(event){
//实现函数
event.preventDefault();     //阻止默认行为
return false;   //这种方式也可以阻止默认行为
});

注意：事件捕获和事件冒泡是刚好相反的两个过程，事件捕获是从最顶端往下开始触发。jQuery不支持事件捕获，如果需要使用事件捕获则需使用原生的JavaScript.

7、事件对象属性event.pageX和event.pageY
该方法的作用是获取到光标相对于页面的x坐标和y坐标，如果没有使用jQuery时，那么IE浏览器中是event.x/event.y,而Firefox浏览器中是用event.pageX/event.pageY.如果页面上有滚动条，则还要加上滚动条的宽度或高度。

8、jQuery中的动画
（1）show()方法和hide()方法（可以指定一个速度参数，如show(“slow”)或show(1000))

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

(2)fadeIn()方法和fadeOut()方法，在指定的一段时间内改变元素的不透明度

（3）slideUp()方法和slideDown()方法只会改变元素的高度。如果一个元素的display属性值为”none”,当调用slideDown()方法时，这个元素将由上至下延伸显示。slideUp()方法正好相反,元素将由下到上缩短隐藏。使用slideUp()方法和slideDown()方法再次对“内容”的显示和隐藏方式进行改变。

$("panel h2.head").toggle(function(){
         $(this).next().slideUp();},function(){
         $(this).next().slideDown();})

（4）toggle()方法可以切换元素的可见状态。如果元素是可见的，则切换为隐藏的；如果元素是隐藏的，则切换为可见的。下面两种代码都是表示一样的效果,当单击“标题”链接后，内容会在可见和隐藏两种状态之间切换。

$("panel h2.head").click(function(){
     $(this).next().toggle();
});

$("panel h2.head").toggle(function(){
         $(this).next().hide();},function(){
         $(this).next().show();})

$("panel h2.head").click(function(){
    if($(this).next().is(":visible")){
        $(this).next().hide();
    }else{
         $(this).next().show();
    }
         })

（5）slideToggle()方法通过高度变化来切换匹配元素的可见性，这个动画效果只调整元素的高度。下面两种代码效果一样，当单击“标题”链接后，“内容”会在可见和隐藏两种状态之间切换，不过是通过改变元素的高度来实现。

$("panel h2.head").click(function(){
     $(this).next().slideToggle();
});

$("panel h2.head").toggle(function(){
         $(this).next().slideUp();},function(){
         $(this).next().slideDown();})

(6)fadeTo()方法可以把元素的不透明度以渐进方式调整到指定的值。这个动画只调整元素的不透明度，即匹配的元素的高度和宽带不会发生变化。

$("panel h2.head").click(function(){
     $(this).next().fadeTo(600,0.2);   //当单击”标题“链接后，”内容“会渐渐地调整到指定的不透明度（20%)
});

(7)fadeToggle()方法通过不透明度变化来切换匹配元素的可见性。这个动画效果只调整元素的不透明度。下面两种代码效果一样。

$("panel h2.head").click(function(){
     $(this).next().fadeToggle();
});

$("panel h2.head").toggle(function(){
         $(this).next().fadeOut();},function(){
         $(this).next().fadeIn();})

(8)自定义动画方法animate()
animate(params, speed, callback);
参数说明：
params:一个包含样式属性及值得映射，比如{property:”value1”,property:”value2”,….}
speed:速度参数，可选。
callback:在动画完成时执行的函数，可选。

（9）停止元素的动画stop()
stop([clearQueue],[gotoEnd]);
参数clearQueue和gotoEnd都是可选的参数，为boolean值（true或false)。clearQueue代表是否清空未执行完的动画队列，gotoEnd代表是否直接将正在执行的动画跳转到末状态。

（10）判断元素是否处于动画状态
if(!$(element).is(“:animated”)){ //判断元素是否正处于动画状态
//如果当前没有进行动画，则添加新动画
}

（11）延迟动画delay(),delay()方法允许我们将队列中的函数延时执行，它既可以推迟动画队列中的函数的执行，也可以用于自定义队列。
如：delay(1000)

(12)finish()停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。

js中SetInterval与setTimeout用法

JS里设定延时：

使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间，再进行某项操作。

setTimeout(“function”,time) 设置一个超时对象 setInterval(“function”,time) 设置一个超时对象

SetInterval为自动重复，setTimeout不会重复。

clearTimeout(对象) 清除已设置的setTimeout对象 clearInterval(对象) 清除已设置的setInterval对象

使用定时器实现JavaScript的延期执行或重复执行 window对象提供了两个方法来实现定时器的效果，分别是window.setTimeout()和window.setInterval。其中前者可以使一段代码在指定时间后运行；而后者则可以使一段代码每过指定时间就运行一次