cari

Rumah >hujung hadapan web >tutorial js >Penjelasan ringkas tentang pemilih penapis sub-elemen dalam jQuery_jquery

Penjelasan ringkas tentang pemilih penapis sub-elemen dalam jQuery_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBasal
2016-05-16 15:04:502059semak imbas

Peraturan penapisan penapis elemen anak adalah untuk mendapatkan elemen yang sepadan melalui hubungan antara elemen induk dan elemen anak.

2016418172315508.png (694×613)

$('li:first-child').css('background', '#ccc'); //每个父元素第一个li 元素 
 
$('li:last-child').css('background', '#ccc'); //每个父元素最后一个li 元素 
 
$('li:only-child').css('background', '#ccc'); //每个父元素只有一个li 元素 
 
$('li:nth-child(odd)').css('background', '#ccc'); //每个父元素奇数li 元素 
 
$('li:nth-child(even)').css('background', '#ccc'); //每个父元素偶数li 元素 
 
$('li:nth-child(2)').css('background', '#ccc'); //每个父元素第三个li 元素

Kami tahu cara menggunakan

:first

Pemilih penapis boleh mendapatkan elemen anak pertama dalam elemen induk yang ditentukan, tetapi pemilih ini hanya mengembalikan satu elemen, bukan koleksi dan menggunakan 

:first-child

Pemilih penapis elemen kanak-kanak boleh mendapatkan elemen anak pertama yang dikembalikan dalam setiap elemen induk Ia adalah koleksi dan biasanya digunakan untuk pemprosesan pemilihan berbilang data koleksi.

Seperti yang ditunjukkan di bawah, jika anda ingin mendapatkan li pertama dalam setiap ul pada halaman dan menukar warnanya. Kemudian anda boleh menggunakan 

: first-child


<body>
  <h3>该百年额米格“蔬菜水果”中第一行的文字颜色</h3>
  <ul>
    <li>芹菜</li>
    <li>茄子</li>
    <li>萝卜</li>
    <li>大白菜</li>
    <li>西红柿</li>
  </ul>
  <ul>
    <li>橘子</li>
    <li>香蕉</li>
    <li>葡萄</li>
    <li>苹果</li>
    <li>西瓜</li>
  </ul>
</body>

<script type="text/javascript">
  $("li:first-child").css("color", "red");
</script>

Kesan yang dipaparkan dalam penyemak imbas:

2016418172340814.jpg (489×326)

Lulus

$("li:first-child")
Kod pemilih

memperoleh 25edfb22a4f469ecb59f1190150159c6 elemen pertama daripada dua elemen induk dan menggunakan 

css()
Kaedah

mengubah suai warna teks yang mereka paparkan pada halaman.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Contoh perkongsian menukar halaman HTML kepada imej menggunakan kemahiran PHP+JavaScript_javascriptArtikel seterusnya：Contoh perkongsian menukar halaman HTML kepada imej menggunakan kemahiran PHP+JavaScript_javascript

Artikel berkaitan

Lihat lagi