Penjelasan terperinci tentang traversal jQuery bagi elemen DOM dan nod method_jquery

Contoh dalam artikel ini menerangkan kaedah jQuery merentasi elemen dan nod DOM. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

1. Melintasi ke atas - unsur nenek moyang

① $(selector).parent([filter]): Mengembalikan elemen induk langsung bagi elemen padanan pemilih Kaedah ini boleh menerima pemilih penapis untuk menapis elemen induk yang dikembalikan.

② $(selector).parents([filter]): Mengembalikan semua nod nenek moyang elemen padanan, sehingga ke html elemen akar dokumen Kaedah ini boleh menerima pemilih penapis untuk menapis nod nenek moyang yang dikembalikan.

Catatan: Perbezaan antara ibu bapa dan ibu bapa ialah ibu bapa mengembalikan nod induk langsung, ibu bapa mengembalikan semua nod moyang dan $("html").parent() mengembalikan nod dokumen, manakala $("html"). ibu bapa() Mengembalikan kosong.

③ $(selector).parentUntil([ancestorSelector][,filter]): Mengembalikan semua nod ancestor antara nod yang sepadan dan ancestorSelector Perhatikan bahawa titik padanan ancestorSelector tidak disertakan tapis nod Ancestor kembali, jika ancestorSelector kosong atau tiada elemen padanan ancestorSelector ditemui dalam nod ancestornya, semua nod ancestor dikembalikan, yang bersamaan dengan kaedah parents().

$(selector).parentUtil(elemen[,ancestorSelector]): Penggunaan dan maksud adalah sama seperti di atas.

④ $(selector) dikira semasa proses demonstrasi animasi Offset dan kedudukan elemen memainkan peranan yang besar.

⑤ $(selector).closest(ancestorSelector[,context]): Dapatkan elemen ancestor terdekat yang sepadan dengan ancestorSelector Kaedah ini boleh menerima konteks parameter untuk mengawal skop carian. Perbezaan dari kaedah ibu bapa adalah seperti berikut:

a.carian terdekat ke atas bermula daripada elemen semasa itu sendiri
ibu bapa bermula daripada elemen nod induk.

b.paling dekat melintasi pokok DOM sehingga ia menemui kedudukan elemen yang sepadan dengan ancestorSelector
ibu bapa melintasi pokok DOM sehingga elemen akar dokumen, menambahkan setiap elemen nenek moyang ke koleksi sementara; jika pemilih digunakan, koleksi ini ditapis berdasarkan pemilih

c.closest mengembalikan objek jQuery yang mengandungi 0 atau satu elemen
ibu bapa mengembalikan objek jQuery yang mengandungi 0, satu atau lebih elemen

Penggunaan transformasi lain:

$(selector).closest(ancestorSelectors[,context]);
$(selector).closest(jQuery object);
$(selector).closest(element)

2. Traversal ke bawah - unsur keturunan

① .children([childrenSelector]): Mengembalikan elemen anak langsung bagi elemen Kaedah ini boleh menerima parameter untuk menapis elemen anak yang dikembalikan.

② .find(descendantSelector): Mengembalikan semua elemen keturunan unsur yang sepadan dengan descendantSelector, sehingga ke keturunan terakhir.

Penggunaan transformasi lain:

.find(jQuery object);
.find(element);

③ .contents(): Mengembalikan semua elemen anak elemen Perbezaan daripada kanak-kanak ialah kandungan termasuk nod teks dan nod ulasan.

3. Adik beradik traversal - elemen abang

① .siblings([selector]): Mengembalikan semua elemen adik-beradik bagi elemen semasa Kaedah ini boleh menerima parameter pilihan untuk menapis elemen adik-beradik yang dikembalikan.

② .next([selector]): Mengembalikan elemen adik beradik seterusnya bagi elemen semasa Kaedah ini boleh menerima parameter pilihan untuk menapis elemen adik beradik yang dikembalikan.

③ .nextAll([selector]): Mengembalikan semua elemen adik-beradik selepas elemen semasa Kaedah ini boleh menerima parameter pilihan untuk menapis elemen adik-beradik yang dikembalikan.

