问答解疑
Q:什么是主动追加?
A:主动追加是通过父亲去追加孩子。
Q:什么是被动追加?
A:被动追加是通过孩子去追加父亲,与主动追加相反。
一.节点追加(父亲关系)
1.主动追加节点
append( ' ' )追加到父亲的孩子最后面
prepend(' ')追加到父亲的孩子最前面
例:
<div class="one" title="aa">
<li class="mini"> 1</li>
<li class="mini"> 2</li>
</div>
<script>
$('.one').append('<li>新的节点</li>')
//父亲---->追加------->孩子(主动追加)
//此时新的节点会追加在父亲的最后面(也就是2的后面)
</script>
2.被动追加节点
appendTo( ' ' )孩子追加到父亲下的孩子的最后
prependTo(' ')孩子追加到父亲下的孩子的最前
例:
<div class="one" title="aa">
<li class="mini"> 1</li>
<li class="mini"> 2</li>
</div>
<script>
$('<li>新的节点</li>').appendTo('.one')
//孩子------------>追加------>父亲(被动追加)
//此时新的节点会增加到父亲孩子的最后一个
</script>
二.节点追加(兄弟关系)
1.主动追加节点
after( ' ')后置追加
before( ' ')前置追加
例:
<div class="one" title="aa">
<li class="mini"> 1</li>
<li class="ni"> 2</li>
</div>
<script>
$('.mini').after('<li>新的节点</li>')
//兄弟---->追加------>新的节点(主动追加)
//此时新的节点被追加到1的后面
</script>
2.被动追加
afterTo( ' ')后置追加
beforeTo( ' ')前置追加
用法与之前被动追加一致,因此不再举例
三.节点替换
1.主动替换
replacAll( ' 选择器' )
例:
<div class="one" title="aa">
<li class="mini"> 1</li>
<li class="ni"> 2</li>
</div>
<script>
$('.mini').replacAll('.ni')
//将.mini-->替换---->.ni
</script>
2.被动替换
replacAllTo( ' 选择器' )
用法与之前被动追加一致,因此不再举例
四.删除节点
1.主动删除
remove(' ')
例:
<div class="one" title="aa">
<li class="mini"> 1</li>
<li class="ni"> 2</li>
</div>
<script>
$('.mini').remove( )
//.mini----->删除
</script>
2.被动删除
removeTo(' ')
用法与之前被动追加一致,因此不再举例
五.克隆节点
1.主动克隆
clone( )
<div class="one" title="aa">
<li class="mini"> 1</li>
<li class="ni"> 2</li>
</div>
<script>
$('.mini').coone( )
//.mini---->克隆
</script>
2.被动克隆
cloneTo( )
用法与之前被动追加一致,因此不再举例