jQuery中的事件与动画

标签：

加载DOM：

$(document).ready()方法,可以缩写成$(function(){}),$(document)也可以简写成$() 与传统的window.onload有所不同

1: onload方法将会在网页中所有元素被加载到浏览器后才执行 .ready方法将会在dom完全就绪时就可以被调用,并不等于所有元素关联的文件已经下载完毕

2: onload函数只能保存一个对函数的引用,而ready可以保存多个引用

事件的绑定:

bind(type,[data],fn)

绑定元素的事件,type为html事件类型（blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mouseover、mousemove、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、errror）,js的形式(去除on),data为传递的参数(可选),fu为监听的函数

注意data需要使用[]进行包装,在监听函数中使用一个参数进行捕获,e.data获取数组形式后,进行访问,也可以使用简写的进行绑定事件（像click、mouseover、mouseout这类事件，程序中常会用到）

实例

当点击鼠标时，隐藏或显示 p 元素：

$("button").bind("click",function(){
  $("p").slideToggle();
});

同时绑定多个事件的方法:

$(function () {
                $("li").bind("mouseover", function() {
                    $(this).css("background", "pink");
                }).bind("mouseout", function() {
                    $(this).css("background", "");
                });

$("li").hover(

　　　　　　　　　　　　function () {  //mouseover
                          $(this).css("background", "pink");
                     },
                      function () { //mouseout
                         $(this).css("background", "");
                     }
                );

移除绑定：

unbind([type],[fn]) 移除元素上指定类型的事件,也可以不带参数,移除该元素所有的事件.也可以带两个参数,移除指定事件 ,类型上,不同的监听函数(一个事件可以有多个监听函数) 获取监听事件函数的方法,在开启监听时: $("btn").bind("click",myfun=function(){....}); //移除时,就可以使用myfun进行移除

实例

移除所有 p 元素的事件处理器：

$("button").click(function(){
  $("p").unbind();
});

如果没有规定参数，unbind() 方法会删除指定元素的所有事件处理程序。

one(...) 类似bind的使用,指定监听的事件类型,已经对于的函数,区别在于one只会触发一次后,就被自动移除

实例

当点击 p 元素时，增加该元素的文本大小：

$("p").one("click",function(){
$(this).animate({fontSize:"+=6px"});
});

控制元素显示和隐藏

动画

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

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

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

animate

用于创建自定义动画的函数。

animate(params,[speed],[easing],[fn])

params:一组包含作为动画属性和终值的样式属性和及其值的集合

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

fn:在动画完成时执行的函数，每个元素执行一次。

语法：

$(selector).animate({params},speed,callback);

jQuery animate() - 操作多个属性

请注意，生成动画的过程中可同时使用多个属性：

实例

$("button").click(function(){
  $("div").animate({
    left:‘250px‘,
    opacity:‘0.5‘,
    height:‘150px‘,
    width:‘150px‘
  });
}); 

jQuery中的事件与动画

标签：

原文地址：http://www.cnblogs.com/cnsdhzzl/p/5512556.html