我们了解了jQuery基本过滤选择器的知识，今天我们来学习一下jQuery的另一个强大的过滤选择器——内容过滤选择器。
有了jQuery内容过滤选择器，我们就可以轻松地对DOM文档中的文本内容进行筛选，让我们准确地选取我们所需要的元素。
========================================================================
下面我们来了解下这4个内容过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
| $("Element:contains(text)") | 选取含有文本内容为“text”元素 | 集合元素 | $(“div:contains('john')”)选取含有文本“john”的div元素 |
| $("Element:empty") | 获得对象元素不包含文本或子元素 | 集合元素 | $(“div:empty”)选取不包含子元素（包括文本元素）的div空元素 |
| $("Element:parent") | 以上面相反，获得对象元素包含文本或子元素 | 集合元素 | $(“div:parent”)选取拥有子元素（包括文本元素）的div元素 |
| $("Element:has(selector)") | 选取含有某个元素是否包含某个元素 | 集合元素 | $("p:has(span)")表示所有包含span元素的p元素 |
==========================================================================
ps.文章参考梦三秋和w3cfuns网站
==========================================================================
完成了w3cfuns网站的作业
内容过滤选择器
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>实例</title> 6 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 7 <script type="text/javascript"> 8 $(function(){ 9 $("#but1").click(function(){ 10 $("div:contains(huige)").text("跟huige学习jQuery"); 11 }); 12 $("#but2").click(function(){ 13 $("div:empty").text("我不包含任何元素或文本"); 14 }); 15 $("#but3").click(function(){ 16 $("div:parent").text("我包含元素或文本"); 17 }); 18 $("#but4").click(function(){ 19 $("div:has(p)").text("我包含P元素"); 20 }); 21 }); 22 </script> 23 <style type="text/css"> 24 body,div{margin:0; padding:0;} 25 body{padding:0 10px;} 26 div,p{margin-top:10px; height:22px; color:#fff; line-height:22px; border:1px #000 solid;} 27 div{background:#39f;} 28 p{background:#f00;} 29 div p{height:8px; line-height:8px;} 30 </style> 31 </head> 32 33 <body> 34 35 <input type="button" id="but1" value="选择所有div中包含我是huige的内容，将其内容修改成“跟huige学习jQuery”" /> 36 <input type="button" id="but2" value="选择所有div中不包含子元素或者文本的对象，将其内容修改成“我不包含任何元素或文本”" /> 37 <input type="button" id="but3" value="选择所有div中包含子元素或者文本的对象，将其内容修改为“我包含元素或文本”" /> 38 <input type="button" id="but4" value="选择所有div中包含p子元素的对象,将其内容修改为“我包含p元素”" /> 39 40 41 <div>huige是个好人</div> 42 <div>好人是huige</div> 43 <div>huige是个博客园主</div> 44 <div>博客园主是huige</div> 45 <div>huige博客园主是个好人</div> 46 <div></div> 47 <div></div> 48 <div></div> 49 <div></div> 50 <p><span></span></p> 51 <p><span></span></p> 52 <p><span>测试1</span></p> 53 <p>测试2</p> 54 <div><p></p></div> 55 <div><p></p></div> 56 <div><p></p></div> 57 <div><p></p></div> 58 59 60 </body> 61 </html>