1.加载DOM

　　jQuery中，在$(document).ready()方法内注册的事件，只要DOM就绪就会被执行，此时可能元素的关联文件未下载完。

　　jQuery中的 load()方法，会在元素的onload事件中绑定一个处理函数。比如$(window).load(function(){...}),等价于JavaScript中的window.onload=function(){...}，该方法需要等网页所有元素都加载完（包括管理文件）。

　　2.事件绑定

　　在文档装载完之后，可以为元素绑定事件来完成一些操作。可以使用bind()方法来对匹配元素进行特定的事件绑定。

　　语法： bind(type,[data],fn);

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>--</title>
  6. <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  7. <link rel="stylesheet" type="text/css" href="../../css/style.css" />
  8. <script type="text/javascript">
  9. $(function(){
  10.     $("#panel h5.head").bind("click",function(){
  11.         var $content = $(this).next();
  12.         if($content.is(":visible")){
  13.             $content.hide();
  14.         }else{
  15.             $content.show();
  16.         }
  17.     })
  18. })
  19. </script>
  20. </head>
  21. <body>
  22. <div id="panel">
  23.     <h5 class="head">什么是jQuery?</h5>
  24.     <div class="content">
  25.         jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
  26.     </div>
  27. </div>
  28. </body>
  29. </html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>--</title>
  6. <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  7. <link rel="stylesheet" type="text/css" href="../../css/style.css" />
  8. <script type="text/javascript">
  9. $(function(){
  10.     $("#panel h5.head").bind("mouseover",function(){
  11.         $(this).next().show();
  12.     });
  13.       $("#panel h5.head").bind("mouseout",function(){
  14.          $(this).next().hide();
  15.     })
  16. })
  17. </script>
  18. </head>
  19. <body>
  20. <div id="panel">
  21.     <h5 class="head">什么是jQuery?</h5>
  22.     <div class="content">
  23.         jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
  24.     </div>
  25. </div>
  26. </body>
  27. </html>

　　3.合成事件

　　jQuery中有2个合成事件，hover()方法与toggle()方法。

　　hover() 语法：hover(enter,leave);  用来模拟光标悬停事件。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>--</title>
  6. <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  7. <link rel="stylesheet" type="text/css" href="../../css/style.css" />
  8. <script type="text/javascript">
  9. $(function(){
  10.     $("#panel h5.head").hover(function(){
  11.         $(this).next().show();
  12.     },function(){
  13.         $(this).next().hide();
  14.     })
  15. })
  16. </script>
  17. </head>
  18. <body>
  19. <div id="panel">
  20.     <h5 class="head">什么是jQuery?</h5>
  21.     <div class="content">
  22.         jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
  23.     </div>
  24. </div>
  25. </body>
  26. </html>

　　toggle()语法：toggle(fn1,fn2,...fnN); 用来模拟鼠标连续单击事件。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>--</title>
  6. <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  7. <link rel="stylesheet" type="text/css" href="../../css/style.css" />
  8. <script type="text/javascript">
  9.  
  10. $(function(){
  11.     $("#panel h5.head").toggle(function(){
  12.             $(this).next().toggle();
  13.     },function(){
  14.             $(this).next().toggle();
  15.     })
  16. })
  17.  
  18. /*$(function(){
  19.     $("#panel h5.head").click(function(){
  20.             $(this).next().toggle();
  21.     })
  22. })*/
  23.  
  24. </script>
  25. </head>
  26. <body>
  27. <div id="panel">
  28.     <h5 class="head">什么是jQuery?</h5>
  29.     <div class="content">
  30.         jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
  31.     </div>
  32. </div>
  33. </body>
  34. </html>

　　4.事件冒泡

