jQuery dom traversal: mudah mengawal elemen web

Artikel ini akan meneroka kaedah jQuery Dom Traversal secara mendalam, menunjukkan cara menggunakan jQuery untuk dengan mudah memilih elemen laman web dan beroperasi berdasarkan hubungan mereka dengan unsur -unsur lain di halaman.

Poin teras:

JQuery Dom Traversal membolehkan pemaju dengan mudah menavigasi dan memanipulasi elemen laman web dan beroperasi relatif kepada pemilihan awal, termasuk menggantikan pemilihan asal atau menambah dan mengeluarkan unsur -unsur kepadanya.

• JQuery menyediakan pelbagai kaedah untuk menapis elemen berdasarkan kedudukan unsur -unsur berbanding dengan unsur -unsur lain dan sama ada mereka mempunyai kelas tertentu, dll. Kaedah termasuk
,
• , eq, first, last, slice dan filter. map
JQuery juga menyediakan kaedah Dom Traversal untuk mengakses elemen ibu bapa, anak, atau saudara. Kaedah ini termasuk
• , children, find, parent, parents, closest, siblings, prev, prevAll, next, nextAll,
,
• dan add. addBack end kaedah jQuery lain yang berkaitan dengan Dom Traversal termasuk contents, not,
,

,

dan

. Kaedah ini membantu menambahkan lebih banyak elemen kepada pemilihan, memulihkan ke unsur -unsur sebelumnya, atau mengecualikan unsur -unsur tertentu dari pemilihan.

Penapisan elemen

mari kita mulakan dengan cara menapis pemilihan ke dalam elemen yang lebih spesifik. Anda boleh menapis elemen berdasarkan banyak keadaan, seperti kedudukan mereka berbanding dengan unsur -unsur lain dan sama ada mereka mempunyai kelas tertentu. Dalam kebanyakan kes, anda akan memilih elemen yang lebih sedikit daripada yang anda pilih. Berikut adalah senarai kaedah penapisan yang berbeza:

• eq - Kaedah ini mengurangkan elemen yang sepadan dengan unsur -unsur yang terletak di indeks yang anda tentukan. Indeks bermula dari awal. Oleh itu, untuk memilih elemen pertama, anda mesti menggunakan $("selector").eq(0). Bermula dengan versi 1.4, anda boleh memberikan integer negatif yang mengira unsur -unsur dari akhir dan bukannya permulaan.
Kaedah
• first dan last - first akan mengembalikan hanya elemen pertama dalam set elemen yang sepadan, manakala last akan mengembalikan elemen terakhir dalam set elemen yang sepadan. Kaedah tidak menerima sebarang parameter.
• slice - Jika anda mencari semua elemen dalam koleksi yang indeksnya berada dalam julat tertentu, anda boleh menggunakan slice(). Kaedah ini menerima dua parameter. Parameter pertama menentukan indeks permulaan di mana kaedah harus memulakan kepingan, dan parameter kedua menentukan indeks yang pemilihan harus berakhir. Parameter kedua adalah pilihan, dan jika ditinggalkan, semua elemen yang indeksnya lebih besar daripada atau sama dengan indeks permulaan dipilih.
• filter - Kaedah ini mengurangkan unsur anda ditetapkan kepada elemen yang sepadan dengan pemilih atau melalui syarat -syarat yang ditetapkan dalam fungsi yang anda lalui ke kaedah ini. Berikut adalah contoh menggunakan pemilih:

$("li").filter(":even").css( "font-weight", "bold" );

anda juga boleh menggunakan fungsi untuk memilih elemen yang sama:

$("li")
.filter(function( index ) {
   return index % 2 === 0;
})
.css( "font-weight", "bold" );

Anda juga boleh menggunakan fungsi ini untuk melakukan pilihan yang lebih kompleks, seperti:

.filter(function( index ) {
 return $( "span", this ).length >= 2;
})

Ini hanya akan memilih elemen dengan sekurang -kurangnya dua <span></span> tag.

• map - Anda boleh menggunakan kaedah ini untuk lulus setiap elemen dalam pemilihan semasa melalui fungsi, dan akhirnya membuat objek jQuery baru dengan nilai pulangan. Objek jQuery yang dikembalikan itu sendiri mengandungi array yang anda boleh menggunakan kaedah get untuk mengendalikan array asas.

Dom Traversal

