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

Bertha 。 2022-07-12 12:26 252阅读 0赞

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元素； });

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

发表评论取消回复

表情：

评论列表（有 0 条评论，252人围观）

还没有评论，来说两句吧...

相关阅读

相关节点操作之删除节点

节点操作之删除节点 <!DOCTYPE html> <html lang="en"> <head> <meta char

蔚落/ 2023年10月03日 15:21/ 0 赞/ 26 阅读

相关直接获取节点；操作节点属性

直接获取节点的几种方式 <!DOCTYPE html> <html> <head> <meta

今天药忘吃喽~/ 2023年09月30日 18:37/ 0 赞/ 20 阅读

相关直接获取节点；操作节点属性

直接获取节点的几种方式 <!DOCTYPE html> <html> <head> <meta

分手后的思念是犯贱/ 2023年09月27日 13:51/ 0 赞/ 129 阅读

相关 2.24-节点操作

节点操作 1 创建元素 var oDiv = document.createElement('div'); 2 添加元素到body末尾 va

桃扇骨/ 2023年07月10日 15:59/ 0 赞/ 4 阅读

相关 JavaScript节点操作--创建节点、添加节点、删除节点、复制节点

节点操作创建节点 document.createElement('tagName') document.createElement()方法创建由tagN

喜欢ヅ旅行/ 2022年12月23日 06:13/ 0 赞/ 250 阅读

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

1、包裹节点wrap <div>节点</div> （1）利用 wrap()方法对之前的代码包裹（1）wrap(html)：向指定元素包裹一层html代码

Bertha 。/ 2022年07月12日 12:26/ 0 赞/ 253 阅读

相关 JavaScript 节点操作

1.创建节点 2.复制节点 3.插入节点 4.替换节点 5.移除节点 6.查找节点 1.创

àì夳堔傛蜴生んèń/ 2022年05月26日 02:44/ 0 赞/ 226 阅读

相关 jQuery_节点操作

一.内部插入节点 $('div').append(node); //在div内部的后面追加元素 node.appendTo($('div'));

向右看齐/ 2022年05月22日 12:24/ 0 赞/ 303 阅读

相关节点的操作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

叁歲伎倆/ 2022年05月14日 02:46/ 0 赞/ 163 阅读

相关 jQuery--包裹节点（wrap()、wrapAll()、wrapInner()），取消包裹节点（unwrap()）详解

包裹节点所谓包裹节点，是指在现有节点的外围包裹一层其他元素标签，使当前节点称为新元素的子节点。jQuery提供了wrap()和wrapAll()等方法用于实现节点的包裹

谁践踏了优雅/ 2021年08月13日 23:47/ 0 赞/ 361 阅读