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>
  • 相关阅读:
    Python 类中的"静态"成员变量
    Python 标准输出 sys.stdout 重定向
    [转] Python的import初探
    百度地图_路线规划,起点终点标记弹窗显示信息
    哈哈哈哈
    centos7.6安装mysql5.6
    redis集群搭建
    初学 Nginx (一) SSI 的作用
    IE 不兼容 console 关键字
    windows 安装多个版本的jdk后修改 环境变量不起作用
  • 原文地址:https://www.cnblogs.com/YoogaChan/p/6842683.html
Copyright © 2011-2022 走看看