pembelajaran pemilih penapis kandungan jQuery tutorial_jquery

Peraturan penapisan penapis kandungan terutamanya berdasarkan sub-elemen atau kandungan teks yang terkandung.

$('div:contains("xxx")').css('background', '#ccc'); //选择元素文本节点含有xxx 文本的元素 
 
$('div:empty').css('background', '#ccc'); //选择空元素 
 
$('ul:has(.red)').css('background', '#ccc'); //选择子元素含有class 是red 的元素 
 
$(':parent').css('background', '#ccc'); //选择非空元素 

jQuery menyediakan kaedah has() untuk meningkatkan prestasi penapis :has:

$('ul').has('.red').css('background', '#ccc'); //选择子元素含有class 是red 的元素 

jQuery menyediakan kaedah dengan nama yang serupa dengan :parent, tetapi kaedah ini tidak memilih elemen yang mengandungi elemen anak atau teks, tetapi memperoleh elemen induk elemen semasa dan mengembalikan koleksi elemen.

$('li').parent().css('background', '#ccc'); //选择当前元素的父元素 
 
$('li').parents().css('background', '#ccc'); //选择当前元素的父元素及祖先元素 
 
$('li').parentsUntil('div').css('background', '#ccc'); //选择当前元素遇到div 父元素停止 

Peraturan penapisan pemilih penapisan kandungan jQuery digunakan terutamanya pada sub-elemen atau kandungan teksnya yang terkandung dalam elemen DOM Ia terutamanya termasuk empat kaedah penapisan berikut:

Untuk belajar dengan lebih baik, mula-mula tulis struktur HTML beberapa elemen DOM:

<div>John Resign</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J.Ohn</div>
<div></div>
<p></p>
<div><p>Has p</p></div>

1. Pemilih penapisan kandungan——:mengandungi(teks)
Pemilih:

E:contains(text) //E merujuk kepada elemen DOM, teks yang terkandung dalam :contains(text), dan teks ialah rentetan yang ditentukan untuk dicari
Penerangan:

Pilih elemen dengan kandungan teks "teks"

Nilai pulangan:

Unsur koleksi

Contoh:

<script type="text/javascript">
 $(document).ready(function(){
  $('div:contains(John)').css('background','#f36');
 });
</script>

Fungsi:

Tukar warna latar belakang elemen div yang mengandungi teks "John"

Kesan:

Berbalik kepada struktur HTML sebelumnya, kita dapat melihat bahawa dua daripada elemen div mengandungi teks "John", kerana di sini kita terutamanya menukar warna latar belakang div yang mengandungi teks "John", jadi semua orang berada dalam kesan Ia boleh dilihat bahawa warna latar belakang div pertama dan ketiga kami telah bertukar kepada "#f36". Untuk memahami perubahan dengan lebih baik, anda boleh melihat perubahan dalam HTML melalui alat Firebug dalam Firefox:

2. Pemilih penapisan kandungan——:kosong

Pemilih:

E:empty //Di mana E ialah elemen DOM, :empty bermaksud elemen DOM tidak mengandungi sebarang sub-elemen atau teks
Penerangan:

Pilih elemen kosong tanpa sebarang unsur anak atau teks

Nilai pulangan:

Unsur koleksi

Contoh:

<script type="text/javascript">
 $(document).ready(function(){
  $('div:empty').css('background','#f36');
 });
</script>

Fungsi:

Tukar warna latar belakang div yang tidak mengandungi unsur anak (termasuk tiada unsur teks), dengan kata lain, tukar warna latar belakang div yang tidak mengandungi apa-apa

Kesan:

Walaupun semua elemen dalam html kami sebelum ini tidak mengandungi unsur anak, sesetengahnya mengandungi unsur teks Hanya terdapat satu div dan satu elemen p tanpa unsur anak dan tiada kandungan teks. Di samping itu, dalam contoh kami, kami hanya menukar warna latar belakang div yang tidak mengandungi elemen kanak-kanak dan kandungan teks, jadi dalam kesan kami hanya div yang mempunyai warna latar belakang "#f36". :

3. Pemilih penapisan kandungan——:mempunyai(pemilih)

Pemilih:

E:has(selector) //E ialah teg elemen DOM yang berkesan, :has(selector) mengandungi pemilih dan pemilih digunakan untuk menapis

Penerangan:

Pilih elemen yang mengandungi elemen yang dipadankan oleh pemilih

Nilai pulangan:

Unsur koleksi

Contoh:

<script type="text/javascript">
 $(document).ready(function(){
  $('div:has(p)').css('background','#f36');
 });
</script>

在我们这个实例中，只有一个div中包含了子元素P，所以包含了符合这个要求的div元素其背景色被设置为“#f36”，改变后的HTML:

四、内容过滤选择器——:parent

选择器：

E:parent //E为有效的DOM元素标签，:parent含有子元素或文本内容。

描述：

选取含有子元素或者文本的元素标签

返回值：

集合元素

实例：

<script type="text/javascript">
 $(document).ready(function(){
  $('div:parent').css('background','#f36');
 });
</script> <br />