您應該使用的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>

登入後複製

省略第二個參數將導致選擇從起始索引到匹配集末尾的所有元素。