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

jQuery选择器之基本筛选选择器

很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素，为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素。筛选选择器很多都不是CSS的规范，而是jQuery自己为了开发者的便利延展出来的选择器

筛选选择器的用法与CSS中的伪元素相似，选择器用冒号“：”开头，通过一个列表，看看基本筛选器的描述：

注意事项：

  1. :eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素，根据之前匹配的元素在进一步筛选，注意jQuery合集都是从0开始索引
  2. gt是一个段落筛选，从指定索引的下一个开始，gt(1) 实际从2开始

任务

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

$(".div:first")

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

$(".div:last")

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

$(".div:even")

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

$(".div:odd")

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

$(".aaron:eq(2)")

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

$(".aaron:gt(3)")

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

$(".aaron:lt(2)")

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

$("input:not(:checked) + p")

 

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>:first/:last/:even/:odd</h3>
  14.     <div class="left">
  15.         <div class="div">
  16.             <p>div:first</p>
  17.             <p>:even</p>
  18.         </div>
  19.         <div class="div">
  20.             <p>:odd</p>
  21.         </div>
  22.         <div class="div">
  23.             <p>:even</p>
  24.         </div>
  25.         <div class="div">
  26.             <p>:odd</p>
  27.         </div>
  28.         <div class="div">
  29.             <p>:even</p>
  30.         </div>
  31.         <div class="div">
  32.             <p>div:last</p>
  33.             <p>:odd</p>
  34.         </div>
  35.     </div>
  36.     <script type="text/javascript">
  37.     //找到第一个div
  38.     ?.css("color", "#CD00CD");
  39.     </script>
  40.  
  41.     <script type="text/javascript">
  42.     //找到最后一个div
  43.     ?.css("color", "#CD00CD");
  44.     </script>
  45.  
  46.     <script type="text/javascript">
  47.     //:even 选择所引值为偶数的元素，从 0 开始计数
  48.     ?.css("border", "3px groove red");
  49.     </script>
  50.  
  51.     <script type="text/javascript">
  52.     //:odd 选择所引值为奇数的元素，从 0 开始计数
  53.     ?.css("border", "3px groove blue");
  54.     </script>
  55.  
  56.  
  57.     <h3>:eq/:gt/:lt</h3>
  58.     <div class="left">
  59.         <div class="aaron">
  60.             <p>:lt(3)</p>
  61.         </div>
  62.         <div class="aaron">
  63.             <p>:lt(3)</p>
  64.         </div>
  65.         <div class="aaron">
  66.             <p>:eq(2)</p>
  67.         </div>
  68.         <div class="aaron">
  69.         </div>
  70.         <div class="aaron">
  71.             <p>:gt(3)</p>
  72.         </div>
  73.         <div class="aaron">
  74.             <p>:gt(3)</p>
  75.         </div>
  76.     </div>
  77.     <script type="text/javascript">
  78.     //:eq
  79.     //选择单个
  80.     ?.css("border", "3px groove blue");
  81.     </script>
  82.  
  83.     <script type="text/javascript">
  84.     //:gt 选择匹配集合中所有索引值大于给定index参数的元素
  85.     ?.css("border", "3px groove blue");
  86.     </script>
  87.  
  88.      <script type="text/javascript">
  89.     //:lt 选择匹配集合中所有索引值小于给定index参数的元素
  90.     //与:gt相反
  91.     ?.css("color", "#CD00CD");
  92.     </script>
  93.  
  94.     <h3>:not</h3>
  95.     <div class="left">
  96.         <div>
  97.             <input type="checkbox" name="a" />
  98.             <p>Aaron</p>
  99.         </div>
  100.         <div>
  101.             <input type="checkbox" name="b" />
  102.             <p>慕课</p>
  103.         </div>
  104.         <div>
  105.             <input type="checkbox" name="c" checked="checked" />
  106.             <p>其他</p>
  107.         </div>
  108.     </div>
  109.     <script type="text/javascript">
  110.         //:not 选择所有元素去除不匹配给定的选择器的元素
  111.         //选中所有紧接着没有checked属性的input元素后的p元素，赋予颜色
  112.         ?.css("background-color", "#CD00CD");
  113.     </script>
  114. </body>
  115.  
  116. </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.     }
下一节