jQuery操作dom对象

SlideToggle()的滑入的介绍：

只是改变高度的方法


事件bind和on  和live和delegate的用法以及他们相应的取消使事件。
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src = "js/jquery-migrate-1.2.0.js"></script>
<script type="text/javascript" src = "js/jQuery1.11.1.js"></script>
<style type="text/css">
ul>li{
list-style:none;
}

</style>
<script type="text/javascript">

$(function(){
    /* on(events,[selector],[data],fn) 
    参数：events,[selector],[data],fn)* 
    events:一个或多个用空格分隔的事件类型和可选的命名空间，如”click”或”keydown.myPlugin” 。 
    selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它> 到达选定的元素，事件总是触发。 
    data:当一个事件被触发时要传递event.data给事件处理函数。 
    fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。 */
    on事件
/*     $("li").on("click",function(){
        alert("我是on的触发事件");
});
    //与on相对应的是off的事件:取消事件
    $(function(){
        $("li").off("click");    
    });
    
  //bind的事件：
    $("button").bind("click",function(){
        $("ul").toggle();
    }); 
  //bind的事件相反的是unbind事件
    $(function(){
        $("button").unbind("click");    
    }); */
  Live事件
     //----------------live--------------
    //live与bind区别于live只实现一个事件
    /* $("button").live("click",function(){
        $("ul").slideToggle();
    });
      $(function(){     
         $("button").die("click");
     }); 
       */
    //delegate
         $("button").delegate("button","click",function(){
         $("ul").slideToggle();
     })

         /*  $(function(){     
             $("button").undelegate("button","click");
         });  */
      
});
</script>
</head>
<body>
<div>
<button>求点点我吧</button>
<ul id = "myul">
<li>hello</li>
<li>word</li>
<li>你好</li>
<li>世界</li>
</ul>
</div>
</body>
</html>


删除，替换，克隆节点。

//删除节点
    //$("ul li:first").remove();
    
    //替换节点

    /* var myfirst = $("<li>(｡･∀･)ﾉﾞ嗨</li>");
    $("#myul li:first").replaceWith(myfirst); */

     //hover()的光棒效果
    $("li").hover(function(){
        $(this).css("background","pink");
    },
    function(){
        $(this).css("background","");

    });
    
    //克隆节点
    var myclone = $("#myul li:first").clone();
    $("ul").append(myclone);

ToggleClass()的介绍：
 如果存在（不存在）就删除（添加）一个类。

猜你喜欢