经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » jQuery » 查看文章
JQuery --- 第三期 (jQuery事件相关)
来源：cnblogs　　作者：CN丶Moti　　时间：2019/4/25 8:53:07　　对本文有异议

个人学习笔记

1.JQuery事件绑定

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>JQuery事件绑定</title>
  6.     <script src="../jquery-1.12.4.js"></script>
  7.         <script>
  8.                 $(function () {
  9.                     alert("hello");
  10.                     //  JQuery中有两种绑定方式
  11.                     /**
  12.                      * 1. eventName(fn)
  13.                      * 编码效率略高,但是部分时间JQuery没有实现,所以不能实现
  14.                      * 可以为元素绑定多个相同或不相同的事件,事件之间不会相互覆盖
  15.                      */
  16.                     $(".button1").click(function () {
  17.                         alert("click1");
  18.                     });
  19.                     $(".button1").click(function () {
  20.                         alert("click2");
  21.                     });
  22.                     $(".button2").mouseenter(function () {
  23.                         alert("mouseenter");
  24.                     });
  25.                     $(".button2").mouseleave(function () {
  26.                         alert("mouseleave");
  27.                     });
  28.                     /**
  29.                      * 2. on(eventName,fn)
  30.                      *  编码效率略低,但是所有js事件都可以添加
  31.                      *  可以为元素绑定多个相同或不相同的事件,事件之间不会相互覆盖
  32.                      */
  33.                     $(".button3").on("click",function () {
  34.                         alert("click3");
  35.                     });
  36.                     $(".button3").on("click",function () {
  37.                         alert("click4");
  38.                     });
  39.                     $(".button4").on("mouseenter",function () {
  40.                         alert("mouseenter");
  41.                     });
  42.                     $(".button4").on("mouseleave",function () {
  43.                         alert("mouseleave");
  44.                     });
  45.                 });
  46.         </script>
  47. </head>
  48. <body>
  49. <button class="button1">按钮1</button>
  50. <button class="button2">按钮2</button>
  51. <button class="button3">按钮3</button>
  52. <button class="button4">按钮4</button>
  53. </body>
  54. </html>

2.JQuery事件解绑

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>事件解绑</title>
  6.     <script src="../jquery-1.12.4.js"></script>
  7.         <script>
  8.                 $(function () {
  10.                     function click1() {
  11.                         alert("click1");
  12.                     };
  13.                     function click2() {
  14.                         alert("click2");
  15.                     };
  16.                     function mouseenter1() {
  17.                         alert("mouseenter");
  18.                     };
  19.                     function mouseleave1() {
  20.                         alert("mouseleave");
  21.                     };
  23.                     $(".button1").click(click1);
  24.                     $(".button1").click(click2);
  25.                     $(".button2").mouseenter(mouseenter1);
  26.                     $(".button2").mouseleave(mouseleave1);
  27.                     //移除事件
  28.                     /**
  29.                      * 适用off方法进行事件移除
  30.                      * 如果不传递任何参数,则会移除全部事件
  31.                      */
  32.                     $(".button2").off();
  33.                     /**
  34.                      * 如果传递一个参数,则会移除这一类事件
  35.                      */
  36.                     $(".button1").off("click");
  37.                     /**
  38.                      * 如果传递两个参数,则会移除这类事件的某个事件
  39.                      */
  40.                     $(".button1").off("click",click1);
  42.                 });
  43.         </script>
  44. </head>
  45. <body>
  46. <button class="button1">按钮1</button>
  47. <button class="button2">按钮2</button>
  48. </body>
  49. </html>

3.JQuery事件冒泡和默认行为和事件的自动触发

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>JQuery事件冒泡和默认行为和事件的自动触发</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         .father{
  12.             width: 200px;
  13.             height: 200px;
  14.             background: green;
  15.         }
  16.         .son{
  17.             width: 100px;
  18.             height: 100px;
  19.             background: blue;
  20.         }
  21.     </style>
  22.         <script src="../jquery-1.12.4.js"></script>
  23.         <script>
  24.                 $(function () {
  25.                     /*
  26.                     什么是事件冒泡
  27.                     怎样阻止事件冒泡
  28.                     什么是默认行为
  29.                     怎样阻止默认行为
  30.                      */
  31.                     $(".father").click(function () {
  32.                         alert("father");
  33.                     });
  34.                     $(".son").click(function (event) {
  35.                         alert("son");
  36.                         // return false;//阻止事件冒泡 方法一
  37.                         // event.stopPropagation();//阻止事件冒泡 方法二
  38.                     });
  39.                     $(".a").click(function (event) {
  40.                         alert("阻止跳转!");
  41.                         // return false;//阻止默认事件 方法一
  42.                         event.preventDefault();
  43.                     });
  44.                     $(".sub").click(function (event) {
  45.                         alert("阻止跳转!");
  46.                         // return false;//阻止默认事件 方法一
  47.                         event.preventDefault();
  48.                     });
  49.                     /**
  50.                      * 自动触发事件,方法一,触发事件的同时会触发冒泡事件或者默认行为
  51.                      * 特别的,当想将a标签设置自动触发和触发默认事件的时候,需要在a中将a的内容进行包裹,然后触发a的内容
  52.                      */
  53.                     $(".son").trigger("click");
  54.                     /**
  55.                      * 自动触发事件,方法二,触发事件的同时不会触发冒泡事件或者默认行为
  56.                      */
  57.                     $(".son").triggerHandler("click");
  58.                 });
  59.         </script>
  60. </head>
  61. <body>
  62. <div class="father">
  63.     <div class="son"></div>
  64. </div>
  65. <a href="http://www.baidu.com" class="a">我是百度</a>
  66. <form action="http://www.taobao.com">
  67.     <input type="text">
  68.     <input type="submit" class="sub">
  69. </form>
  70. </body>
  71. </html>

4.JQuery自定义事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>JQuery自定义事件</title>
  6.         <script src="../jquery-1.12.4.js"></script>
  7.         <script>
  8.                 $(function () {
  9.                     /**
  10.                      * 自定义事件必须满足两个条件
  11.                      *      1.事件必须是通过on绑定的
  12.                      *      2.事件必须通过trigger来触发(必须设置为trigger方式的自动触发)
  13.                      */
  14.                     $("button").on("myClick", function () {
  15.                         alert("myClick");
  16.                     });
  17.                     $("button").trigger("myClick");
  18.                 });
  19.         </script>
  20. </head>
  21. <body>
  22. <button>按钮</button>
  23. </body>
  24. </html>

5.JQuery事件的命名空间

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>JQuery事件的命名空间</title>
  6.         <script src="../jquery-1.12.4.js"></script>
  7.         <script>
  8.                 $(function () {
  9.                     /**
  10.                      * 想要事件的命名空间有效,必须满足两个条件
  11.                      *      1.事件是通过on来绑定
  12.                      *      2.通过trigger或者triggerHandler来触发事件
  13.                      *
  14.                      *      注意
  15.                      *          1.利用trigger触发子元素的带命名空间的事件,那么父元素带相同命名空间的事件也会被触发,而父元素
  16.                      *              没有带命名空间的事件不会被触发
  17.                      *          2.利用trigger触发子元素不带命名空间的事件,那么子元素所有相同类型的事件和父元素所有相同类型的
  18.                      *              事件都会被触发(不管带不带命名空间)
  19.                      */
  20.                     $("button").on("click.xw", function () {
  21.                         alert("click1");
  22.                     });
  23.                     $("button").on("click.moti", function () {
  24.                         alert("click2");
  25.                     });
  26.                     // $("button").trigger("click.xw");
  27.                     $("button").trigger("click.moti");
  28.                 });
  29.         </script>
  30. </head>
  31. <body>
  32. <button>按钮</button>
  33. </body>
  34. </html>

