jQuery文档处理 （节点）

问答解疑

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（ ）

用法与之前被动追加一致，因此不再举例