zoukankan      html  css  js  c++  java
  • jQuery事件之on()方法绑定多个选择器,多个事件

    $(document).on('click', '#header .top, #main .btn', function () {
         // code...
     });
    

    on()方法绑定多个事件

    $(".box1").on({
        mouseenter: function() {
            // Handle mouseenter...
        },
        mouseleave: function() {
            // Handle mouseleave...
        },
        click: function() {
            // Handle click...
        }
    }, "p");
    

    $(".box1 p").on({
        mouseenter: function() {
            // Handle mouseenter...
        },
        mouseleave: function() {
            // Handle mouseleave...
        },
        click: function() {
            // Handle click...
        }
    });
    

    用on()方法绑定多个选择器、多个事件

    $('#header .top, #main .btn').on({
        mouseenter: function() {
            // Handle mouseenter...
        },
        mouseleave: function() {
            // Handle mouseleave...
        },
        click: function() {
            // Handle click...
        }
    }); 
    

    附上测试小demo

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
        div {
             200px;
            height: 200px;
        }
        
        .box1 p {
            background-color: #009cff;
        }
        
        .box2 .p2 {
            background-color: #f40;
        }
        </style>
    </head>
    
    <body>
        <div class="box1">
            这是第一个
            <p class="p1">11111</p>
            <p>22222</p>
            <p>33333</p>
            <p>55555</p>
        </div>
        <div class="box2">
            <p class="p2">这是第二个</p>
        </div>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            // 绑定多个事件
            // $(".box1 p").on({
            //     mouseenter: function() {
            //         $(this).css('background-color','#ccc');
            //     },
            //     mouseleave: function() {
            //         $(this).css('background-color','#009cff');
            //     },
            //     click: function() {
            //         $(this).css('background-color','#f40');
            //     }
            // });
            // 绑定多个选择器、多个事件
            $('.box1 .p1,.box2 .p2').on({
                mouseenter: function() {
                    $(this).css('background-color', '#ccc');
                },
                mouseleave: function() {
                    $(this).css('background-color', '#009cff');
                },
                click: function() {
                    $(this).css('background-color', '#f40')
                }
            });
        });
        </script>
    </body>
    </html>
    
  • 相关阅读:
    Hadoop2.x集群动态添加删除数据节点
    HDFS中块状态分析
    procedure of object(一个特殊的指针类型)
    设计模式导语一
    Delphi中的容器类(二)
    让AlphaControls改变DevExpress皮肤
    Delphi中的容器类(一)
    Delphi 的RTTI机制浅探
    重写AuthorizeAttribute实现自己的权限验证
    含有HttpContext元素的单元测试
  • 原文地址:https://www.cnblogs.com/xjuan/p/5439439.html
Copyright © 2011-2022 走看看