6.JQuery事件委托

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>JQuery事件委托</title>
  6.         <script src="../jquery-1.12.4.js"></script>
  7.         <script>
  8.                 $(function () {
  9.                     /*
  10.                     什么是事件委托?
  11.                          请别人帮忙,然后将做完的结果反馈给我们
  12.                      */
  13.                     $("button").click(function () {
  14.                         $("ul").append("<li>我是新增的li</li>");
  15.                     });
  16.                     /**
  17.                      * 在JQuery中,如果通过核心函数找到的元素不止一个,那么在添加事件的时候,JQuery会遍历所有找的元素
  18.                      * 给所有找到的元素添加事件
  19.                      * 找不到新增的li,无法添加事件
  20.                      */
  21.                     // $("ul>li").click(function () {
  22.                     //     console.log($(this).html());
  23.                     // });
  24.                     /**
  25.                      * 使用事件委托:找到一个在入口函数执行之前就有的元素来监听动态添加元素的某些事件
  26.                      * 有事件冒泡的原理
  27.                      */
  28.                     $("ul").delegate("li","click",function () {
  29.                         console.log($(this).html());
  30.                     });
  31.                 });
  32.         </script>
  33. </head>
  34. <body>
  35. <ul>
  36.     <li>我是第1个li</li>
  37.     <li>我是第2个li</li>
  38.     <li>我是第3个li</li>
  39. </ul>
  40. <button>新增li</button>
  41. </body>
  42. </html>

7.JQuery事件委托练习

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>JQuery事件委托练习</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         html,body{
  12.             width: 100%;
  13.             height: 100%;
  15.         }
  16.         .mask{
  17.             width: 100%;
  18.             height: 100%;
  19.             position: fixed;
  20.             top: 0;
  21.             left: 0;
  22.             background: rgba(0,0,0,0.5);
  23.         }
  24.         .login{
  25.             width: 400px;
  26.             height: 300px;
  27.             margin: 100px auto;
  28.             background: green;
  29.             position: relative;
  30.         }
  31.         .p{
  32.             padding-top: 20%;
  33.             font-size: 58px;
  34.         }
  35.         button {
  36.             position: absolute;
  37.             width: 50px;
  38.             height: 30px;
  39.             right: 0;
  40.             top: 0;
  41.             background: red;
  42.         }
  43.     </style>
  44.         <script src="../jquery-1.12.4.js"></script>
  45.         <script>
  46.                 $(function () {
  47.                     $("a").click(function () {
  48.                         var $mask = $("<div class=\"mask\">\n" +
  49.                             "    <div class=\"login\">\n" +
  50.                             "        <button>关闭</button>\n" +
  51.                             "        <p class=\"p\">HELLO!</p>\n" +
  52.                             "    </div>\n" +
  53.                             "</div>");
  54.                         $("body").append($mask);
  55.                         $("body").delegate(".login>button", "click",function () {
  56.                             $mask.remove();
  57.                         });
  58.                         return false;
  59.                     });
  60.                 });
  61.         </script>
  62. </head>
  63. <body>
  64. <a href="http://www.baidu.com">点击登录</a>
  65. </body>
  66. </html>

8.JQuery的事件移入和移出

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>JQuery事件的移入和移除</title>
  6.         <script src="../jquery-1.12.4.js"></script>
  7.         <script>
  8.                 $(function () {
  9.                     /*
  10.                         1.mouseover/mouseover
  11.                           注意:子元素被移入和移除也会触发父元素事件
  12.                      */
  13.                     $(".father").mouseover(function () {
  14.                         console.log("father被移入了");
  15.                     });
  16.                     $(".father").mouseover(function () {
  17.                         console.log("father被移出了");
  18.                     });
  19.                     /*
  20.                         2.mouseenter/mouseleave(推荐使用)
  21.                           注意:子元素被移入和移除不会会触发父元素事件
  22.                      */
  23.                     $(".father").mouseenter(function () {
  24.                         console.log("father被移入了");
  25.                     });
  26.                     $(".father").mouseleave(function () {
  27.                         console.log("father被移出了");
  28.                     });
  29.                     /**
  30.                      * 3.hover方法
  31.                      * 注意:子元素被移入和移除不会会触发父元素事件
  32.                      *   接收两个方法参数:
  33.                      *           第一个参数是被移入的时候执行的回调函数
  34.                      *           第二个参数是被移出的时候执行的回调函数
  35.                      */
  36.                     $(".father").hover(function () {
  37.                         console.log("father被移入了");
  38.                     },function () {
  39.                         console.log("father被移出了");
  40.                     });
  41.                     /**
  42.                      * 接收一个方法参数:同时监听移入和移出,执行相同的回调函数
  43.                      */
  44.                     $(".father").hover(function () {
  45.                         console.log("被移入或者移出了!");
  46.                     });
  47.                 });
  48.         </script>
  49.         <style>
  50.             *{
  51.                 margin: 0;
  52.                 padding: 0;
  53.             }
  54.             .father{
  55.                 width: 200px;
  56.                 height: 200px;
  57.                 background: red;
  58.             }
  59.             .son{
  60.                 width: 100px;
  61.                 height: 100px;
  62.                 background: blue;
  63.             }
  64.         </style>
  65. </head>
  66. <body>
  67. <div class="father">
  68.     <div class="son"></div>
  69. </div>
  70. </body>
  71. </html>

9.移入移出练习一

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.  
  6.     <title>JQuery事件移入移出练习</title>
  7.         <script src="../jquery-1.12.4.js"></script>
  8.         <script>
  9.                 $(function () {
  10.                     $("li").hover(function () {
  11.                         $(this).addClass("current");
  12.                     },function () {
  13.                         $(this).removeClass("current");
  14.                     });
  15.                 });
  16.         </script>
  17.     <style>
  18.         *{
  19.             margin: 0;
  20.             padding: 0;
  21.         }
  22.         .box{
  23.             margin: 50px auto;
  24.             width: 300px;
  25.             height: 500px;
  26.             border: 1px solid #000;
  27.         }
  28.         .box>h1{
  29.             font-size: 35px;
  30.             line-height: 35px;
  31.             color: palevioletred;
  32.             padding-left: 120px;
  33.         }
  34.         ul{
  35.             margin-top: 20px;
  36.         }
  37.         ul>li{
  38.             list-style: none;
  39.             padding: 5px 5px;
  40.             border: 1px dashed #000;
  41.         }
  42.         .content>img{
  43.             width: 100px;
  44.             height: 100px;
  45.             background: darkturquoise;
  46.             float: left;
  47.             margin-top: 10px;
  48.             margin-right: 10px;
  49.             margin-left: 10px;
  50.         }
  51.         .content>p{
  52.             font-size: 40px;
  53.             margin-top: 30px;
  54.         }
  55.         .content{
  56.             overflow: hidden;
  57.             display: none;
  58.         }
  59.         .current>div{
  60.             display: block;
  61.         }
  62.     </style>
  63. </head>
  64. <body>
  65.     <div class="box">
  66.         <h1>莫提</h1>
  67.         <ul>
  68.             <li>1
  69.             <div class="content">
  70.                 <img /> <p>Hello</p>
  71.             </div>
  72.             </li>
  73.             <li>2
  74.                 <div class="content">
  75.                     <img /> <p>Hello</p>
  76.                 </div>
  77.             </li>
  78.             <li>3
  79.                 <div class="content">
  80.                     <img /> <p>Hello</p>
  81.                 </div>
  82.             </li>
  83.             <li>4
  84.                 <div class="content">
  85.                     <img /> <p>Hello</p>
  86.                 </div>
  87.             </li>
  88.         </ul>
  89.     </div>
  90. </body>
  91. </html>