④ .nextUntil([selector][,filter]): Mengembalikan semua elemen adik-beradik bagi elemen semasa sehingga elemen adik-beradik yang sepadan dengan keadaan pemilih ditemui Kaedah ini boleh menerima penapis parameter pilihan untuk menapis unsur adik-beradik yang dikembalikan.

⑤ .prev/prevAll/prevUntil mempunyai penggunaan dan fungsi yang sama seperti next/nextAll/nextUntil, tetapi arah carian adalah bertentangan.

4 ① .filter(selector): Tapis sub-set yang memenuhi syarat pemilih daripada set elemen padanan semasa untuk mengurangkan skop padanan.

.filter(function(index)): Tapis set elemen yang dipadankan pada masa ini mengikut fungsi panggil balik Indeks parameter yang dihantar ke fungsi panggil balik merujuk kepada indeks elemen dalam set ini mewakili elemen dalam badan fungsi, dan fungsi mengembalikan benar / salah, jika benar dikembalikan, elemen kanak-kanak dikekalkan, jika tidak elemen kanak-kanak dikecualikan.

Penggunaan transformasi lain:

② .first(): Mengembalikan elemen pertama dalam set elemen padanan semasa.

③ .last(): Mengembalikan elemen terakhir dalam set elemen padanan semasa.

④ .eq(index/-index): Mengembalikan elemen pada kedudukan yang ditentukan dalam set elemen padanan semasa Indeks bermula dari 0, dan nombor negatif bermaksud mengisih dari akhir ke permulaan.

⑤ .has(selector/element): Mengembalikan koleksi elemen dengan sub-elemen tertentu daripada koleksi elemen semasa, tidak termasuk elemen yang tidak mempunyai sub-elemen yang sepadan. Elemen anak boleh dipadankan menggunakan pemilih parameter atau objek elemen.

⑥ .is(selector|function(index)|element|jQueryObject): Semak koleksi elemen berdasarkan pemilih atau fungsi panggil balik atau elemen atau objek jQuery, dan kembali jika ia mengandungi sekurang-kurangnya satu elemen yang sepadan dengan ungkapan yang diberikan benar, jika tidak palsu dikembalikan Selain itu, jika koleksi elemen semasa kosong atau ungkapan kosong, palsu dikembalikan. Kaedah ini biasanya digunakan dalam fungsi panggil balik seperti pengendali acara untuk menentukan sama ada ini elemen khusus

⑦ .map(callback(index,domElement)): Tukar tatasusunan elemen yang dipadankan pada masa ini kepada tatasusunan objek lain (sama ada elemen dom atau bukan) melalui nilai pulangan fungsi panggil balik Jika anda ingin menukar jQueryObject biasa array, anda boleh menggunakan kaedah jQuery map(array,callback(objectOfArray,indexOfArray)) untuk mencapainya.

⑧ .bukan(pemilih|elemen|fungsi(indeks)|objek jQuery): Padamkan elemen yang memenuhi pelarasan parameter daripada tatasusunan elemen yang sepadan pada masa ini Parameter boleh menjadi pemilih, elemen DOM, objek jQuery biasa dan Boolean The fungsi panggil balik pembolehubah.

⑨ .slice(start[,end]): Dapatkan subset julat yang ditentukan daripada set elemen yang dipadankan pada masa ini Jika permulaan dan akhir ialah nombor negatif, dapatkan arah elemen dari hujung ke permulaan.

Pembaca yang berminat dengan lebih banyak kandungan berkaitan jQuery boleh menyemak topik khas di tapak ini: "Algoritma traversal JQuery dan ringkasan kemahiran", "ringkasan kemahiran operasi jadual (jadual) jQuery " , "Ringkasan kesan dan teknik seret jQuery", "Ringkasan teknik sambungan jQuery", "Ringkasan kesan khas klasik biasa jQuery" , "ringkasan penggunaan jQuery dan kesan khas", "ringkasan penggunaan pemilih jquery" dan "ringkasan pemalam dan penggunaan biasa jQuery"

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.