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元素;
});
注意:替换后,事件行为全部消失。