zoukankan      html  css  js  c++  java
  • 四种绑定事件

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>New Web Project</title>
    <style type="text/css">
    li{
    float:left;
    margin-left:50px;
    list-style:none;
    }
    </style>
    <script src="js/jQuery1.11.1.js"></script>
    <script src="js/jquery-migrate-1.2.0.js"></script>

    <script type="text/javascript">
    $(function () {
    //dom 2 级注册 bind()

    //live
    $("li").live({
    mouseover:function(){
    $(this).css("background","pink");
    },
    mouseout:function(){
    $(this).css("background","");
    }
    });

    $("li").die("mouseout");


    //on        推荐使用
    /* $("li").on({          //选择元素
    mouseover:function(){         //将li和mouseover事件绑定
    $(this).css("background","pink");
    },
    mouseout:function(){          //复合绑定mouseout
    $(this).css("background","");
    }
    });


    $("li").off("mouseout");      //off()用来解除mouseout事件绑定
    */





    //delegate
    /* $("ul").delegate("li",{
    mouseover:function(){
    $(this).css("background","pink");
    },
    mouseout:function(){
    $(this).css("background","");
    }
    });

    $("ul").undelegate("mouseout"); */




    /* $("li").bind({
    mouseover:function(){
    $(this).css("background","pink");
    },
    mouseout:function(){
    $(this).css("background","");
    }
    });

    //卸载事件
    $("li").unbind("mouseout mouseover"); */
    });

    </script>
    </head>
    <body>
    <ul>
    <li>首页</li>
    <li>公司信息</li>
    <li>人才计划</li>
    </ul>
    </body>
    </html>

  • 相关阅读:
    使用Xtrabackup 备份mysql数据库
    Myeclipse总结
    intellij idea问题及技巧
    Tomcat相关配置
    Spark常用算子总结
    前端开发经验
    最近用到的SQL语句
    subline text使用心得
    天龙八部谁是主角?(MR词频统计)
    elasticsearch CURL命令
  • 原文地址:https://www.cnblogs.com/Chenghao-He/p/7102580.html
Copyright © 2011-2022 走看看