2-8 jQuery选择器之内容筛选选择器
本节编程练习不计算学习进度，请电脑登录imooc.com操作

jQuery选择器之内容筛选选择器

基本筛选选择器针对的都是元素DOM节点，如果我们要通过内容来过滤，jQuery也提供了一组内容筛选选择器，当然其规则也会体现在它所包含的子元素或者文本内容上

内容过滤器描述如下表：

注意事项：

  1. :contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
  2. 如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。
  3. :parent与:empty是相反的，两者所涉及的子元素，包括文本节点

任务

在代码编辑器中第34行填写相应代码

$(".div:contains(':contains')")

在代码编辑器中第40行填写相应代码

$(".div:has(span)")

在代码编辑器中第62行填写相应代码

$("a:parent")

在代码编辑器中第68行填写相应代码

$("a:empty")
index.htmlimooc.css 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title></title>
  7.     <link rel="stylesheet" href="imooc.css" type="text/css">
  8.     <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  9. </head>
  10.  
  11. <body>
  12.     <h2>内容筛选器</h2>
  13.     <h3>:contains/:has</h3>
  14.     <div class="left">
  15.         <div class="div">
  16.             <p>:contains</p>
  17.         </div>
  18.         <div class="div">
  19.             <p>:contains</p>
  20.         </div>
  21.         <div class="div">
  22.             <p>
  23.                 <span>:has</span>
  24.             </p>
  25.         </div>
  26.         <div class="div">
  27.             <p>:contains</p>
  28.         </div>
  29.     </div>
  30.  
  31.     <script type="text/javascript">
  32.         //查找所有class='div'中DOM元素中包含"contains"的元素节点
  33.         //并且设置颜色
  34.         ?.css("color", "#CD00CD");
  35.     </script>
  36.  
  37.     <script type="text/javascript">
  38.         //查找所有class='div'中DOM元素中包含"span"的元素节点
  39.         //并且设置颜色
  40.         ?.css("color", "blue");
  41.     </script>
  42.  
  43.  
  44.     <h3>:parent/:empty</h3>
  45.     <div class="left">
  46.         <div class="aaron">
  47.             <a>:parent</a>
  48.         </div>
  49.         <div class="aaron">
  50.             <a>:parent</a>
  51.         </div>
  52.         <div class="aaron">
  53.             <a>:parent</a>
  54.         </div>
  55.         <div class="aaron">
  56.             <a></a>
  57.         </div>
  58.     </div>
  59.     <script type="text/javascript">
  60.        //选择所有包含子元素或者文本的a元素
  61.        //增加一个蓝色的边框
  62.        ?.css("border", "3px groove blue");
  63.     </script>
  64.  
  65.     <script type="text/javascript">
  66.        //找到a元素下面的所有空节点(没有子元素)
  67.        //增加一段文本与边框
  68.        ?.text(":empty").css("border", "3px groove red"); 
  69.     </script>
  70.  
  71. </body>
  72.  
  73. </html>
  1. .left {
  2.         width: auto;
  3.         height: 120px;
  4.     }
  5.  
  6.     .left div {
  7.         width: 70px;
  8.         height: 70px;
  9.         padding: 5px;
  10.         margin: 5px;
  11.         float: left;
  12.         background: #bbffaa;
  13.         border: 1px solid #ccc;
  14.     }
  15.  
  16.     .bottom {
  17.         width: 800px;
  18.     }
  19.  
  20.     .bottom div,
  21.     .bottom span {
  22.         display: block;
  23.         width: 80px;
  24.         height: 80px;
  25.         margin: 5px;
  26.         background: #bbffaa;
  27.         float: left;
  28.         font-size: 14px;
  29.     }
  30.  
  31.     .bottom .small {
  32.         width: 60px;
  33.         height: 25px;
  34.         font-size: 12px;
  35.         background: #fab;
  36.     }
下一节