10.移入移出练习二

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>JQuery事件移入移出练习2</title>
  6.         <script src="../jquery-1.12.4.js"></script>
  7.         <script>
  8.                 /*
  9.                     第一种方法,效果不好,推荐用第二种方法
  10.                  */
  11.                 // $(function () {
  12.                 //     $(".nav>li").hover(function () {
  13.                 //         $(this).addClass("current");
  14.                 //         var indexIn =$(this).index();
  15.                 //         $(".content>li").eq(indexIn).addClass("show");
  16.                 //     },function () {
  17.                 //         $(this).removeClass("current");
  18.                 //          var indexOut =$(this).index();
  19.                 //         $(".content>li").eq(indexOut).removeClass("show");
  20.                 //     });
  21.                 // });
  22.  
  23.                 /*
  24.                     第二种方法,使用siblings方法,获得没有被选中的同级别的其他元素
  25.                  */
  26.                 $(function () {
  27.                     $(".nav>li").mouseenter(function () {
  28.                         $(this).addClass("current");
  29.                         $(this).siblings().removeClass("current");
  30.                         $(".content>li").eq($(this).index()).addClass("show");
  31.                         $(".content>li").eq($(this).index()).siblings().removeClass("show");
  32.                     });
  33.                 });
  34.         </script>
  35.     <style>
  36.         *{
  37.             margin: 0;
  38.             padding: 0;
  39.         }
  40.         .box{
  41.             width: 500px;
  42.             height: 400px;
  43.             border: 1px solid #000;
  44.             margin: 50px auto;
  45.         }
  46.         .nav>li{
  47.             width: 100px;
  48.             height: 50px;
  49.             list-style: none;
  50.             text-align: center;
  51.             line-height: 50px;
  52.             float: left;
  53.             background: orange;
  54.         }
  55.         .nav>.current{
  56.             background: gray;
  57.         }
  58.         .content>li{
  59.             background: green;
  60.             width: 500px;
  61.             height: 400px;
  62.             list-style: none;
  63.             display: none;
  64.         }
  65.         .content>.show{
  66.             display: block;
  67.         }
  68.         .content>li>p{
  69.             text-align: center;
  70.             font-size: 50px;
  71.             line-height: 250px;
  72.         }
  73.     </style>
  74. </head>
  75. <body>
  76. <div class="box">
  77.     <ul class="nav">
  78.         <li class="current">1</li>
  79.         <li>2</li>
  80.         <li>3</li>
  81.         <li>4</li>
  82.         <li>5</li>
  83.     </ul>
  84.     <ul class="content">
  85.         <li class="show"><p>第一张图片</p></li>
  86.         <li><p>第二张图片</p></li>
  87.         <li><p>第三张图片</p></li>
  88.         <li><p>第四张图片</p></li>
  89.         <li><p>第五张图片</p></li>
  90.     </ul>
  91. </div>
  92. </body>
  93. </html>

原文链接：http://www.cnblogs.com/cnmoti/p/10762293.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

jQuery热门文章

  • 初涉Ajax
  • jQuery 源码分析(十五) 数据操作模块 val详解
  • select 宽度跟随option内容自适应
  • 日期插件rolldate.js的使用
  • layer.prompt 增加placeholder 提示
  • jQuery实现简单五子棋游戏
  • layui+ztree 树状下拉框
  • 在你身边，为你设计PDF下载高清完整扫描原版
  • jQuery实现扫雷小游戏
  • uni-app通过canvas实现手写签名

    • jQuery推荐文章

  • jQuery实现扫雷小游戏
  • jQuery实现简单五子棋游戏
  • 详解jquery方法属性
  • jquery+h5实现九宫格抽奖特效（前后端代码）
  • jQuery实现弹弹球小游戏
  • jQuery常见事件的监听方式
  • JQuery总结 - 小杨-先生
  • jQuery的链式编程风格
  • 初识Vue2（一）：表单输入绑定（附Demo） - 熊泽-学习中的苦与乐
  • jQuery 笔记

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号