pemilih hierarki jQuery

Pemilih Tahap

$(s1 s2) [ Bapa dan Anak]

Pemilih terbitan: dapatkan semua nod s2 di dalam s1 (tanpa mengira tahap)

$("div span")

<div>
    <span></span>
    <p>
        <span></span>
    </p>
</div>
<span></span>

$(s1 > s2) [ibu bapa-anak]

Pemilih elemen anak langsung: dalam s1 Secara dalaman dapatkan nod elemen anak s2

$("div > span")

    <div>
        <span></span>
        <p>
            <span></span>
        </p>
        <span></span>
    </div>
<span></span>

$(s1 + s2) [saudara]

Pemilih adik beradik langsung: Dapatkan nod s2 perhubungan adik beradik pertama sejurus selepas s1. Tidak boleh ada sebarang teg lain antara s1 dan s2, jika tidak, Tidak berfungsi

$("div + span")

<div>
    <span></span>
    <p>
        <span></span>
    </p>
    <span></span>
</div>
<span></span>
<span></span>
<div></div>
<span></span>

$(s1 ~ s2 ) [Saudara]

Seterusnya semua pemilih nod perhubungan adik-beradik: Dapatkan semua nod s2 perhubungan adik-beradik di belakang s1

$("div ~ span" )

<div>
    <span></span>
    <p>
        <span></span>
    </p>
    <span></span>
</div>
<span></span>
<span></span>
<p></p>
<span></span>

rrree

Nota: Sila ulas tiga lagi daripada empat pemilih. Uji satu persatu

Meneruskan pembelajaran

fail baharu

<!DOCTYPE html> <html> <head> <title>php.cn</title> <meta charset="utf-8" /> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script > function f1(){ //$(s1 s2) $('div span').css('background-color','blue'); //$(s1 > s2) $('div > span').css('background-color','green');//张飞关羽 //$(s1 + s2) 紧紧挨着的 $('div + span').css('background-color','red'); //$(s1 ~ s2) $('div ~ span').css('background-color','brown'); } </script> </head> <body> <h2>层次选择器</h2> <div> <span>北京</span> <p> <span>上海</span> </p> <span>深圳</span> </div> <p>南京</p> <span>杭州</span> <p>厦门</p> <span>天津</span> <div>重庆</div> <span>合肥</span> <input type="button" value="触发" onclick="f1()" /> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik