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>
    
  • 相关阅读:
    Hadoop源码分析1: 客户端提交JOB
    《分布式系统原理与范型》习题答案 6.一致性和复制
    《分布式系统原理与范型》习题答案 5.同步
    《分布式系统原理与范型》习题答案 4.命名
    《分布式系统原理与范型》习题答案 3.进程
    《分布式系统原理与范型》习题答案 2.通信
    《分布式系统原理与范型》习题答案 1.绪论
    计算机基础知识面试
    机器学习面试题
    计算机网络面试题
  • 原文地址:https://www.cnblogs.com/xjuan/p/5439439.html
Copyright © 2011-2022 走看看