【6】jQuery学习——入门jQuery选择器之过滤选择器-内容过滤选择器

我们了解了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的内容，将其内容修改成&ldquo;跟huige学习jQuery&rdquo;" />
36 <input type="button" id="but2" value="选择所有div中不包含子元素或者文本的对象，将其内容修改成&ldquo;我不包含任何元素或文本&rdquo;" />
37 <input type="button" id="but3" value="选择所有div中包含子元素或者文本的对象，将其内容修改为&ldquo;我包含元素或文本&rdquo;" />
38 <input type="button" id="but4" value="选择所有div中包含p子元素的对象,将其内容修改为&ldquo;我包含p元素&rdquo;" />
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>

 

posted @ 2012-08-08 10:57  huige728  阅读(576)  评论(2)  编辑  收藏  举报