[关闭]
@guoxs 2015-08-22T09:09:10.000000Z 字数 4006 阅读 2753

jQuery 事件与应用

jQuery


页面加载时触发ready()事件

ready()事件类似于onLoad()事件,但前者只要页面的DOM结构加载后便触发,而后者必须在页面全部元素加载成功才触发,ready()可以写多个,按顺序执行。此外,下列写法是相等的:

  1. $(document).ready(function(){})等价于$(function(){});

使用bind()方法绑定元素的事件

bind()方法绑定元素的事件非常方便,绑定前,需要知道被绑定的元素名,绑定的事件名称,事件中执行的函数内容就可以,它的绑定格式如下:

  1. $(selector).bind(event,[data] function)

参数event为事件名称,多个事件名称用空格隔开,function为事件执行的函数。
使用bind()方法绑定单击(click)和鼠标移出(mouseout)这两个事件,触发这两个事件中,按钮将变为不可用:

  1. <input id="btntest" type="button" value="点击或移出就不可用了" />
  2. <script type="text/javascript">
  3. $(function () {
  4. $("#btntest").bind("click", function () {
  5. $(this).attr("disabled", "true");
  6. })
  7. $("#btntest").bind("mouseout", function () {
  8. $(this).attr("disabled", "true");
  9. })
  10. });
  11. </script>

使用hover()方法切换事件

hover()方法的功能是当鼠标移到所选元素上时,执行方法中的第一个函数,鼠标移出时,执行方法中的第二个函数,实现事件的切实效果,调用格式如下:

  1. $(selector).hover(overout);

over参数为移到所选元素上触发的函数,out参数为移出元素时触发的函数。
调用hover方法实现元素背景色的切换:

  1. <div>别走!你就是土豪</div>
  2. <script type="text/javascript">
  3. $(function () {
  4. $("div").hover(
  5. function () {
  6. $(this).addClass("orange");
  7. },
  8. function () {
  9. $(this).removeClass("orange")
  10. })
  11. });
  12. </script>

使用toggle()方法绑定多个函数

toggle()方法可以在元素的click事件中绑定两个或两个以上的函数,同时,它还可以实现元素的隐藏与显示的切换,绑定多个函数的调用格式如下:
$(selector).toggle(fun1(),fun2(),funN(),...)
其中,fun1,fun2就是多个函数的名称
toggle()方法支持目前主流稳定的jQuery版本1.8.2,在1.9.0之后的版本是不支持的。

toggle()方法控制元素的显示与隐藏属性:

  1. $(function () {
  2. $("#btntest").bind("click", function () {
  3. $("div").toggle();
  4. })
  5. });

使用unbind()方法移除元素绑定的事件

unbind()方法可以移除元素已绑定的事件,它的调用格式如下:

  1. $(selector).unbind(event,fun)

其中参数event表示需要移除的事件名称,多个事件名用空格隔开,fun参数为事件执行时调用的函数名称。

  1. $(function () {
  2. $("div").bind("click",function () {
  3. $(this).removeClass("backcolor").addClass("color");
  4. }).bind("dblclick", function () {
  5. $(this).removeClass("color").addClass("backcolor");
  6. })
  7. $("#btntest").bind("click", function () {
  8. $("div").unbind("click");
  9. $(this).attr("disabled", "true");
  10. });
  11. });

使用one()方法绑定元素的一次性事件

one()方法可以绑定元素任何有效的事件,但这种方法绑定的事件只会触发一次,它的调用格式如下:

  1. $(selector).one(event,[data],fun)

参数event为事件名称,data为触发事件时携带的数据,fun为触发该事件时执行的函数。
由于使用了one()方法绑定

元素的单击事件,因为事件函数只能执行一次,执行完成后,无论如何单击,都不再触发。

例如,使用one方法绑定

元素的单击事件,在事件执行的函数中,累计执行的次数,并将该次数显示在页面中,如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
  7. </head>
  8. <body>
  9. <h3>one()方法执行一次绑定事件</h3>
  10. <div>我被点击了(0)次</div>
  11. <script>
  12. $(function(){
  13. $(function(){
  14. var intI = 1;
  15. $("div").one("click",function(){
  16. intI ++;
  17. $(this).html("我被点击了("+ intI +")次")
  18. })
  19. })
  20. });
  21. </script>
  22. </body>
  23. </html>

调用trigger()方法手动触发指定的事件

trigger()方法可以直接手动触发元素指定的事件,这些事件可以是元素自带事件,也可以是自定义的事件,总之,该事件必须能执行,它的调用格式为:

  1. $(selector).trigger(event)

其中event参数为需要手动触发的事件名称。

  1. <script type="text/javascript">
  2. $(function () {
  3. $("div").bind("change-color", function () {
  4. $(this).addClass("color");
  5. });
  6. $("div").trigger("change-color");
  7. });

文本框的focus和blur事件

focus事件在元素获取焦点时触发,如点击文本框时,触发该事件;而blur事件则在元素丢失焦点时触发,如点击除文本框的任何元素,都会触发该事件。

  1. <body>
  2. <h3>表单中文本框的focusblur事件</h3>
  3. <input id="txtest" type="text" value="" />
  4. <div></div>
  5. <script type="text/javascript">
  6. $(function () {
  7. $("input")
  8. .bind("focus", function () {
  9. $("div").html("请输入您的姓名!");
  10. })
  11. $("input").bind("blur", function () {
  12. if ($(this).val().length == 0)
  13. $("div").html("你的名称不能为空!");
  14. })
  15. });
  16. </script>
  17. </body>

下拉列表框的change事件

当一个元素的值发生变化时,将会触发change事件,例如在选择下拉列表框中的选项时,就会触change事件。
使用bind()方法change事件,在该事件中,根据所选择项的不同,改变下拉列表框的背景色:

  1. <body>
  2. <h3>下拉列表的change事件</h3>
  3. <select id="seltest">
  4. <option value="葡萄">葡萄</option>
  5. <option value="苹果">苹果</option>
  6. <option value="荔枝">荔枝</option>
  7. <option value="香蕉">香蕉</option>
  8. </select>
  9. <script type="text/javascript">
  10. $(function () {
  11. $("select").bind("change", function () {
  12. if ($(this).val() == "苹果")
  13. $(this).css("background-color", "red");
  14. else
  15. $(this).css("background-color", "green");
  16. })
  17. });
  18. </script>
  19. </body>

调用live()方法绑定元素的事

与bind()方法相同,live()方法与可以绑定元素的可执行事件,除此相同功能之外,live()方法还可以绑定动态元素,即使用代码添加的元素事件,格式如下:

  1. $(selector).live(event,[data],fun)

参数event为事件名称,data为触发事件时携带的数据,fun为触发该事件时执行的函数。
从 jQuery 1.7 开始,不再建议使用.live()方法。1.9不支持.live(),本节代码编辑器里的js引用版本改为了1.8。
使用live()方法绑定按钮元素的click和mouseout两个事件,在这两个事件中,按钮将设置为不可用状态:

  1. <script type="text/javascript">
  2. $(function () {
  3. $("#btntest").live("click mouseout", function () {
  4. $(this).attr("disabled", "true");
  5. })
  6. $("body").append("<input id='btntest' type='button' value='点击或移出就不可用了' />");
  7. });
  8. </script>
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注