jquery(三)width insertBefore insertAfter appendTo prependTo remove 添加和取消事件的几种方式

jquery(三)

取width insertBefore insertAfter appendTo prependTo remove 添加和取消事件的几种方式

jquery取width，高度等同

 <style>
     .div1{width: 100px;height: 200px;background-color: red;margin: 10px;border: 20px solid black;padding: 10px}
</style>
<script>
    $(function() {
        alert($("#div1").width());    
        alert($("#div1").innerWidth());   //width+padding
        alert($("#div1").outerWidth());    //width+padding +margin
        alert($("#div1").outerWidth(true));    //width+padding +margin+border


    })

</script>

insertBefore insertAfter appendTo prependTo remove

<script>
    $(function() {
        $("span").insertBefore("#div1");  //插入到某个前面
        $("#div1").insertAfter("span");   //插入到某个后面
        $("span").appendTo("div");   //插入到子节点末尾
        $("span").prependTo("div");   //插入到子节点最前面
        $("span").remove();  //删除节点

        //compare insertbefore before
        $("span").insertBefore("#div1");  //span插入到div1前面
        $("#div1").before("span");  //div1的前面是span
    })
</script>

添加事件的几种方式

 <script>
     $(function() {
         //1.给一个事件添加一个函数
         $("#div1").click(function() {
             alert("hello");
         });
         //2.同时给多个事件添加一个函数，多个事件用空格隔开
         var i = 1;
         $("span").on("click  mouseover",
                      function() {
             $(this).html(i++);
         });
         //3.给不同的事件添加不同的函数
         $("#div1").on({
             click: function() {
                 alert("点击");
             },
             mouseover: function() {
                 $(this).css("background-color", "blue");
                 //alert("over");
             }
         });

         //4.事件委托---》emmm我测试bu通过---可怕不
         $("ul").on("click", "li",function() {
             $("this").css("backgroundColor", "green");
         });



         //添加li节点
         var i = 6;
         $("button").click(function() {
             $("<li>dddd<li>").appendTo($("ul"));
         });

     })

</script>

取消事件的几种方式

<script>
    function show() {
        alert("show~");
    }
    $(function() {
        $("#div1").click(show);
        $("#div1").click(function() {
            alert("hello");
        });

        //取消所有的事件
        $("#btn1").click(function() {
            $("#div1").off();
        })

        //取消某个事件下指定的函数
        $("#btn1").click(function() {
            $("#div1").off('click', show);
        })
    })

</script>