Jquery——Day2（包裹节点、节点操作）

1、包裹节点wrap

<div>节点</div>

（1）利用wrap()方法对之前的代码包裹

（1）wrap(html)：向指定元素包裹一层html代码

（2）wrap(element)：向指定元素包裹一层DOM对象节点

（3）wrap(function(index))：使用匿名函数对指定元素进行包裹指定内容

$(function(){$('div').wrap('<strong class="b"></strong');    //向div包裹一层strong$('div').wrap($('strong').get(0));        //向div包裹一层DOM节点$('div').wrap(function(index){            //采用匿名函数return '<strong>'+index+'</strong>';});});

（2）wrap()/unwrap()区别

简单的来说，unwrap()是wrap()的反义，

wrap()是指包裹节点，而unwrap()即表示移除一层指定元素包裹的内容。

$(function(){$('div').wrap('<strong></strong>');$('div').undwrap();});

（3）wrap()/wrapAll()/wrapInner区别

区别在于前者wrap()是把每个元素当成一个独立体，分别包含一层外层；

        后者wrapAll()将所有元素当成一个独立体，只包含一层外层。

前两者都是在外层包含，而对于wrapInner()而言，它是在内层包含。

2、DOM节点操作

对包裹节点jQuery实现了3种操作：复制、替换。

（1）复制节点：append()方法

$(function(){$('div').click(function(){   alert('欢迎光临！');});$('div').clone().appendTo('body');});

若clone(）方法中，无参数时，表示只克隆复制元素和内容，不复制事件行为；

若clone(true)时，表示不只是复制元素和内容，也相应的复制了事件行为；

若clone(false)时，即会显示错误。

例如“$('div').clone(false).appendTo('body')”

（2）删除节点-1：remove()方法

对于remove()方法本身而言，既可以传递参数，也可以不传递参数，若不传递参数，如“$('div').remove()”表示删除了所有的div节点；

对于remove()传递参数而言，以下面例子为例，

<div class="box"></div>$('div').remove('.box');

结果：上述代码表示只删除class为box的div。

删除节点-2：detach()方法

“$('div').detach()”,表示保留事件行为的删除。

detach()/remove()区别

      二者均表示删除节点，而删除后本身方法可以返回当前被删除的节点对象，

 但区别在于前者在回复时不保留事件行为，而后者保留。

删除节点-3：empty()方法

该方法表示清空节点里的内容。

（3）替换节点：replace()方法

<div>JavaScript</div>$(function(){$('div').replaceWith('<sapn>DOM</span');    //将div替换为span元素；});

注意：替换后，事件行为全部消失。