Ringkaskan dan kongsi beberapa operasi DOM yang dilaksanakan menggunakan jQuery (koleksi)

Artikel ini meringkaskan dan berkongsi dengan anda beberapa operasi DOM yang dilaksanakan menggunakan jQuery, termasuk penciptaan nod, pemasukan nod, pemadaman, penyalinan dan penggantian, traversal dan penapisan, dll. Saya harap ia akan membantu semua orang !

Bab 01: Penciptaan nod

1 Cipta nod elemen

Di sana adalah beberapa cara, yang akan dibincangkan kemudian. Ia adalah perkara biasa untuk menerangkan secara langsung struktur nod ini melalui rentetan teg HTML dan memprosesnya melalui fungsi $(), $("html结构")[Cadangan berkaitan: tutorial video jQuery]

$(&#39;<div></div>&#39;)

2. Cipta nod teks

Sama seperti mencipta nod elemen, anda boleh menerangkan kandungan teks secara langsung

$(&#39;<div>我是文本节点</div>&#39;)

3

Cara yang sama seperti mencipta nod elemen

$("<div id=&#39;test&#39; class=&#39;box&#39;>我是文本节点</div>")

Bab 02: Sisipan nod

1, .append() , .appendTo() *

jadual>

.after()2, .before(), *

Pemilih

Penerangan

append( )

Tambahkan kandungan pada setiap elemen yang sepadan

appendTo( )

Tambahkan semua elemen padanan

选择器	描述
append( )	向每个匹配的元素内部追加内容
appendTo( )	把所有匹配的元素追加到另一个、指定的元素集合中

ke

$(A).append(B);  // 把B添加到A中(作为A的最后一个子元素)
$(A).appendTo(B);// 把A添加到B中(作为B的最后一个子元素)

kumpulan elemen lain yang ditentukan

选择器	描述
after( )	指定元素后面添加内容
before( )	指定元素前面添加内容

$(A).after(B); // 在A的后面添加B
$(A).before(B);// 在A的前面添加B

.prepend()3, .prependTo(), *

选择器	描述
prepend( )	指定元素内部前置一内容
prependTo( )	指定元素前置到另一个元素的内部

$(A).prepend(B);   // 把B添加到A中(作为A的第一个子元素)
$(A).prependTo(B); // 把A添加到B中(作为B的第一个子元素)

.insertAfter()4, .insertBefore(),

选择器	描述
insertAfter()	将内容插入到指定元素的后面
insertBefore()	将内容插入到指定元素的前面

$(A).insertAfter(B);  // 将A插入到B的后面
$(A).insertBefore(B); // 将A插入到B的前面

第03回：节点删除

1、.empty()

该方法主要是用于清空指定元素的所有子节点，如：

<div class="box">
  <p>耀哥</p>
</div>

如果我们通过empty方法移除里面div的所有元素，它只是清空内部的html代码，但是标记仍然留在DOM中。

// 通过empty处理
$('.hello').empty();

// 结果：<div class="box"></div>

2、.remove() *

移除元素自身，包括子节点、事件等信息。

// 通过remove处理
$('.btn').remove(); // 结果：节点不存在了,同时事件也会被销毁

3、.detach()

如果我们希望临时删除页面上的节点，但是又不希望节点上的数据与事件丢失，并且能在下一个时间段让这个删除的节点显示到页面，这时候就可以使用detach方法来处理。

detach从字面上就很容易理解。让一个web元素托管。即从当前页面中移除该元素，但保留这个元素的内存模型对象。

jQuery 官方文档说明：

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

$("div").detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。

当然这里要特别注意，detach方法是JQuery特有的，所以它只能处理通过JQuery的方法绑定的事件或者数据。

var li = $(".list li:eq(2)").detach();
setTimeout(() => {
    $(".list").append(li);
}, 3000);

第04回：节点复制与替换

1、.clone()

克隆节点是DOM的常见操作，jQuery提供一个clone方法，专门用于处理dom的克隆。

clone()方法深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。

clone方法比较简单就是克隆节点，但是需要注意，如果节点有事件或者数据之类的其他处理，我们需要通过clone(ture)  传递一个布尔值 ture用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了。

$("div").on('click', function() {//执行操作})

//clone处理一
$("div").clone()     // 只克隆了结构，事件丢失

//clone处理二
$("div").clone(true) // 结构、事件与数据都克隆

2、.replaceWith()、.replaceAll() *

$(A).replaceWith(B); // 把A替换为B
$(A).replaceAll(B);  // 把B替换为A

3、.wrap()

如果要将元素用其他元素包裹起来，也就是给它增加一个父元素，针对这样的处理，JQuery提供了一个 wrap 方法。

<p>Hello, world!</p>

$('p').wrap('
')

// 结果为：
/*

  <p>Hello, world!</p>  

*/

4、.unwrap()

该方法与wrap方法相反，unwrap方法将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。

5、.wrapAll()

wrap是针对单个dom元素处理，如果要将集合中的元素用其他元素包裹起来，也就是给他们增加一个父元素，针对这样的处理，JQuery提供了一个wrapAll方法，比如，页面上有两个p元素，如果要为两个p元素添加共有的一个父类div，则通过如下代码实现：

$(&#39;p&#39;).wrapAll(&#39;<div></div>&#39;);

6、.wrapInner()

如果要将集合中的元素内部所有的子元素用其他元素包裹起来，并当作指定元素的子元素，针对这样的处理，JQuery提供了一个wrapInner方法。我们来看例子：

<div>Hello, world!</div>
<div>Hello, world!</div>

$('div').wrapInner('
');

// 结果为：
/*

	<p>Hello, world!</p>


	<p>Hello, world!</p>
	
 */

第05回：节点遍历

1、.children() *

jQuery是一个集合对象，如果想快速查找集合里面的第一级子元素，此时可以用 children() 方法。这里需要注意：.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈，这里可以理解为就是父亲-儿子的关系）

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>

代码如果是 $(".div").children() ，那么意味着只能找到ul，因为div与ul是父子关系，li与div是祖辈关系，因此无法找到。

提示：jQuery是一个集合对象，所以通过children是匹配集合中每一个元素的第一级子元素。

该方法可以接受参数，用于筛选子元素，如  "$('.parent').children(.active)"，匹配子元素中类名为 active 的那一个。

2、.find() *

find 与 children 类似，区别在于 children是父子关系查找，find是后代关系查找（包含父子关系）。

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>

代码如果是 $("div").find("li") ，此时，li与div是祖辈关系，通过find方法就可以快速的查找到了。

提示：

1. find是遍历当前元素集合中每个元素的后代。只要符合，不管是儿子辈，孙子辈都可以。
2. 与其他的树遍历方法不同，选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回，可以传递通配选择器 *。
3. find只在后代中遍历，不包括自己。

3、.parent() *

如果想快速查找合集里面的每一个元素的父元素（这里可以理解为就是父亲-儿子的关系），此时可以用 parent() 方法。因为是父元素，这个方法只会向上查找一级。

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>

查找ul的父元素 div,  $(ul).parent() ，就是这样简单的表达

4、.parents()

jQuery是一个合集对象，如果想快速查找合集里面的每一个元素的所有祖辈元素，此时可以用 parents() 方法。其实也类似 find 与 children 的区别，parent只会查找一级，parents则会往上一直查到查找到祖先节点。

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>

在li节点上找到祖辈元素div， 这里可以用 $("li").parents() 方法

5、.closest()

以选定的元素为中心，往内查找可以通过find、children方法。如果往上查找，也就是查找当前元素的父辈祖辈元素，jQuery提供了closest() 方法，这个方法类似parents但是又有一些细微的区别，属于使用频率很高的方法。

closest() 方法接受一个匹配元素的选择器字符串。从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素。例如：在a元素中，往上查找所有的li元素，可以这样表达：$("a").closet("li')。

提示：jQuery是一个集合对象，所以通过closest是匹配集合中每一个元素的祖先元素。

粗看 .parents() 和 .closest() 是有点相似的，都是往上遍历祖辈元素，但是两者还是有区别的，否则就没有存在的意义了

• 起始位置不同：.closest 开始于当前元素 .parents开始于父元素
• 遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents 一直查找到根元素，并将匹配的元素加入集合
• 结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象

6、.next()、.nextAll() *

• .next()：该方法用于匹配当前元素的下一个元素。
• .nextAll()：查找当前元素之后所有的同辈元素。

7、.prev()、.prevAll() *

• .prev()：该方法用于匹配当前元素的上一个元素。
• .prevAll()：查找当前元素之前所有的同辈元素

8、.siblings() *

该方法用于匹配当前元素的所有兄弟元素。

第 06 回：筛选

1、.eq(index) *

获取当前链式操作中第N个jQuery对象，返回jQuery对象，当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1为倒数第一个，具体可以看以下示例。

2、.first()、.last() *

• .first()：获取匹配元素集合中第一个元素。
• .last()：获取匹配元素集合中最后一个元素。

3、.filter()

筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

4、.is()

根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。如果没有元素符合，或者表达式无效，都返回'false'。

注意：、在jQuery 1.3中才对所有表达式提供了支持。在先前版本中，如果提供了复杂的表达式，比如层级选择器（比如 + , ~ 和 > ），始终会返回true

5、.not()

从匹配元素的集合中删除与指定表达式匹配的元素

6、.map(callback)

通过一个函数匹配当前集合中的每个元素,产生一个包含新的jQuery对象。

7、.has()

Menapis set elemen yang dipadankan dengan elemen yang mempunyai pemilih yang sepadan atau turunan elemen DOM.

(Mempelajari perkongsian video: tutorial bahagian hadapan web)

Atas ialah kandungan terperinci Ringkaskan dan kongsi beberapa operasi DOM yang dilaksanakan menggunakan jQuery (koleksi). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!