jQuery之文档处理

Posted 2021-04-08 小伍前端

本次分享的主要是jQuery中关于DOM节点的插入、包裹、替换和删除相关的API，欢迎持续关注小伍前端，每周两篇（周三和周六持续推送）。

一、内部插入

1、append(content|fn) 向每个匹配的元素内部追加内容

contnet：要追加到目标的内容
function(index,html)：返回一个HTML字符串，用于追加到每一个匹配元素的里边
例：        

<p>I want to say:</p>

$("p").append("<b>I like money</b>")

结果：

I want to say:I like money

---

2、appendTo(content) 把所有匹配的元素追加到另一个指定的元素集合中

例：

<p>I like money</p>
<div></div>
<div></div>
js:
$("p").appendTo("div")

结果：

I like money

I like money

---

3、prepend(content|fn) 向所有匹配元素的内部的开始出插入内容

例：

<p>I like money</p>
js: 
$("p").prepend("<b>I want to say</b>")

结果：

I want to sayI like money

---

4、prependTo(content) 该方法颠倒了prepend()方法的操作，作用相同

例：

<b>I want to say</b>
<p>I like money</p>
js:
$("b").prependTo("p");

结果：

I want to sayI like money

---

二、外部插入

1、after(content|fn) 在每个匹配的元素之后插入内容

content：插入到每个目标后得内容
例：

<p>I would like to say:</p>
js: 
$("p").after("<b>Hello</b>");

结果：

I would like to say:

Hello

function：必须返回一个html字符串

---

2、before(content|fn) 在每个匹配的元素之前插入内容

例：

<p>I would like to say:</p>
js: 
$("p").before("<b>Hello</b>");

结果：
Hello

I would like to say:

---

3、insertAfter(content) 作用同after(),只是颠倒了常规的操作

例：

<p>I would like to say:</p>
js:
$("<b>Hello</b>").insertAfter("p");

结果：

I would like to say:

Hello

---

4、insertBefore(content) 作用同before(),只是颠倒了常规的操作

例：

<p>I would like to say:</p>
js:
$("p").insertBefore("<b>Hello</b>");

结果：
Hello

I would like to say:

---

三、包裹

1、wrap(html|ele|fn) 给匹配的每个元素都添加一个父元素

html:用于动态生成元素并包裹目标元素
例：

$("p").wrap("<div class="wrap"></div>"); //把所有的段落用一个新创建的div包裹起来

elem:用于包装目标元素的DOM元素
例：

$("p").wrap(document.getElementById('content')); //用id为‘content’的DOM元素将每一个段落包裹起来

function：生成包裹结构的一个函数
例：

html：
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
js:
$(".inner").wrap(function(){
return '<div class="' + $(this).text() + '"/>';
});

结果：

<div class="container">
   <div class="Hello">
      <div class="inner">Hello</div>
   </div>
   <div class="Goodbye">
      <div class="inner">Goodbye</div>
   </div>
</div>

---

2、unwrap() 把匹配的元素的父元素移除

例：

<div>
   <p>Hello</p>
   <p>cruel</p>
   <p>World</p>
</div>
javascript
js:
 $("p").unwrap();

结果：

 <p>Hello</p>
 <p>cruel</p>
 <p>World</p>

---

3、wrapAll(html|ele) 给所有匹配的元素用单个元素包裹起来

例：    

<p>Hello</p>
<p>cruel</p>
<p>World</p>
ja:
$("p").wrapAll("<div></div>");

结果：

<div>
   <p>Hello</p>
   <p>cruel</p>
   <p>World</p>
</div>

---

4、wrapInner(html|ele|fn)

html:用于动态生成元素并包装目标元素
例：

<p>Hello</p>
<p>cruel</p>
<p>World</p>
js:
$("p").wrapInner("<b></b>");

结果：

<p><b>Hello</b></p>
<p><b>cruel</b></p>
<p><b>World</b></p>

element:用于包装目标元素的DOM元素
例：

$("p").wrapInner(document.createElement("b"));

fn：返回包裹结构的一个函数
例：

<div class="container">
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
</div>

$(".inner").wrapInner(function(){
   return '<div class="' + $(this).text() + '"></div>'
});

结果:

<div class="container">
  <div class="inner">
     <div class="Hello">Hello</div>
  </div>
  <div class="inner">
     <div class="Goodbye">Goodbye</div>
  </div>
</div>

---

四、替换

1、replaceWith(content|fn)将所有匹配的元素替换成指定的HTML或DOM元素（是直接替换并非复制替换）

例：

<div class="container">
   <div class="inner first">Hello</div>
   <div class="inner second">And</div>
   <div class="inner third">Goodbye</div>
</div>

$(".third").replaceWith(".first");

结果：

And

Hello

".first"

---

2、replaceAll(selector)用匹配的元素替换掉所有selector匹配到的元素

例：

<p>hello</p><p>hello</p>
js:
$("<b>world</b>").replaceAll("p");

结果：
worldworld

---

五、删除

1、empty()删除匹配的元素几何中所有的子节点

例：

<p>Hello, <span>Person</span> <a href="#">and person</a></p>
js:
$("p").empty();

结果：

<p></p>

---

2、remove([expr])

从DOM中删除所有匹配的元素(这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。)
例：

<p>Hello</p> how are <p>you?</p>
js:
$("p").remove()

结果：

how are

---

3、detach([expr])

从DOM中删除所有匹配的元素(这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。)
例：

<p>Hello</p> how are <p>you?</p>
js:
$("p").detach()

结果：

how are

---

六、复制

1、clone(true/false) 克隆匹配的DOM元素并且选中这些克隆的副本

例：

<button>按钮</button>
js:
$("button").click(function(){
   $(this).clone(true).insertAfter(this);
})

结果：
创建一个按钮，他可以复制自己，并且它的副本也有同样功能

以上是本次分享内容，喜欢的就点个赞吧^-^