jQuery和DOM

jQuery事件绑定

bind(type, [data], fn)   //type 事件类型  [,data]：传递给处理函数进行处理的额外数据 fn:用来绑定的处理函数

$("div").bind("click",function(){});   // 绑定一个事件

$("div").bind("mouseover mouseout",function(){}); //同时绑定多个事件

合成事件：hover()和toggle()

hover()方法

hover(enter,leave); //用于模拟光标悬停事件，当鼠标移到元素上的时候会触发enter函数，当鼠标离开元素的时候会触发leave函数。

toggle()方法

toggle([fn1],[fn2],[fn3])

//1，用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的click事件。

//2,toggle()方法另一个功能是显示的时候隐藏，隐藏的时候显示。

事件对象

在jQuery中使用事件对象，只需为函数添加一个参数。

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

      //函数处理语句

}) 

停止事件冒泡

使用event.stopPropagation()方法来停止事件冒泡。

组织默认行为

使用event.preventDefault()方法来阻止元素的默认行为。

同时对事件对象停止冒泡和默认行为

使用return false这种简单方式就可以，不用以上两句。

常用的事件对象属性

event.type 用于获取事件类型，比如click

event.target  触发的元素

event.pageX 获取到光标相对于页面的x坐标

event.pageY获取到光标相对于页面的y坐标

event.which 获取鼠标的左中右键，分别为1，2，3.

event.metaKey：键盘事件中获取<ctrl>按键。

移除事件

语法：unbind([type],[data]);//1,如果没有参数，则删除所有的绑定事件

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

  3.如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的时间处理函数被删除。

模拟操作

在jQuery中，可以使用trigger()方法完成模拟操作。例如：

$("#btn").trigger("click");  //模拟点击事件

触发自定义事件

$("#btn").bind("myclick",function(){//函数体});

$("#btn").trigger("myclick");

传递数据

$("#btn").bind("myclick").function(event,msg1,msg2){

      $("#test").append("<p>"+msg1+msg2+"</p>);

});

$("#btn").triger("myclick",["我的自定义","事件"]);

jQuery实现动画与特效

jQuery库提供了丰富的动画效果，通过使用可以给网页添加非常精彩的视觉效果，给用户一种全新的体验。

1,show([speed,[easing],[fn]]),hide([speed,[easing],[fn]])

元素的显示和隐藏，同时修改多个样式属性即宽度、高度和不透明度。

2,toggle([speed],[easing],[fn])用来替代show()和hide()方法

3,slideDown([speed],[easing],[fn]),slideUp([speed],[easing],[fn])

元素从上至下和从下至上显示，只改变高度。

4,slideToggle([speed],[easing],[fn])用来替代slideDown()和slideUp()

5,fadeIn([speed],[easing],[fn])和fadeOut([speed],[easing],[fn])

元素淡入和淡出显示，只改变不透明度

6,fadeTo([speed],[easing],[fn])元素淡入指定不透明度的效果，只改变不透明度

7,fadeToggle([speed],[easing],[fn])用来代替fadeIn()和fadeOut()

自定义动画方法animate()

很多情况下，上面提供的动画方法无法满足用户的各种需求，那么就要对动画有更多的控制，可以使用animate()方法来自定义动画。

语法：animate(params,speed,callback)

1.params:一个包含样式属性及值的映射，比如{property1:"value",...}

2.speed:速度参数，可选

3.callback：动画完成时执行的函数，可选

示例：

$("#mydiv").click(function(){

      $(this).animate({left:"500px"},3000)

                 .animate({height:"200px"},3000);

}); //此动画是多重动画，动画按顺序进行。先右移动再高度放大。

停止动画

语法：stop([clearQueue],[goToEnd])

1.clearQueue：如果设置成true，则清空未执行完的动画队列。可以立即结束动画。

2.gotoEnd:让当前正在执行的动画立即完成

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

if(!$("element").is(":animated")){}

延时动画

语法：delay(duration)

$('#foo').slideUp(300).delay(800).fadeIn(400);