您应该使用的12种有用的jQuery方法-js教程-PHP中文网

12 Helpful jQuery Methods You Should Be Using

DOM 元素的数据附加和移除

让我们从一些方法开始，您可以使用这些方法将数据附加到任何 DOM 元素或从 DOM 元素中移除附加的数据。

使用 data() 方法。同样的方法也可以通过简单地传递 data() 方法来检索附加的数据值，在早期版本的 jQuery 中，data() 方法会导致所有数据的完全替换。但是，它现在将新的传递数据与现有数据合并。

任何键名包含小写字符后 data-* 调用 DOM 元素的属性。但是，第一次调用 removeData() 方法

当您想摆脱以前使用 wrap() 方法设置的值时，此方法很有用

如下所示，我们项目列表中的 wrap() 方法：

<code>$("li").wrap("</code>

登录后复制

"); 生成的标记将如下所示：

<code></code>

登录后复制

第一个列表项。
第二个列表项。
第三个列表项。

如您所见，每个单独的 ul 标记。

使用 wrapAll() 方法的工作原理与我们原始项目列表中的 wrapAll() 方法一样：```

$("li").wrapAll("

<code>

");


生成的标记将如下所示：
</code>

登录后复制

<code>
- 第一个列表项。
- 第二个列表项。
- 第三个列表项。


从 jQuery 3.0 开始，传递给 wrapInner() 方法的回调函数

我们每个列表项上的 wrapInner() 方法：
</code>

登录后复制

$("li").wrapInner("

");

<code>
生成的标记将如下所示：
</code>

登录后复制

<code>
25. 第一个列表项。
26. 第二个列表项。
27. 第三个列表项。


如您所见，我们提供的 HTML 结构内的 li 标记。

以下 CodePen 演示将展示所有这些方法的实际应用。单击“添加包装器”按钮以添加所有包装器。

<iframe allowfullscreen="true" frameborder="no" height="400" loading="lazy" scrolling="no" src="https://codepen.io/Shokeen/embed/GRXNpQP?default-tab=result&editable=true&theme-id=light" width="850"></iframe>

遍历 DOM 中的下一个和上一个同级元素
----------------------------------------------------

jQuery 库提供了许多方法来轻松遍历整个 DOM。在本节中，我将介绍四种有用的方法，您可以使用这些方法来遍历指定元素的同级元素。

### 使用 nextAll() 方法返回所有位于所选元素之后的同级元素列表。您还可以将可选选择器传递给此方法，以仅获取具有指定选择器的元素。### 使用 nextUntil() 方法返回所有后续同级元素，但不包括作为第一个参数传递给此方法的选择器匹配的元素。传递给此方法的第二个参数可以根据提供选择器表达式进一步过滤后续同级元素。### 使用 prevAll() 方法类似于 prevUntil() 方法





uniq 作为附加在其上的停止类。我们将使用这些元素作为 prevUntil() 方法的停止点。

<iframe allowfullscreen="true" frameborder="no" height="575" loading="lazy" scrolling="no" src="https://codepen.io/Shokeen/embed/wvEoorm?default-tab=result&editable=true&theme-id=light" width="850"></iframe>

单击“全部下一个”按钮将使我们所有列表元素变为绿色。但是，单击“直到下一个”按钮只会为列表项六和七添加下划线。这是因为第八个元素具有类 replaceWith() 方法

此方法接受一个参数，该参数指定将替换匹配元素集的新元素。此方法的返回值是被移除的元素集。

这是一个简单的示例，我们用传递的元素替换一些列表元素：
</code>

登录后复制

/ 原始 HTML

Albania

Austria

Gambia

Bhutan

Chile

Colombia

Cyprus

/

$("li.replace").replaceWith("

<code>
40. 比利时
");
/* 新 HTML

1. 阿尔巴尼亚
2. 奥地利
3. 比利时
4. 不丹
5. 智利
6. 比利时
7. 塞浦路斯


*/
### 使用 replaceWith() 方法。但是，匹配的元素集现在替换了旧元素，这些旧元素作为参数传递给此方法。请记住，使用此方法将导致删除与已删除元素绑定的所有数据和事件处理程序。```
/* 原始 HTML<br><ol>
<br><li>Albania</li>
<br><li>Austria</li>
<br><li>Gambia</li>
<br><li>Bhutan</li>
<br><li>Chile</li>
<br><li>Colombia</li>
<br><li>Cyprus</li>
<br>
</ol>
<br>*/<br><br>$("</code>

登录后复制

比利时 ").replaceAll("li.replace"); /* 新 HTML
阿尔巴尼亚
奥地利
比利时
不丹
智利
比利时
塞浦路斯

*/ 使用 slice() 方法过滤匹配元素集

假设您在 jQuery 中有一组匹配的元素，但您只想使用这些元素的子集。例如，考虑上一节中使用 slice(start, end) 方法选择列表项，这提供了一种简单的方法来将我们选择的元素列表减少到特定索引范围。

我们将使用此方法对以下标记进行操作，以操作我们指定索引范围内的列表项。

<code><ol>
<br><li>Albania</li>
<br><li>Austria</li>
<br><li>Belgium</li>
<br><li>Bhutan</li>
<br><li>India</li>
<br><li>Chile</li>
<br><li>Cyprus</li>
<br><li>Estonia</li>
<br><li>Gambia</li>
<br><li>Malta</li>
<br>
</ol>
<br></code>

登录后复制

这是一个示例，它获取上一节中位置 5 到 8 的国家/地区列表，并向其添加 highlighted 类：

<code>$("ol li").slice(4, 7).addClass("highlighted");<br></code>

登录后复制

如您所见，索引是从零开始的。生成的标记现在将如下所示：

<code><ol>
<br><li>Albania</li>
<br><li>Austria</li>
<br><li>Belgium</li>
<br><li>Bhutan</li>
<br><li class="highlighted">India</li>
<br><li class="highlighted">Chile</li>
<br><li class="highlighted">Cyprus</li>
<br><li>Estonia</li>
<br><li>Gambia</li>
<br><li>Malta</li>
<br>
</ol>
<br></code>

登录后复制

省略第二个参数将导致选择从起始索引到匹配集末尾的所有元素。