【JavaScript】jQuery中的事件与动画

来源：互联网发布：网络信息加密技术编辑：程序博客网时间：2024/05/18 06:19

jQuery中的事件

    在jQuery中，事件总体分为两大类：简单事件和复合事件。简单事件，与JavaScript中的事件几乎一样，包括有window事件、鼠标事件、键盘事件、表单事件等，只是其对应的方法略有不同。复合事件，则是截取组合了用户操作，并且以多个函数作为响应而自定义的处理程序。

一：基础事件

语法：事件名 = "函数名()";    或者DOM对象.事件名=函数;

1.window事件

所谓window事件，就是当用户执行某些会影响浏览器的操作时，而触发的事件。例如：打开网页时加载页面、关闭窗口、调节窗口大小、移动窗口等操作引发的事件处理。在jQuery中，常用的window事件有文档就绪事件，它对应的方法是ready()。更多的window事件，[查看这里](http://www.cnblogs.com/wqj0405/archive/2011/12/09/2282032.html)

2.鼠标事件

常用鼠标事件的方法方法描述执行时机 click() 触发或将函数绑定到指定元素的click事件单击鼠标时 mouseover() 触发或将函数绑定到指定元素的mouseover事件鼠标指针移过时 mouseout() 触发或将函数绑定到指定元素的mouseout事件鼠标指针移出时

//示例    <script type = "text/javascript">        $(document).ready(function(){        $("#nav li").mouseover(function(){  //当鼠标指针移过#nav li元素时            $(this).addClass("type");  //为鼠标指针所在li元素添加样式        });    });        $("#nav li").mouseout(function(){  //当鼠标指针移出#nav li 元素时        $(this).removeClass();  //移除鼠标指针所在li元素的全部样式    });    </script>

    注意：this关键词，指向调用这个方法的DOM对象，在上述代码中，this代表的是与鼠标事件关联的 #nav li 元素    在web应用中，鼠标事件常常用于网站导航、下拉菜单、选项卡、轮播广告等。

3.键盘事件

键盘事件是指当键盘聚焦到Web浏览器时，用户每次按下或者释放键盘上的按键都会产生事件。

常用键盘事件的方法方法描述执行时机 keydown() 触发或将函数绑定到指定元素的keydown事件按下按键时 keyup() 触发或将函数绑定到指定元素的keyup事件释放按键时 keypress() 触发或将函数绑定到指定元素的keypress事件产生可打印的字符时

//示例,一段w3School的代码//说明keydown事件与keyup事件<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ //在文本框输入内容时，触发keydown（键盘按下事件）  $("input").keydown(function(){      $("input").css("background-color","#FFFFCC");  });  //在文本框结束输入内容时，触发keyup（键盘释放事件）  $("input").keyup(function(){    $("input").css("background-color","#D6D6FF");  //通过按钮，调用input元素的keydown事件  $("#btn1").click(function(){    $("input").keydown();  });    //通过按钮，调用input元素的keyup事件  $("#btn2").click(function(){    $("input").keyup();  });  });</script></head><body>Enter your name: <input type="text" /><p>当发生 keydown 和 keyup 事件时，输入域会改变颜色。请试着在其中输入内容。</p><p><button id="btn1">触发输入域的 keydown 事件</button></p><p><button id="btn2">触发输入域的 keyup 事件</button></p></body></html>//说明keypress()事件<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">i=0;$(document).ready(function(){  $("input").keypress(function(){    $("span").text(i+=1);  });  $("button").click(function(){    $("input").keypress();  });});</script></head><body>Enter your name: <input type="text" /><p>Keypresses:<span>0</span></p><button>触发输入域的 keypress 事件</button></body></html>

keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。keypress() 方法触发 keypress 事件，或规定当发生 keypress 事件时运行的函数。

4.表单事件

表单事件是所有事件类型中最稳定，且支持最稳定的事件之一。

常用表单事件的方法方法描述执行时机 focus() 触发或将函数绑定到指定元素的focus事件获得焦点 blur() 触发或将函数绑定到指定元素的blur事件失去焦点

//示例：代码来自w3School<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){    //触发获得焦点事件  $("input").focus(function(){    $("input").css("background-color","#FFFFCC");  });    //触发失去焦点事件  $("input").blur(function(){    $("input").css("background-color","#D6D6FF");  });  $("#btn1").click(function(){    $("input").focus();  });    $("#btn2").click(function(){    $("input").blur();  }); });</script></head><body>Enter your name: <input type="text" /><p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p><p><button id="btn1">触发输入域的 focus 事件</button></p><p><button id="btn2">触发输入域的 blur 事件</button></p></body></html>

二：绑定事件与移除事件

1.绑定事件

在jQuery中，如果需要为匹配的元素同时绑定一个或多个事件，可以使用bind()方法。    语法：    1、绑定一个函数    $(selector).bind(event,data,function)    2、绑定多个函数    $(selector).bind({event:function, event:function, ...})    envet：事件，例如blur、focus、click、mouseout等基础事件，也可以是自定义事件。    [data]：可选参数，作为event.data属性值传递给事件对象的额外数据对象，该参数不是必须的。    function：处理函数，用来绑定的处理函数

//示例：代码来自w3School//绑定一个事件<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("button").bind("click",function(){    $("p").slideToggle();  });});</script></head><body><p>This is a paragraph.</p><button>请点击这里</button></body></html>//绑定多个事件<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ //对button元素绑定事件，单个事件用放在{}当中，并用逗号分隔。  $("button").bind({    //单击时触发的事件    click:function(){$("p").slideToggle();},    //鼠标移过时触发的事件    mouseover:function(){$("body").css("background-color","red");},      //鼠标移出时触发的事件    mouseout:function(){$("body").css("background-color","#FFFFFF");}    });});</script></head><body><p>This is a paragraph.</p><button>请点击这里</button></body></html>

2.移除事件

    移除事件与绑定事件是相对的，在jQuery中，为匹配的元素移除单个或多个事件，移除事件使用unbind()方法。    语法：    unbind([envet],[function])    envet：事件，例如blur、focus、click、mouseout等基础事件，也可以是自定义事件。    function：处理函数，用来解除绑定的处理函数

unbind()方法有2个参数，这两个参数都不是必须的，当unbind()不带参数时，表示移除所有绑定的事件

//示例：代码来自w3School//unbind()不带参数时<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("p").click(function(){    $(this).slideToggle();  });  //获取button元素，单击时移除所有事件  $("button").click(function(){    $("p").unbind();  });});</script></head><body><p>这是一个段落。</p><p>这是另一个段落。</p><p>点击任何段落可以令其消失。包括本段落。</p><button>删除 p 元素的事件处理器</button></body></html>//unbind()带参数时<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">function alertMe(){alert("Hello World!");}$(document).ready(function(){  $("p").click(alertMe);  $("button").click(function(){    //移除单击事件时的alertMe函数    $("p").unbind("click",alertMe);  });});</script></head><body><p>这是一个段落。</p><p>这是另一个段落。</p><p>点击任何段落可以触发一个提示框。包括本段落。</p><button>从 p 元素的 click 事件删除提示框函数</button></body></html>

三：复合事件

1、hover()方法

在jQuery中，hover()方法用于模拟鼠标指针悬停事件。当鼠标指针移动到元素上时，会触发指定的第一个函数（enter：进入），当鼠标指针移出这个元素时，会触发指定的第2个函数（leave：离开），该方法相当于mouseover与mouseout事件的组合。    语法：    hover(enterfunction,leavefunction);

//示例    $(document).ready(function(){        $("bottom").hover(function(){        //鼠标移入时触发的函数            $("li").css("display","block");        },function(){        //鼠标移出时触发的函数            $("li").css("display","none");        });    });//函数之间用逗号分隔

2.toggle()方法

在jQuery中toggle()方法用于模拟鼠标连续click事件。第一次单击元素，触发指定的第一个函数；再次单击同一个元素，触发指定的第二个函数；...依次类推，直到最后一个。随后的每次单击都重复对这几个函数轮番调用。    语法：    toggle(fn1,fn2,fn3,...fnN);

//示例，代码来自w3School<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("button").toggle(function(){    //第一次单击时    $("body").css("background-color","green");},    function(){    //第二次单击时    $("body").css("background-color","red");},    function(){    //第三次单击时    $("body").css("background-color","yellow");}  );});</script></head><body><button>请点击这里，来切换不同的背景颜色</button></body></html>//不同的函数用逗号分割

jQuery中的动画

1、控制元素显示与隐藏

    语法：        控制元素显示：$(selector).show([speed],[callback])        控制元素隐藏：$(selector).hide([speed],[callback])        seppd：可选。规定元素从隐藏到完全可见（从显示到完全隐藏）的速度。可能值：毫秒、slow、normal、fast。        在设置速度的情况下，元素从隐藏到完全可见（从显示到完全隐藏）的过程中，会逐渐改变高度、宽度、外边距、内边距和透明度。        callback:可选。show 函数执行完之后，要执行的函数。除非设置了 speed 参数，否则不能设置该参数。

//示例<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  //隐藏p元素  $(".btn1").click(function(){  $("p").hide(1000);  });  //显示p元素（背景颜色为红色），在百分百显示之后，改变p元素的背景颜色（背景颜色为绿色）  $(".btn2").click(function(){  $("p").show(1000,showColor);  $("p").css("background-color","red");  });});function showColor(){$("p").css("background-color","green");}</script></head><body><p>This is a paragraph.</p><button class="btn1">Hide</button><button class="btn2">Show</button></body></html>

2.改变元素透明度

1.控制元素淡入    语法：$(selector).fadeIn([speed],[callback]);2.控制元素淡出    语法：$(selector).fadeOut([speed],[callback]);    一般来说，fadeIn()方法fadeOut方法()常在网页中为轮播广告、菜单、信息提示框和弹出窗口等制作动画效果。

//示例<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $(".btn1").click(function(){  //单击时元素淡出  $("p").fadeOut(1000);  });  $(".btn2").click(function(){  //单击时元素淡入  $("p").fadeIn(1000);  });});</script></head><body><p>This is a paragraph.</p><button class="btn1">Hide</button><button class="btn2">Show</button></body></html>

3.改变元素高度

在jQuery中，用于改变元素高度的方法是slideUp()和slideDown()。若元素的display属性值为none，当调用slideDown()方法时，这个元素会从上向下延伸显示，而slideUp()方法正好相反，元素从下到上缩短直至隐藏。

//示例：<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $(".btn1").click(function(){//向上缩短隐藏  $("p").slideUp(1000);  });  $(".btn2").click(function(){//向下延伸显示  $("p").slideDown(1000);  });});</script></head><body><p>This is a paragraph.</p><button class="btn1">Hide</button><button class="btn2">Show</button></body></html>

注意：
jQuery中的所有动画效果，都可以设置3中速度参数，即slow、normal、fast（0.6、0.4、0.2）。
使用关键字做参数时，需要用双引号引起来，如fadeIn(“slow”)，而使用时间数值作为速度参数时，则不需要使用双引号，如fadeIn(1000).

更多的jQuery效果，查看这里

完

0 0