过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则集与CSS中的伪类选择器语法相同，都是以一个冒号开头。按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤，接下来主要看一下基本过滤选择器。
基本过滤选择器主要有以下几种：
- :first：选取第一个元素（单个元素）
- :last：选取最后一个元素（单个元素）
- :not(selector)：去除所有与给定选择器匹配的元素（元素集合）
- :even：选取索引是偶数的所有元素，索引从0开始（元素集合）
- :odd：选取索引是奇数的所有元素，索引从0开始（元素集合）
- :eq（index）：选取索引等于index的元素（单个元素）
- :gt(index)：选取索引大于index的元素（元素集合）
- :lt(index)：选取索引小于index的元素（元素集合）
- :header：选取所有的标题元素（元素集合）
- :animated：选取当前正在执行动画的所有元素（元素集合）
- :focus：选取当前获得焦点的元素（元素集合）
在操作之前，我们先在html中写如下代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-3.2.1.js"></script> </head> <body> <ul> <li>春</li> <li>夏</li> <li>秋</li> <li>冬</li> <li>变</li> <li id="xing">形</li> <li>金</li> <li>钢</li> </ul> <div class="apple">frist</div> <div class="apple">second</div> <div class="apple">three</div> <div>包含input的type为"hidden"的div <input type="hidden" size="8"></div> <span id="mover">正在执行动画的span元素</span> </body> </html>
接下来，通过操作这些li和div等元素，来展示这些基本过滤选择器。
获得第一个li
$("li:first").css("color","red");
获得最后一个li
$("li:last").css("color","blue");
把[偶数]li设置背景颜色(li元素下标从0开始的)
$("li:even").css("background-color","pink");
把[奇数]li设置背景颜色
$("li:odd").css("background-color","lightblue");
li的下标小于4的，都设置背景颜色
$("li:lt(4)").css("background-color","orange");
下标大于5的都给统一背景色 ,不包括5
$("li:gt(5)").css("background-color","pink");
需要特别注意的是，每次使用gt后，下标都是重新开始计算的。
//$("li") 0---7 //$("li:gt(0)") 0---6（下标从新开始计算）//$("li:gt(0):gt(0)") 0---5 (下标从0开始计算)$("li:gt(0):gt(0)").css('color','red');//第一次排除了春，第二次排除了夏
$("li:gt(0):even").css('color',"blue"); //偶数(下标都是从0开始的，第一次排除了春，然后夏的下标为0，为偶数)
只给“冬”设置背景颜色
$("li:eq(3)").css("background-color","green");
给“夏”和“金”设置背景颜色
$("li:eq(1) , li:eq(6)").css("color","red");
:not(选择器) 把指定选择器给去除
$("li:not(#xing)").css('color','red');
