jQuery初讲(3)

今天我们接着昨天讲的API继续讲

今天我们用的结构

 <div id="box">
        <span class="son">
            <span></span>
        </span>
        <span class="son"></span>
        <span class="son"></span>
    </div>
    <div id="father"></div>

1.insertBefore()
2.before()
把所有匹配的元素插入到另一个、指定的元素元素集合的前面

    $('#father').insertBefore($(".son"))  
    //把father插到son前面     father在原位置消失
     $('.son').before($("#father"))        
      //把father插到son前面     father在原位置消失

这两个注意前后顺序

3.append()
4.appendTo()

  $('#father').append($(".son"))      
    //把son加到father里面     son在原位置消失
   $('.son').appendTo($("#father"))     
     //把son加到father里面     son在原位置消失

5.remove()
6.detach()

$("#father").remove()
//father被删除   //返回删除的对象         事件不会被保留
$(".son").remove()
  //son被删除         //返回删除的对象         事件不会被保留
 $("#father").detach()
//father被删除   //返回删除对象           事件会被保留

$("#father").remove().insertBefore($(".son")) 
//可与上面的插入并用,但是father上面的事件不会被保留,样式会保留
 $("#father").detach().insertBefore($(".son")) 
 //可与上面的插入并用,但是father上面的事件会被保留,样式也会保留

7.empty()

  $(".son").empty()              
     //删除son下的所有子集

8.wrap()
9.wrapInner()
10.wrapAll()

 $(".son").wrap($("#father"))      
 //给所有的son每一个都套了一个father  且father还存在于文档
$(".son").wrap("<div>")           
//给所有的son每一个都套了一个新建的标签div  不能写</div>(无法识别)
$(".son").wrapInner("<div>")      
//给所有的son的子集都套了一个新建的标签div
$(".son").wrapAll("<div>")        
//给所有的son套了一个新建的标签div  一个div将他们全部包裹

11.click()
12.on()

 $('#father').click(function(){                      
  }) //点击事件 ,跟JavaScript中onclick相等
$('#father').on(click,function(){
})//绑定事件  ,跟  addEventListener相等
$('#father').on(click, B,function(e){
})
//B为father下面的子集，这样就是事件委托