【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>

 

你可能感兴趣的:(jquery选择器)