12使用する必要のある役立つjQueryメソッド

データの添付とdom要素の削除

DOM要素から添付データを添付または削除するためにデータを添付するために使用できるいくつかの方法から始めましょう。

データ（）メソッドを使用します。 同じ方法は、単にデータ（）メソッドを渡すだけで追加のデータ値を取得することもできます。これは、jQueryの以前のバージョンでは、すべてのデータを完全に交換することができました。 ただし、新しいパスデータと既存のデータとマージされました。

キー名に小文字の文字が含まれている後、data-*はdom要素の属性を呼び出します。 ただし、removedata（）メソッドが初めて

と呼ばれるのは

この方法は、wrap（）メソッドを使用して以前に設定した値を取り除きたい場合に役立ちます

プロジェクトリストのwrap（）メソッドは次のとおりです。

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

"）; 生成されたタグは次のようになります：

<code></code>

• 最初のリスト項目。

2番目のリスト項目。
3番目のリスト項目。
ご覧のとおり、個々のULタグ。

使用wrapall（）メソッドの使用元のプロジェクトリストのwrapall（）メソッドと同じように動作します。

$（ "li"）。wrapall（ "

$（ "li"）。wrapinner（ "

<code>

");


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

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


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

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

"）;

/

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

オリジナルhtml

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

albania

1. astria
   
2. >

コロンビア

cyprus
4. 
   cyprus
5. 
   


7. ベルギー "）.replaceall（" li.replace "）; /* new HTML

アルバニア

オーストリア

ベルギー

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

47. チリ

48. ベルギー

49. cyprus

50. */ Slice（）メソッドを使用して、一致する要素セットをフィルタリング

jQueryに一致する要素のセットがあると仮定しますが、それらの要素のサブセットのみを使用する必要があります。たとえば、前のセクションでスライス（開始、終了）メソッドを使用してリスト項目を選択することを検討してください。これは、選択した要素のリストを特定のインデックス範囲に簡単に削減する方法を提供します。

51. この方法を使用して、次のタグを操作して、指定するインデックス範囲内のリスト項目を操作します。

52. これは、前のセクションで5〜8の国のリストを撮影し、

    クラスを追加する例です。

ご覧のとおり、インデックスはゼロから始まります。生成されたタグは、次のようになります：

53. 2番目のパラメーターを省略すると、開始インデックスから一致セットの最後まですべての要素が選択されます。

    最終的な考え

    jQueryライブラリはしばらくの間非常に人気があり、多くのプロジェクトやウェブサイトでまだ使用されています。 DOMトラバーサルと操作は、初期の頃ほど複雑ではなくなりましたが、JQUERYメソッドを使用するために比較的少ないコードを書くことができます。

    このチュートリアルで説明した方法を具体的に使用するためにjqueryをロードすることをお勧めしません。ただし、とにかくライブラリをロードしたい場合は、それらを使用することをお勧めします。

以上が12使用する必要のある役立つjQueryメソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。