12 Helpful jQuery Methods You Should Be Using

Data attachment and removal of DOM elements

Let's start with some methods that you can use to attach data to or remove attached data from any DOM element.

Use the data() method. The same method can also retrieve additional data values ​​by simply passing the data() method, which in earlier versions of jQuery resulted in a complete replacement of all data. However, it now merges the new pass data with the existing data.

After any key name contains lowercase characters, data-* calls the attributes of the DOM element. However, the first time the removeData() method is called

This method is useful when you want to get rid of the values ​​you set previously using the wrap() method

The wrap() method in our project list is as follows:

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

"); The generated tag will look like this:

<code></code>

• The first list item.

• The second list item.

• The third list item.

As you can see, each individual ul tag.

Use wrapAll() method works the same as the wrapAll() method in our original project list: ```

$("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>

/ Original HTML

Albania
1. 
   Astria
2. Gambia
   
3. Bhutan

Chile
4. 
   Colombia
5. 
   Cyprus
6. 
   Cyprus
7. 
   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>

46. Belgium ").replaceAll("li.replace"); /* New HTML

47. Albania

48. Austria

49. Belgium

50. Bhutan

51. Chile

52. Belgium

53. Cyprus

*/ Use slice() method to filter the matching element set

Suppose you have a matching set of elements in jQuery, but you only want to use a subset of those elements. For example, consider using the slice(start, end) method in the previous section to select a list item, which provides an easy way to reduce the list of elements we selected to a specific index range.

We will use this method to operate on the following tags to manipulate list items within the index range we specify.

<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>

This is an example that takes a list of countries from 5 to 8 in the previous section and adds the

class to it: highlighted

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

As you can see, the index starts from scratch. The generated tag will now look like this:

<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>

Omitting the second parameter will result in selecting all elements from the starting index to the end of the matching set.

Final Thoughts

The jQuery library has been very popular for some time and it is still used in many projects and websites. While DOM traversals and operations are no longer as complex as they were in the early days, you can still write relatively little code to do some with the jQuery method.

I do not recommend that you load jQuery to specifically use the methods discussed in this tutorial. However, if you want to load libraries anyway, it's a good idea to use them.

The above is the detailed content of 12 Helpful jQuery Methods You Should Be Using. For more information, please follow other related articles on the PHP Chinese website!