Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Cara menggunakan kaedah tambah traversal jQuery

Cara menggunakan kaedah tambah traversal jQuery

PHPz
Lepaskan: 2023-04-17 13:55:24
asal
501 orang telah melayarinya
<p>jQuery merentasi kaedah tambah

<p>jQuery ialah perpustakaan JavaScript popular yang merangkumi banyak fungsi yang biasa digunakan oleh pembangun, menjadikan pembangunan JavaScript lebih mudah dan lebih cekap. Salah satunya ialah keupayaan untuk merentasi elemen DOM.

<p>Dalam jQuery, terdapat banyak cara untuk mengulang elemen dalam dokumen. Salah satu cara ialah menggunakan kaedah .add().

Apakah kaedah tambah? Kaedah

<p>.add() ialah kaedah yang digunakan oleh jQuery untuk menggabungkan dua atau lebih koleksi. Ia menambah elemen dari satu koleksi ke koleksi yang lain. Set baharu merangkumi semua elemen dalam set asal serta elemen baharu. Kaedah

<p>.add() boleh menerima berbilang parameter, dengan setiap parameter ialah pemilih CSS, elemen DOM atau satu set elemen DOM. Parameter ini akan ditambahkan pada koleksi asal.

<p>Pertimbangkan struktur HTML berikut:

<div class="box">
  <p>这里是段落1</p>
</div>
<div class="box">
  <p>这里是段落2</p>
</div>
Salin selepas log masuk
<p>Untuk memilih semua <p> elemen dan <div> elemen dan menambahnya pada koleksi baharu, gunakan .add() Kaedah:

var $newCollection = $('p').add('div');
Salin selepas log masuk
<p>Kini, $newCollection akan mengandungi semua elemen <p> dan <div>.

Elemen DOM Traverse

<p>Fungsi traversal jQuery mengembalikan objek jQuery yang mengandungi elemen DOM yang sepadan dengan pemilih yang diberikan. Fungsi ini boleh menapis koleksi, mencari subelemen dan mencari elemen DOM yang sepadan.

<p>Berikut ialah kaedah traversal jQuery yang paling biasa digunakan:

  • .children(): Mengembalikan koleksi elemen anak unsur padanan.
  • .parent(): Mengembalikan elemen induk langsung bagi elemen padanan.
  • .siblings(): Mengembalikan set elemen adik-beradik unsur padanan.
  • .next(): Mengembalikan elemen adik beradik seterusnya bagi elemen padanan.
  • .prev(): Mengembalikan elemen adik beradik sebelumnya bagi elemen padanan.
<p>Pengumpulan elemen DOM yang dikembalikan oleh kaedah ini boleh dilalui atau diproses selanjutnya menggunakan kaedah jQuery lain.

<p>Contoh berikut menunjukkan cara menggunakan kaedah .siblings() untuk mencari semua elemen adik beradik bagi nama kelas .red:

<div class="box">
  <div class="red">红色盒子</div>
  <div>白色盒子1</div>
  <div>白色盒子2</div>
</div>
<div class="box">
  <div class="red">红色盒子2</div>
  <div>白色盒子3</div>
  <div>白色盒子4</div>
</div>
Salin selepas log masuk
$(document).ready(function() {
  $('.red').siblings().css('background-color', 'gray');
});
Salin selepas log masuk
<p>Contoh ini akan Warna latar belakang semua elemen adik-beradik ditetapkan kepada kelabu. .red

Ringkasan

jQuery menyediakan banyak kaedah untuk merentasi elemen DOM untuk memanipulasi HTML dan CSS dengan mudah. Kaedah <p> boleh menggabungkan dua atau lebih koleksi elemen. .add()

Di atas adalah pengenalan ringkas kepada kaedah jQuery traversal dan <p>, saya harap ia akan membantu anda. .add()

Atas ialah kandungan terperinci Cara menggunakan kaedah tambah traversal jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan