12 kaedah jQuery yang berguna yang harus anda gunakan

lampiran data dan penyingkiran elemen DOM

Mari kita mulakan dengan beberapa kaedah yang boleh anda gunakan untuk melampirkan data ke atau mengeluarkan data yang dilampirkan dari mana -mana elemen DOM.

Gunakan kaedah data (). Kaedah yang sama juga boleh mendapatkan nilai data tambahan dengan hanya lulus kaedah data (), yang dalam versi jQuery terdahulu menghasilkan penggantian lengkap semua data. Walau bagaimanapun, ia kini menggabungkan data lulus baru dengan data yang sedia ada.

Selepas mana-mana nama utama mengandungi aksara huruf kecil, data-* memanggil atribut elemen DOM. Walau bagaimanapun, kali pertama kaedah yang dikeluarkan () dipanggil

Kaedah ini berguna apabila anda ingin menyingkirkan nilai yang anda tetapkan sebelum ini menggunakan kaedah bungkus ()

kaedah bungkus () dalam senarai projek kami adalah seperti berikut:

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

"); Tag yang dihasilkan akan kelihatan seperti ini:

<code></code>

• item senarai pertama.

• item senarai kedua.

• item senarai ketiga.

seperti yang anda lihat, setiap tag UL individu.

Kaedah Wrapall () berfungsi sama seperti kaedah Wrapall () dalam senarai projek asal kami: `` `

$ ("li"). Wrapall ("

<code>

");


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

$ ("li"). Wrapinner ("

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


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

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

");

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

asal Html

albania

astria

gambia
bhutan
🎜>
colombia

4. Cyprus



>

Belgium ") .ReplaceAll (" li.replace "); /* HTML baru

albania

austria
Belgium

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

bhutan

46. Chile

47. Belgium

48. Cyprus

49. */ Gunakan kaedah slice () untuk menapis set elemen yang sepadan
50. Katakan anda mempunyai set unsur yang sepadan dalam jQuery, tetapi anda hanya mahu menggunakan subset unsur -unsur tersebut. Sebagai contoh, pertimbangkan untuk menggunakan kaedah Slice (Start, End) di bahagian sebelumnya untuk memilih item senarai, yang menyediakan cara mudah untuk mengurangkan senarai elemen yang kami pilih untuk julat indeks tertentu.
    Kami akan menggunakan kaedah ini untuk beroperasi pada tag berikut untuk memanipulasi item senarai dalam julat indeks yang kami tentukan.

51. Ini adalah contoh yang mengambil senarai negara dari 5 hingga 8 di bahagian sebelumnya dan menambah kelas

    kepadanya:

52. Seperti yang anda lihat, indeks bermula dari awal. Tag yang dihasilkan sekarang akan kelihatan seperti ini:

53. Omitting parameter kedua akan mengakibatkan memilih semua elemen dari indeks permulaan hingga akhir set padanan.

    Pemikiran Akhir

    Perpustakaan JQuery telah sangat popular untuk beberapa waktu dan ia masih digunakan dalam banyak projek dan laman web. Walaupun Traversals Dom dan Operasi tidak lagi kompleks kerana mereka berada di zaman awal, anda masih boleh menulis kod yang agak sedikit untuk melakukan beberapa dengan kaedah jQuery.

    Saya tidak mengesyorkan agar anda memuatkan jQuery untuk menggunakan kaedah yang dibincangkan secara khusus dalam tutorial ini. Walau bagaimanapun, jika anda mahu memuatkan perpustakaan, ia adalah idea yang baik untuk menggunakannya.

Atas ialah kandungan terperinci 12 kaedah jQuery yang berguna yang harus anda gunakan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!