zoukankan      html  css  js  c++  java
  • jQuery完整的事件委托(on())

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>jQuery完整的事件委托(on())</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
    $(function () {

    $("#box").on("click","div,p,li,span",function (event) {

    if(event.target.nodeName.toLowerCase()=="div"){ //nodeName 元素节点名称

    if(event.target.id=="div1"){
    $(this).css({"background-color":"orange"});
    }
    else if(event.target.id=="div2"){
    $(this).css({"background-color":"yellow"});
    }
    else if(event.target.id=="div3"){
    $(this).css({"background-color":"blue"});
    }
    else if(event.target.id=="div4"){
    $(this).css({"background-color":"pink"});
    }

    }
    if(event.target.nodeName.toLowerCase()=="li"){
    $(this).css({"background-color":"red"});
    }
    if(event.target.nodeName.toLowerCase()=="p"){
    $(this).css({"background-color":"black"})
    }
    if(event.target.nodeName.toLowerCase()=="span"){
    $(this).css({"background-color":"green"})
    }

    })


    })

    </script>
    <style>
    div{ 200px;height: 200px;border: 1px solid black; }
    p{ 200px;height: 100px;border: 1px solid black; color: white }
    span{ 400px;height:100px;border: 1px solid black; }
    li{ 200px;height: 100px;border: 1px solid black; }

    </style>
    </head>
    <body>
    <div id="box">
    <div id="div1">我是div1</div>
    <div id="div2">我是div2</div>
    <div id="div3">我是div3</div>
    <div id="div4">我是div4</div>
    <p>我是p</p>
    <li>我是li</li>
    <span>我是span</span>
    </div>

    </body>
    </html>
  • 相关阅读:
    计算在线人数
    微软MSMQ消息件研究(一)
    jQuery循序渐进2
    单点登陆的ASP.NET应用程序设计[zt]
    利用SQL2005的缓存依赖
    .Net 操作MSMQ
    GridView中数据格式化
    TcpListener/TcpClient/UdpClient 的区别及联系
    微软消息件MSMQ研究DEMO(二)
    Nhibernate(1)
  • 原文地址:https://www.cnblogs.com/YoogaChan/p/6842683.html
Copyright © 2011-2022 走看看