Apakah pemilih hierarki dalam jquery?

Pemilih hierarki dalam jquery ialah: 1. Pemilih keturunan, sintaks "$("M N")"; 2. Pemilih keturunan, sintaks "$("M>N""; sintaksnya ialah "$("M~N""); 4. Pemilih bersebelahan, sintaksnya ialah "$("M N")".

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 1.10.2, komputer Dell G3.

Pemilih hierarki ialah pemilih asas yang memilih elemen melalui perhubungan hierarki antara elemen. Pemilih hierarki juga sangat penting dalam pembangunan sebenar. Hubungan hierarki yang biasa termasuk: bapa dan anak lelaki, keturunan, saudara lelaki, dan jiran.

Dalam jQuery, terdapat 4 jenis pemilih hierarki, seperti yang ditunjukkan dalam jadual di bawah.

jQuery 层次选择器 选择器 说明 M N 后代选择器，选择 M 元素内部的后代N元素（所有 N 元素） M>N 子代选择器，选择 M 元素内部的子代N元素（所有第 1 级 N 元素） M~N 兄弟选择器，选择 M 元素后面所有的同级 N 元素 M N 相邻选择器，选择 M 元素相邻的（下一个）元素（M、N 是同级元素） Selain itu, kita juga perlu memberi perhatian kepada 4 perkara berikut:

$("M N") Anda boleh menggunakan $(M).find(N) sebaliknya

$("M>N") boleh digantikan dengan $(M).children(N);

$("M~N") boleh digantikan dengan $(M). nextAll(N);

$("M N") boleh digantikan dengan $(M).next(N).

Untuk empat kaedah find( ), children( ), nextAll( ), dan next( ), kami akan memperkenalkannya secara terperinci kemudian, supaya anda boleh melihatnya secara ringkas di sini.

Pemilih turunan

Pemilih keturunan digunakan untuk memilih semua elemen jenis tertentu di dalam elemen, termasuk unsur anak dan unsur keturunan lain. .

Sintaks:

$("M N") "Elemen M" dan "elemen N" dipisahkan oleh ruang, menunjukkan bahawa unsur turunan N di dalam elemen M dipilih (iaitu, semua elemen N ).

Contoh:

$(function () { $("#first p").css("color","red"); }) 子元素

子元素

子元素的子元素

子元素

Kesan larian program ditunjukkan dalam Rajah 1:

$("#first p") bermaksud pemilihan. Oleh itu, kedua-dua unsur anak dan unsur keturunan lain akan dipilih. id="first"

Pemilih kanak-kanak

Pemilih kanak-kanak, digunakan untuk memilih sub-elemen tertentu di dalam elemen. Walaupun pemilih keturunan dan pemilih keturunan sangat serupa, mereka juga mempunyai perbezaan yang jelas.

Pemilih keturunan memilih semua elemen di dalam elemen (termasuk elemen anak, elemen cucu, dll.); sub-elemen dalam elemen (hanya sub-elemen).

Sintaks:

Gunakan pemilih antara "elemen M" dan "elemen N" untuk memilih sub-elemen N di dalam elemen M .

Contoh: $("M>N") > Kesan pratonton ditunjukkan dalam Rajah 2:

$(function () { $("#first>p").css("color","red"); }) 子元素

子元素

子元素的子元素

子元素

bermaksud unsur dipilih Elemen kanak-kanak p di bawah. Jika kita membandingkan contoh ini dengan contoh pemilih keturunan, kita dapat melihat dengan jelas bahawa pemilih keturunan hanya memilih elemen anak dan tidak termasuk elemen keturunan lain.

$("#first>p") Pemilih adik beradik id="first"

Pemilih adik beradik digunakan untuk memilih jenis elemen adik beradik tertentu di belakang (tidak termasuk bahagian depan). Sintaks:

Gunakan pemilih

antara "elemen M" dan "elemen N" untuk memilih semua elemen adik beradik N selepas elemen M.

Contoh: $("M~N") ~ Hasil pelaksanaan program ditunjukkan dalam Rajah 3:

$(function() { $("#second~p").css("color", "red"); }) 子元素

子元素

子元素的子元素

子元素

bermaksud memilih Semua unsur adik-beradik p selepas unsur. Ingat, pemilih adik beradik hanya memilih semua elemen adik beradik yang berikutnya, bukan semua elemen adik beradik yang terdahulu.

$("#second~p") Pemilih bersebelahan id="second"

Pemilih bersebelahan, digunakan untuk memilih elemen "bersebelahan" di belakang (tidak termasuk bahagian depan) elemen adik beradik. Pemilih bersebelahan juga sangat serupa dengan pemilih adik beradik, tetapi terdapat perbezaan yang ketara.

Pemilih adik beradik memilih "semua" elemen jenis tertentu di belakang elemen

Pemilih bersebelahan memilih elemen "bersebelahan" di belakang elemen; unsur .

Sintaks:

Gunakan pemilih antara "elemen M" dan "elemen N" untuk memilih elemen bersebelahan di belakang elemen Brother elemen M N.

Contoh: $("M+N") Kesan berjalan program ditunjukkan dalam Rajah 4:

$(function() { $("#second+p").css("color", "red"); }) 子元素

子元素

子元素的子元素

子元素

bermaksud memilih id ="second "Unsur adik beradik "bersebelahan" p di belakang elemen. Contoh:

$("#second p") Kesan pelaksanaan program ditunjukkan dalam Rajah 5.

$(function() { $("li+li").css("border-top", "2px solid red"); }) 第1个元素 第2个元素 第3个元素 第4个元素 第5个元素

menggunakan pemilih bersebelahan, yang bermaksud "pilih elemen li bersebelahan (seterusnya) selepas elemen li". Memandangkan elemen li terakhir tidak mempunyai elemen li seterusnya, tiada elemen li seterusnya untuk dipilih untuk elemen li terakhir. boleh mencapai kesan menambah sempadan antara dua elemen li.

[Pembelajaran yang disyorkan: tutorial video jQuery , video pembangunan bahagian hadapan web ]

Apakah pemilih hierarki dalam jquery?

Artikel berkaitan