Pertimbangkan situasi di mana anda tahu pemilih yang boleh anda gunakan untuk mengakses pelbagai elemen, tetapi anda perlu menggunakan elemen induk mereka semua. Selain itu, elemen induk tidak mempunyai kelas atau tag tertentu yang biasa berlaku kepada mereka. Satu -satunya perkara yang mereka ada adalah bahawa mereka adalah kedua -dua elemen induk elemen yang boleh anda akses. Saya telah mengalami situasi yang sama berkali -kali.

JQuery menyediakan banyak kaedah berguna untuk mengakses unsur ibu bapa, kanak -kanak, atau adik -beradik. Mari memperkenalkan mereka satu demi satu:

• children - Kaedah ini membolehkan kita mendapatkan elemen kanak -kanak setiap elemen dalam set elemen. Unsur -unsur kanak -kanak ini boleh ditapis secara pilihan oleh pemilih.
• find - Kaedah ini akan mendapat semua keturunan setiap elemen dalam set elemen yang sepadan, yang ditapis oleh pemilih atau elemen. Dalam kes ini, parameter pemilih yang diluluskan kepada find() tidak pilihan. Jika anda ingin mendapatkan semua keturunan, anda boleh lulus pemilih sejagat (*) sebagai parameter untuk kaedah ini.
• parent - Kaedah ini akan mendapat elemen induk setiap elemen dalam set semasa. Elemen induk boleh ditapis secara pilihan menggunakan pemilih.
• parents - Kaedah ini akan mendapat semua nenek moyang setiap elemen dalam koleksi. Ia juga menerima parameter pemilih pilihan untuk menapis nenek moyang. Perbezaan antara parent() dan parents() adalah bahawa bekas hanya melintasi satu tahap ke atas, manakala parents() melintasi ke atas ke elemen akar dokumen.
• closest - Kaedah ini mendapat elemen pertama yang sepadan dengan pemilih yang diberikan dengan menguji elemen itu sendiri dan kemudian melintasi pokok Dom ke atas. Terdapat dua perbezaan yang signifikan antara parents() dan closest(). parents() bermula dari traversal dari elemen induk elemen, dan closest() bermula dari traversal dari elemen itu sendiri. Satu lagi perbezaan ialah closest() hanya melalui pokok Dom sehingga perlawanan ditemui, manakala parents() akan bergerak sehingga mencapai elemen akar dokumen.
• siblings - Kaedah ini mendapat unsur -unsur saudara setiap elemen dalam set elemen yang sepadan. Anda boleh memberikan pemilih sebagai parameter untuk mendapatkan unsur -unsur saudara dengan pemilih yang sepadan.
• prev - Kaedah ini akan mendapat elemen yang sama dari setiap elemen dalam koleksi kami. Jika anda menyediakan pemilih, kaedah akan memilih elemen hanya jika ia sepadan dengan pemilih.
• prevAll - Kaedah ini akan mendapat semua elemen preseden setiap elemen dalam koleksi kami. Seperti kaedah lain, anda boleh menyediakan pemilih untuk menapis elemen yang dikembalikan.
• next - Kaedah ini hanya mendapat elemen yang sama dengan segera mengikuti elemen yang sepadan. Jika pemilih disediakan, ia hanya akan mendapat pemilih yang sepadan.
• nextAll - Kaedah ini akan mendapat semua elemen saudara berikutnya setiap elemen dalam koleksi. Unsur -unsur saudara boleh dipilih secara selektif dengan menyediakan pemilih.

lebih banyak fungsi yang berkaitan dengan Dom Traversal

Apabila melintasi DOM, anda mungkin menghadapi situasi di mana anda perlu menambah lebih banyak elemen yang tidak berkaitan dengan koleksi asal kepada pemilihan, atau anda perlu memulihkan ke set elemen sebelumnya. JQuery menyediakan beberapa fungsi yang boleh anda gunakan untuk melaksanakan semua tugas ini.