　　意思就是说，页面上有多个元素响应同一个事件。事件会按照DOM的层次结构像水泡一样不断往上至顶。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>4-4-1</title>
  6.     <style type="text/css">
  7.         *
  8.         {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.         body
  13.         {
  14.             font-size: 13px;
  15.             line-height: 130%;
  16.             padding: 60px;
  17.         }
  18.         #content
  19.         {
  20.             width: 220px;
  21.             border: 1px solid #0050D0;
  22.             background: #96E555;
  23.         }
  24.         span
  25.         {
  26.             width: 200px;
  27.             margin: 10px;
  28.             background: #666666;
  29.             cursor: pointer;
  30.             color: white;
  31.             display: block;
  32.         }
  33.         p
  34.         {
  35.             width: 200px;
  36.             background: #888;
  37.             color: white;
  38.             height: 16px;
  39.         }
  40.     </style>
  41.     <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  42.     <script type="text/javascript">
  43.         $(function () {
  44.             // 为span元素绑定click事件
  45.             $('span').bind("click", function () {
  46.                 var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
  47.                 $('#msg').html(txt);
  48.             });
  49.             // 为div元素绑定click事件
  50.             $('#content').bind("click", function () {
  51.                 var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
  52.                 $('#msg').html(txt);
  53.             });
  54.             // 为body元素绑定click事件
  55.             $("body").bind("click", function () {
  56.                 var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
  57.                 $('#msg').html(txt);
  58.             });
  59.         })
  60.     </script>
  61. </head>
  62. <body>
  63.     <div id="content">
  64.         外层div元素 <span>内层span元素</span> 外层div元素
  65.     </div>
  66.     <div id="msg">
  67.     </div>
  68. </body>
  69. </html>

　　停止冒泡

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>Panel</title>
  6.     <style type="text/css">
  7.         *
  8.         {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.         body
  13.         {
  14.             font-size: 13px;
  15.             line-height: 130%;
  16.             padding: 60px;
  17.         }
  18.         #content
  19.         {
  20.             width: 220px;
  21.             border: 1px solid #0050D0;
  22.             background: #96E555;
  23.         }
  24.         span
  25.         {
  26.             width: 200px;
  27.             margin: 10px;
  28.             background: #666666;
  29.             cursor: pointer;
  30.             color: white;
  31.             display: block;
  32.         }
  33.         p
  34.         {
  35.             width: 200px;
  36.             background: #888;
  37.             color: white;
  38.             height: 16px;
  39.         }
  40.     </style>
  41.     <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  42.     <script type="text/javascript">
  43.         $(function () {
  44.             // 为span元素绑定click事件
  45.             $('span').bind("click", function (event) {
  46.                 var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
  47.                 $('#msg').html(txt);
  48.                 event.stopPropagation();    //  阻止事件冒泡
  49.             });
  50.             // 为div元素绑定click事件
  51.             $('#content').bind("click", function (event) {
  52.                 var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
  53.                 $('#msg').html(txt);
  54.                 event.stopPropagation();    //  阻止事件冒泡
  55.             });
  56.             // 为body元素绑定click事件
  57.             $("body").bind("click", function () {
  58.                 var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
  59.                 $('#msg').html(txt);
  60.             });
  61.         })
  62.     </script>
  63. </head>
  64. <body>
  65.     <div id="content">
  66.         外层div元素 <span>内层span元素</span> 外层div元素
  67.     </div>
  68.     <div id="msg">
  69.     </div>
  70. </body>
  71. </html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>4-4-4</title>
  6.     <style type="text/css">
  7.         *
  8.         {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.         body
  13.         {
  14.             font-size: 13px;
  15.             line-height: 130%;
  16.             padding: 60px;
  17.         }
  18.         #content
  19.         {
  20.             width: 220px;
  21.             border: 1px solid #0050D0;
  22.             background: #96E555;
  23.         }
  24.         span
  25.         {
  26.             width: 200px;
  27.             margin: 10px;
  28.             background: #666666;
  29.             cursor: pointer;
  30.             color: white;
  31.             display: block;
  32.         }
  33.         p
  34.         {
  35.             width: 200px;
  36.             background: #888;
  37.             color: white;
  38.             height: 16px;
  39.         }
  40.     </style>
  41.     <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  42.     <script type="text/javascript">
  43.         $(function () {
  44.             // 为span元素绑定click事件
  45.             $('span').bind("click", function (event) {
  46.                 var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
  47.                 $('#msg').html(txt);
  48.                 return false;
  49.             });
  50.             // 为div元素绑定click事件
  51.             $('#content').bind("click", function (event) {
  52.                 var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
  53.                 $('#msg').html(txt);
  54.                 return false;
  55.             });
  56.             // 为body元素绑定click事件
  57.             $("body").bind("click", function () {
  58.                 var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
  59.                 $('#msg').html(txt);
  60.             });
  61.         })
  62.     </script>
  63. </head>
  64. <body>
  65.     <div id="content">
  66.         外层div元素 <span>内层span元素</span> 外层div元素
  67.     </div>
  68.     <div id="msg">
  69.     </div>
  70. </body>
  71. </html>

　　阻止默认行为

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title></title>
  6.     <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  7.     <script type="text/javascript">
  8.         $(function () {
  9.             $("#sub").bind("click", function (event) {
  10.                 var username = $("#username").val();  //获取元素的值
  11.                 if (username == "") {     //判断值是否为空
  12.                     $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息
  13.                     event.preventDefault();  //阻止默认行为 ( 表单提交 )
  14.                 }
  15.             })
  16.         })
  17.     </script>
  18. </head>
  19. <body>
  20.     <form action="test.html">
  21.     用户名：<input type="text" id="username" />
  22.     <br />
  23.     <input type="submit" value="提交" id="sub" />
  24.     </form>
  25.     <div id="msg">
  26.     </div>
  27. </body>
  28. </html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title></title>
  6.     <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  7.     <script type="text/javascript">
  8.         $(function () {
  9.             $("#sub").bind("click", function (event) {
  10.                 var username = $("#username").val();  //获取元素的值
  11.                 if (username == "") {     //判断值是否为空
  12.                     $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息
  13.                     return false;
  14.                 }
  15.             })
  16.         })
  17.     </script>
  18. </head>
  19. <body>
  20.     <form action="test.html">
  21.     用户名：<input type="text" id="username" />
  22.     <br />
  23.     <input type="submit" value="提交" id="sub" />
  24.     </form>
  25.     <div id="msg">
  26.     </div>
  27. </body>
  28. </html>

　　5.事件对象的属性

　　jQuery对事件对象常用的属性进行了封装。

　　(1)event.type 可以获取事件的类型

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title></title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.     <!--   引入jQuery -->
  7.     <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  8.     <script>
  9.         $(function () {
  10.             $("a").click(function (event) {
  11.                 alert(event.type); //获取事件类型
  12.                 return false; //阻止链接跳转
  13.             });
  14.         })
  15.     </script>
  16. </head>
  17. <body>
  18.     <a href='http://google.com'>click me .</a>
  19. </body>
  20. </html>

　　(2)event.target 可以获取出发事件的元素

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title></title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.     <!--   引入jQuery -->
  7.     <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  8.     <script>
  9.         $(function () {
  10.             $("a[href=http://google.com]").click(function (event) {
  11.                 alert(event.target.href); //获取触发事件的<a>元素的href属性值
  12.                 return false; //阻止链接跳转
  13.             });
  14.         })
  15.     </script>
  16. </head>
  17. <body>
  18.     <a href='http://google.com'>click me .</a>
  19. </body>
  20. </html>

　　(3)event.pageX和event.pageY 可以获取光标相对于页面的x坐标与y坐标。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title></title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.     <!--   引入jQuery -->
  7.     <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  8.     <script>
  9.         $(function () {
  10.             $("a").click(function (event) {
  11.                 alert("Current mouse position: " + event.pageX + ", " + event.pageY); //获取鼠标当前相对于页面的坐标
  12.                 return false; //阻止链接跳转
  13.             });
  14.         })
  15.     </script>
  16. </head>
  17. <body>
  18.     <a href='http://google.com'>click me .</a>
  19. </body>
  20. </html>

　　(4)event.which 可以在鼠标单击事件中获取鼠标的左中右键，也可以获取键盘键。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.  <title></title>
  5.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.  <!--   引入jQuery -->
  7. <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  8.  <script>
  9. $(function(){
  10.     $("a").mousedown(function(e){
  11.         alert(e.which)  // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键
  12.         return false;//阻止链接跳转
  13.     })
  14. })
  15.   </script>
  16. </head>
  17. <body>
  18. <a href='http://google.com'>click me .</a>
  19. </body>
  20. </html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title></title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.     <!--   引入jQuery -->
  7.     <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  8.     <script>
  9.         $(function () {
  10.             $("input").keyup(function (e) {
  11.                 alert(e.which);
  12.             })
  13.         })
  14.     </script>
  15. </head>
  16. <body>
  17.     <input />
  18. </body>
  19. </html>

　　6.移除事件

　　unbind([type],[data])方法用来移除事件。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>4-6-2</title>
  6.     <style type="text/css">
  7.         *
  8.         {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.         body
  13.         {
  14.             font-size: 13px;
  15.             line-height: 130%;
  16.             padding: 60px;
  17.         }
  18.         p
  19.         {
  20.             width: 200px;
  21.             background: #888;
  22.             color: white;
  23.             height: 16px;
  24.         }
  25.     </style>
  26.     <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  27.     <script type="text/javascript">
  28.         $(function () {
  29.             $('#btn').bind("click", function () {
  30.                 $('#test').append("<p>我的绑定函数1</p>");
  31.             }).bind("click", function () {
  32.                 $('#test').append("<p>我的绑定函数2</p>");
  33.             }).bind("click", function () {
  34.                 $('#test').append("<p>我的绑定函数3</p>");
  35.             });
  36.             $('#delAll').click(function () {
  37.                 $('#btn').unbind("click");
  38.             });
  39.         })
  40.     </script>
  41. </head>
  42. <body>
  43.     <button id="btn">
  44.         点击我</button>
  45.     <div id="test">
  46.     </div>
  47.     <button id="delAll">
  48.         删除所有事件</button>
  49. </body>
  50. </html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>Panel</title>
  6.     <style type="text/css">
  7.         *
  8.         {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.         body
  13.         {
  14.             font-size: 13px;
  15.             line-height: 130%;
  16.             padding: 60px;
  17.         }
  18.         p
  19.         {
  20.             width: 200px;
  21.             background: #888;
  22.             color: white;
  23.             height: 16px;
  24.         }
  25.     </style>
  26.     <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  27.     <script type="text/javascript">
  28.         $(function () {
  29.             $('#btn').bind("click", myFun1 = function () {
  30.                 $('#test').append("<p>我的绑定函数1</p>");
  31.             }).bind("click", myFun2 = function () {
  32.                 $('#test').append("<p>我的绑定函数2</p>");
  33.             }).bind("click", myFun3 = function () {
  34.                 $('#test').append("<p>我的绑定函数3</p>");
  35.             });
  36.             $('#delTwo').click(function () {
  37.                 $('#btn').unbind("click", myFun2);
  38.             });
  39.         })
  40.     </script>
  41. </head>
  42. <body>
  43.     <button id="btn">
  44.         点击我</button>
  45.     <div id="test">
  46.     </div>
  47.     <button id="delTwo">
  48.         删除第二个事件</button>
  49. </body>
  50. </html>

　　one(type,[data],fn)方法可以为元素绑定处理函数，当处理函数触发一次后立即删除。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>4-6-4</title>
  6.     <style type="text/css">
  7.         *
  8.         {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.         body
  13.         {
  14.             font-size: 13px;
  15.             line-height: 130%;
  16.             padding: 60px;
  17.         }
  18.         p
  19.         {
  20.             width: 200px;
  21.             background: #888;
  22.             color: white;
  23.             height: 16px;
  24.         }
  25.     </style>
  26.     <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  27.     <script type="text/javascript">
  28.         $(function () {
  29.             $('#btn').one("click", function () {
  30.                 $('#test').append("<p>我的绑定函数1</p>");
  31.             }).one("click", function () {
  32.                 $('#test').append("<p>我的绑定函数2</p>");
  33.             }).one("click", function () {
  34.                 $('#test').append("<p>我的绑定函数3</p>");
  35.             });
  36.         })
  37.     </script>
  38. </head>
  39. <body>
  40.     <button id="btn">
  41.         点击我</button>
  42.     <div id="test">
  43.     </div>
  44. </body>
  45. </html>

　　7.模拟操作

　　jQuery中可以使用trigger()方法完成模拟操作。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title></title>
  6.     <style type="text/css">
  7.         *
  8.         {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.         body
  13.         {
  14.             font-size: 13px;
  15.             line-height: 130%;
  16.             padding: 60px;
  17.         }
  18.         p
  19.         {
  20.             width: 200px;
  21.             background: #888;
  22.             color: white;
  23.             height: 16px;
  24.         }
  25.     </style>
  26.     <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  27.     <script type="text/javascript">
  28.         $(function () {
  29.             $('#btn').bind("click", function () {
  30.                 $('#test').append("<p>我的绑定函数1</p>");
  31.             }).bind("click", function () {
  32.                 $('#test').append("<p>我的绑定函数2</p>");
  33.             }).bind("click", function () {
  34.                 $('#test').append("<p>我的绑定函数3</p>");
  35.             });
  36.             $('#btn').trigger("click");
  37.         })
  38.     </script>
  39. </head>
  40. <body>
  41.     <button id="btn">
  42.         点击我</button>
  43.     <div id="test">
  44.     </div>
  45. </body>
  46. </html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title></title>
  6.     <style type="text/css">
  7.         *
  8.         {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.         body
  13.         {
  14.             font-size: 13px;
  15.             line-height: 130%;
  16.             padding: 60px;
  17.         }
  18.         p
  19.         {
  20.             width: 200px;
  21.             background: #888;
  22.             color: white;
  23.             height: 16px;
  24.         }
  25.     </style>
  26.     <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
  27.     <script type="text/javascript">
  28.         $(function () {
  29.             $('#btn').bind("myClick", function (event, message1, message2) {
  30.                 $('#test').append("<p>" + message1 + message2 + "</p>");
  31.             });
  32.             $('#btn').click(function () {
  33.                 $(this).trigger("myClick", ["我的自定义", "事件"]);
  34.             }).trigger("myClick", ["我的自定义", "事件"]);
  35.         })
  36.     </script>
  37. </head>
  38. <body>
  39.     <button id="btn">
  40.         点击我</button>
  41.     <div id="test">
  42.     </div>
  43. </body>
  44. </html>

PS：参考文献《锋利的jQuery》

第四章 jQuery中的事件的更多相关文章

  1. 第三章 jQuery中的事件与动画

    第三章jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...

  2. JQuery制作网页—— 第七章 jQuery中的事件与动画

    1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...

  3. 第4章 jQuery中的事件和动画

    4.1 jQuery中的事件 4.1.1 加载DOM jQuery就是用 `$(document).ready()方法来代替传统JavaScript的window.onload方法的. 1.执行时机 ...

  4. 第3章 jquery中的事件和动画

    一,jquery中的事件 (1).执行时机 $(document).ready()和window.onload方法有相似的功能,但是在执行时机方面有区别,windwo.onload在网页中所有的元素包 ...

  5. 四、jquery中的事件与应用

    当用户浏览页面时,浏览器会对页面代码进行解释或编译--这个过程实质上是通过时间来驱动的,即页面在加载时,执行一个Load事件,在这个事件中实现浏览器编译页面代码的过程.时间无论在页面元素本身还是在元素 ...

  6. 第四篇 jQuery中的事件与应用

    4.1 事件中的冒泡现象,ready()方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  7. 第七章 jQuery中的事件与动画

    事件的分类 基础事件: 鼠标事件 键盘事件 window事件 表单事件 复合事件: 鼠标光标悬停 鼠标连续点击 基础事件: 实例: mouseenter()和mouseover()用法的区别: mou ...

  8. jQuery中的事件和动画——《锋利的jQuery》（第2版）读书笔记2

    第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){   // 编写代码... }); 可以简写成: $(function( ...

  9. jQuery 中的事件绑定

    一.事件概念 和数据库中的触发器一样,当操作了数据的时候会引发对应的触发器程序执行 一样,JS 中的事件就是对用户特定的行为作出相应的响应的过程,其实上就是浏览器 监听到用户的某些行为的时候会执行对应 ...

随机推荐

  1. Java中HashMap和TreeMap的区别深入理解

    首先介绍一下什么是Map.在数组中我们是通过数组下标来对其内容索引的,而在Map中我们通过对象来对对象进行索引,用来索引的对象叫做key,其对应的对象叫做value.这就是我们平时说的键值对. Has ...

  2. 软件工程 --- Pair Project: Elevator Scheduler [电梯调度算法的实现和测试]

    软件工程  ---   Pair Project: Elevator Scheduler [电梯调度算法的实现和测试] 说明结对编程的优点和缺点. 结对编程的优点如下: 在独立设计.实现代码的过程中不 ...

  3. sts中从svn导入maven项目

    1.创建资源库 2.导入项目作为本地项目 3.将子module从本地导入(默认情况下,只会将主pom所在的工程导入)

  4. JPA主键策略

    JPA 自带的主键策略有 4 种,在枚举 javax.persistence.GenerationType 中,分别是:TABLE.SEQUENCE.IDENTITY.AUTO. TABLE:通过表产 ...

  5. 剑指OFFER之合并有序链表（九度OJ1519）

    题目描述: 输入两个单调递增的链表,输出两个链表合成后的链表,当然我们需要合成后的链表满足单调不减规则.(hint: 请务必使用链表.) 输入: 输入可能包含多个测试样例,输入以EOF结束.对于每个测 ...

  6. 对PostgreSQL cmin和cmax的理解

    看例子: 开两个终端来对比: 在终端A: [pgsql@localhost bin]$ ./psql psql () Type "help" for help. pgsql=# b ...

  7. Lync边缘服务器配置

    以下步骤均使用Lync管理员权限即可完成 1.在前端下载并编辑拓扑,新建边缘池 如果边缘池中只有一台服务器,则池名称与服务器名称相同,如下: 如果需要删除边缘池,则需要先取消关联,如下: 2.发布拓扑 ...

  8. poj 1147 Binary codes

    Binary codes Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5647   Accepted: 2201 Desc ...

  9. 该优化针对Linux X86_X64环境

    http://netkiller.github.io/www/tomcat/server.html 1. Tomcat优化其实就是对server.xml优化(开户线程池,调整http connecto ...

  10. MyDetailedOS

    http://njumdl.sinaapp.com/ https://github.com/mudongliang