jquery-构建节点

<!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">
            .myred{
                border:4px solid red;
            }
        </style>
        <script src="js/jQuery1.11.1.js"></script>
        <script src="js/jquery-migrate-1.2.0.js"></script>
        <script type="text/javascript">
          $(function() {
            /*  $("input").focus(function() {
                  $(this).css("background","pink");
              }).blur(function() {
                  $(this).css("background", "");
              });*/
             /* $("input").bind('focus', function () {
                  $(this).css("background", "pink");
              }).bind('blur', function () {
                  $(this).css("background", "");
              });*/
              //5分钟,用一个bind,绑定个事件
             /* $("input").bind('focus', function () {
                  $(this).css("background", "pink");
              }).bind('blur', function () {
                  $(this).css("background", "");
              });*/

              /*$("input").bind(
              {
                  focus: function () {
                      $(this).css("background", "pink");
                },
                  blur: function () {
                      $(this).css("background", "");
                }
              });*/
              $("input").on(
              {
                  focus: function () {
                      $(this).css("background", "pink");
                  },
                  blur: function () {
                      $(this).css("background", "");
                  }
              });

              //卸载所有事件,但是不能用()
              // $("input").unbind("focus blur");
              $("input").off("focus blur");

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

              $("#btnAdd").live('click',function() {
                      //深圳
                      var $obj = $("<li>深圳</li>");
                      $("ul").append($obj);
                  }
              );


          });
        </script>
    </head>
    <body>
        用户名:<input type="text"/>
        密码:<input type="password"/>
        <ul>
            <li>北京</li>
            <li>上海</li>
            <li>广州</li>
        </ul>
        <input id="btnAdd" value="添加节点" type="button"/>
    </body>
</html>

 

posted @ 2016-05-15 11:06  胡一生  阅读(189)  评论(0编辑  收藏  举报