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>

Fungsi:
Tukar warna latar belakang elemen div yang mengandungi elemen anak P
Kesan:

在我们这个实例中，只有一个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 />

功能：
改变含有子元素或文本内容的div的背景色。换句话说只在div包含了任何一个子元素或者任何内容，其背景色都将会改变。
效果：

本例子，只有一个div和一个p元素中不包含任何子元素和文本内容，因为我们这里是对div进行设置，所以效果中显示，除了这两个不含有子元素和任何内容的div的背景色都变成了“#f36”，变化后的HTML：

有关于jQuery选择器中的内容过滤选择器，就简单的说到这里，大家如果想更深的体会其具体的用法，可以在本地多做几个实例练习。如果大家对jQuery选择器的其他选择器用法感兴趣的话，可以在本站中了解其他的选择器的具体功能和用法，同时也可以随时观注本站的内容更新。