Bagaimana untuk menulis pemilihan tahap jquery

Dengan pembangunan berterusan dan pengemaskinian teknologi bahagian hadapan Web, jQuery telah menjadi pilihan pertama bagi banyak pembangun bahagian hadapan kerana jQuery sangat berkuasa dan mudah digunakan, serta boleh mengendalikan banyak tugas pembangunan Web biasa dengan mudah, salah satu daripada iaitu pemilihan hierarki . Dalam artikel ini, kami akan memperkenalkan cara menggunakan pemilih hierarki jQuery.

Pemilih hierarki membolehkan kami memilih nod tertentu dalam pepohon DOM, seperti memilih elemen anak atau elemen induk bagi elemen tertentu. Pemilih hierarki terdiri daripada pemilih yang dipisahkan oleh aksara ruang (' '), setiap satunya mengehadkan pemilihan kepada set pilihan. Sebagai contoh, "div p" akan memilih semua elemen P dalam elemen Div. Jadual berikut menyenaraikan beberapa pemilih hierarki yang biasa digunakan:

Jadual 1: Pemilih hierarki yang biasa digunakan dalam jQuery

Penerangan Pemilih

Pemilih 1 > elemen anak pemilih 1

Pemilih 1 Pemilih 2 Pemilih 2 ialah elemen turunan pemilih 1

Pemilih 1 + Pemilih 2 Pemilih 2 Merupakan elemen adik beradik pemilih 1 seterusnya

Pemilih 1 ~ Pemilih 2 Pemilih 2 ialah semua elemen adik-beradik selepas pemilih 1

Setelah memahami pemilih di atas, kami Anda boleh cuba membina beberapa pemilih hierarki untuk memilih nod dalam pepohon DOM. Dalam contoh seterusnya, kami akan memilih induk langsung semua elemen item senarai (li):

$( "li" ).parent();

Di sini, kami telah menggunakan kaedah induk() untuk memilih induk langsung setiap item senarai. Seterusnya, kami boleh memilih elemen adik beradik seterusnya bagi setiap elemen induk:

$( "li" ).parent().next();

Di sini, kami menggunakan kaedah next() untuk memilih elemen adik beradik seterusnya bagi induk langsung setiap item senarai . Anda juga boleh menggunakan kaedah prev() untuk memilih elemen sebelumnya dan bukannya kaedah next() untuk memilih elemen seterusnya.

Selain elemen ibu bapa dan adik beradik langsung, kita juga boleh memilih elemen anak atau keturunan. Dalam contoh seterusnya, kami akan memilih semua elemen perenggan (p) dalam semua elemen dengan kelas "pembungkus":

$( ".wrapper p" ).css( "background-color", "yellow" );

Di sini, kami telah menggunakan ruang untuk memisahkan elemen yang mengandungi kelas "pembungkus" dan elemen Perenggan. Kami juga boleh menggunakan pemilih ">" untuk memilih elemen anak langsung, seperti yang ditunjukkan dalam contoh berikut:

$( ".wrapper > p" ).css( "background-color", "yellow" );

Di sini, kami telah menggunakan pemilih ">" untuk memilih perenggan yang terkandung secara langsung dalam kelas elemen "pembungkus". Memandangkan kami mempunyai pemahaman yang lebih baik tentang pemilih hierarki, kami boleh menggunakannya dengan lebih baik dalam kod kami sendiri.

Ringkasan:

Dalam artikel ini, kami memperkenalkan pemilih hierarki jQuery dan menyediakan beberapa kod sampel untuk membantu pembaca memahami. Pemilih hierarki membolehkan kami memilih nod tertentu dalam pepohon DOM, seperti memilih elemen anak atau elemen induk bagi elemen tertentu. Memahami pemilih ini boleh membantu anda memahami operasi jQuery dengan lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk menulis pemilihan tahap jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!