咱俩询问了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网站的作业

jQuery 1jQuery 2内容过滤选择器

 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></p>
51 <p></p>
52 <p>测试1</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>

 

相关文章

网站地图xml地图