• add - Kaedah ini akan mewujudkan objek jQuery baru yang akan mengandungi unsur -unsur baru yang ditambahkan ke dalam senarai elemen sedia ada. Ingat bahawa tidak ada jaminan bahawa unsur -unsur baru akan ditambah kepada koleksi yang sedia ada dalam urutan yang mereka lulus ke kaedah add.
• addBack - JQuery mengekalkan timbunan dalaman yang menjejaki perubahan kepada set elemen. Memanggil mana -mana kaedah traversal akan mendorong satu set elemen baru ke timbunan. Jika anda ingin menggunakan kedua -dua set elemen sebelumnya dan baru, anda boleh menggunakan kaedah addBack.
• end - Kaedah ini menamatkan operasi penapisan yang paling terkini dan mengembalikan elemen anda yang ditetapkan ke keadaan terdahulu. Ia berguna dalam situasi di mana anda ingin memanipulasi unsur -unsur tertentu yang berkaitan dengan set elemen semasa, memulihkan ke set asal, dan kemudian memanipulasi set elemen yang berbeza.
• contents - Jika anda ingin mendapatkan semua elemen semua elemen kanak -kanak, termasuk teks dan nod komen, anda boleh menggunakan kaedah contents. Anda juga boleh menggunakan kaedah ini untuk mendapatkan kandungan <iframe></iframe> (jika <iframe></iframe> berada dalam domain yang sama seperti halaman anda).
• not - Jika anda mempunyai satu set elemen yang besar dan ingin memilih hanya subset unsur -unsur yang tidak yang sepadan dengan pemilih yang diberikan, anda boleh menggunakan . Bermula dengan versi 1.4, kaedah ini juga boleh menerima fungsi sebagai hujah untuk menguji setiap elemen berdasarkan syarat -syarat tertentu. Mana -mana elemen yang memenuhi syarat -syarat ini akan dikecualikan daripada set yang ditapis. not()

Kesimpulan

Semua kaedah ini dalam jQuery memberikan kita cara mudah untuk melintasi satu set elemen ke yang lain. Oleh kerana beberapa kaedah ini sangat serupa antara satu sama lain, saya cadangkan anda memberi perhatian khusus kepada mereka. Memahami perbezaan antara

dan parents() atau closest() dan next("selector") dapat menjimatkan jam masalah dalam beberapa kes. nextAll("selector").eq(0)

Saya harap anda menikmati artikel ini. Jika anda mempunyai sebarang petua yang anda ingin kongsi dengan pembaca lain, sila komen di bawah!

JQuery Dom Traversal FAQ

Apakah maksud jQuery Dom Traversal?

JQuery Dom Traversal adalah aspek utama pembangunan web, yang membolehkan pemaju dengan mudah menavigasi dan memanipulasi model objek dokumen (DOMS). Ia menyediakan satu set kaedah yang boleh digunakan untuk melintasi unsur -unsur di laman web, menjadikannya lebih mudah untuk memilih elemen tertentu dan melakukan pelbagai operasi pada mereka. Ini mungkin termasuk mengubah kandungan, gaya, dan juga struktur laman web. Keupayaan untuk melintasi DOM menjadikan jQuery alat yang berkuasa untuk pembangunan web dinamik.

bagaimana jQuery dom traversal berbeza daripada operasi dom javascript tradisional?

Walaupun JavaScript menyediakan kaedah operasi DOM sendiri, jQuery Dom Traversal memudahkan proses dan menjadikannya lebih efisien. Ia menyediakan sintaks yang lebih intuitif dan ringkas yang menjadikan kod lebih mudah ditulis dan difahami. Di samping itu, JQuery mengendalikan banyak isu keserasian penyemak imbas yang berkaitan dengan JavaScript, menjadikan kod anda lebih mantap dan boleh dipercayai.

Bolehkah anda menerangkan kaedah .parent() dan .children() dalam jQuery Dom Traversal?

Kaedah

dalam jQuery digunakan untuk memilih elemen induk langsung elemen. Sebagai contoh, jika anda mempunyai elemen .parent() di dalam elemen , menggunakan <div> pada <code><div> akan memilih <code>.parent(). Sebaliknya, kaedah digunakan untuk memilih semua elemen kanak -kanak langsung elemen. Jika anda menggunakan .children() untuk elemen dalam contoh sebelumnya, ia akan memilih .children(). <div> Apakah perbezaan antara dan <h3> kaedah dalam <code>.find() jQuery? .children() Walaupun kedua -dua

dan .find() kaedah digunakan untuk memilih elemen keturunan, mereka bekerja sedikit berbeza. Kaedah .children() hanya melintasi ke bawah satu tahap, yang bermaksud ia hanya memilih elemen kanak -kanak langsung. Walau bagaimanapun, kaedah .children() boleh melintasi pelbagai tahap pokok Dom, yang bermaksud ia boleh memilih semua keturunan elemen, bukan hanya elemen kanak -kanak langsung. .find()

bagaimana saya menggunakan kaedah

dalam jQuery dom traversal? .siblings() Kaedah

dalam jQuery digunakan untuk memilih semua elemen saudara elemen yang dipilih. Unsur serentak merujuk kepada elemen yang berkongsi elemen induk yang sama. Sebagai contoh, jika anda mempunyai unsur -unsur pelbagai

di dalam elemen .siblings(), menggunakan pada satu akan memilih semua elemen