jQuery支持的位置过滤器_位置过滤选择器有哪些-CSDN博客

本文链接：https://blog.csdn.net/qq_35864642/article/details/80115880

英文说明：
这里写图片描述
中文说明：
:first 选择上下文中的第一个匹配项。 li a:first 返回作为列表项的后代的第一个锚。
:last 选择上下文中的最后一个匹配项。 li a:last 返回作为列表项的后代的最后一个锚。
:even 在上下文中选择偶数元素。 li:even 返回每个偶数索引列表项。
:odd 在上下文中选择奇数元素。 li:odd 会返回每个oddindexed列表项。
:eq(n) 选择第n个匹配元素。
:gt(n) 选择第n个匹配元素之后的元素（第n个元素被排除）。
:lt(n) 选择第n个匹配元素之前的元素（第n个元素被排除在外）。

实例：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>jQuery in Action, 3rd edition</title>
      <link rel="stylesheet" href="../css/main.css"/>
   </head>
   <body>
   <input  type="button" value="选择上下文中的第一个匹配项" id="btn1"/>
    <input type="button" value="选择上下文中的最后一个匹配项" id="btn2"/><br>
    <input type="button" value="在上下文中选择偶数元素。 li:even    返回每个偶数索引列表项" id="btn3"/>
    <input type="button" value="在上下文中选择奇数元素。 li:odd 会返回每个oddindexed列表项" id="btn4"/><br>
    <input type="button" value="选择第2个匹配元素." id="btn5"/>
    <input type="button" value="选择第2个匹配元素之后的元素（第n个元素被排除）" id="btn6"/><br>
    <input type="button" value="选择第2个匹配元素之前的元素（第n个元素被排除在外）." id="btn7"/><br>


    <br>
<div>
      <ul>
         <li><a href="#css1">CSS1</a></li>
         <li><a href="#css2">CSS2</a></li>
         <li><a href="#css3">CSS3</a></li>
         <li>Basic XPath</li>
      </ul>
</div>
<div>
      <ul>
         <li><a href="#css1">CSS4</a></li>
         <li><a href="#css2">CSS5</a></li>
         <li><a href="#css3">CSS6</a></li>
         <li>Basic XPath</li>
      </ul>
</div>
<div>
      <ul>
         <li><a href="#css1">CSS7</a></li>
         <li><a href="#css2">CSS8</a></li>
         <li><a href="#css3">CSS9</a></li>
         <li>Basic XPath</li>
      </ul>
</div>
<div>
      <ul>
         <li><a href="#css1">CSS10</a></li>
         <li><a href="#css2">CSS11</a></li>
         <li><a href="#css3">CSS12</a></li>
         <li>Basic XPath</li>
      </ul>
</div>
      <script src="../js/jquery-1.11.3.min.js"></script>
      <style type="text/css">   
    </style>
    <script type="text/javascript">
      $(function(){

        $("#btn1").click(function(){
          $("ul:first").css("background", "#ffbbaa");
        });
        $("#btn2").click(function(){
          $("ul:last").css("background", "#ffbbaa");
        });
        $("#btn3").click(function(){
          //选取的元素中包含没有 title 的 div 元素. 
          $("ul:even").css("background", "#ffbbaa");
        });

        $("#btn4").click(function(){
         $("ul:odd").css("background", "#ffbbaa");
        });

        $("#btn5").click(function(){
          $("ul:eq(2)").css("background", "#ffbbaa");
        });
        $("#btn6").click(function(){
          $("ul:gt(2)").css("background", "#ffbbaa");
        });
        $("#btn7").click(function(){
          $("ul:lt(2)").css("background", "#ffbbaa");
        });

      })
    </script>
   </body>
</html>