过滤器就是过滤条件，对已经定位到的数组中DOM对象进行过滤筛选，过滤条件不能独立出现再jQuery函数，如果使用只能出现在选择器后方。

jQuery中DOM对象顺序

<div>1</div> <!--dom1-->
<div>2</div> <!--dom2-->
<div>3</div> <!--dom3-->
//jQuery对象会按照页面书写的顺序读取DOM对象
$("div") == [dom1,dom2,dom13]

注意：过滤器不能单独使用，必须和选择器一块使用。

基本过滤器

选择第一个first，保留数组中第一个DOM对象
- 语法：$("选择器:first")
选择最后一个last，保留数组中最后的DOM对象
- 语法：$("选择器:last")
选择数组中指定对象
- 语法：$("选择器:eq(数组索引)")
选择数组中小于指定索引的所有DOM对象
- 语法：$("选择器:lt(数组索引)") //不含索引本身
选择数组中大于指定索引的所有DOM对象
- 语法：$("选择器:gt(数组索引)") //不含索引本身

示例: //本示例中有一些jQuery对象事件的知识，可以先去事件了解一些后再来看下面代码。

<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        //页面加载完成后绑定事件，等同于onload
        $(function(){
            //为btn1绑定按钮事件
            $("#btn1").click(function(){
                //过滤器
                var $obj = $("div:first");
                $obj.css("color","red");
            });
            //为btn2绑定事件
            $("#btn2").click(function(){
                var $obj = $("div:last");
                $obj.css("color","green")
            })
            //为btn3绑定事件
            $("#btn3").click(function(){
                //指定第三个div改变颜色
                var $obj = $("div:eq(3)");
                $obj.css("color","blue");
            })
            //为btn4绑定事件
            $("#btn4").click(function(){
                //指定小于3的div改变颜色
                $("div:lt(3)").css("color",'orange');
            })
            //为btn5绑定事件
            $("#btn5").click(function(){
                //指定大于3的div改变颜色
                $("div:gt(3)").css("color",'yellow');
            })
        })
</script>
...
<body>
    <div id="one">div0</div>
    <div id="two">div1</div>
    <div>
        div2
        <div class="son" style="color: black;">div3</div>
        <div class="son" style="color: black;">div4</div>
    </div>
    <div>div5</div>
    <br/>
    <span>我是span</span>
    <br/>
    <p>功能按钮</p>
    <input type="button" id="btn1" value="选择第一个div0"/> <br/>
    <input type="button" id="btn2" value="选择最后一个div5"/> <br/>
    <input type="button" id="btn3" value="索引等于3的div"/> <br/>
    <input type="button" id="btn4" value="索引小于3的div"/> <br/>
    <input type="button" id="btn5" value="索引大于3的div"/> <br/>
</body>

表单属性过滤器

根据表单中DOM对象的状态情况，来过滤DOM对象的。如文本框是否为启用状态：enable、disable；选择状态：checked….

选择可用的文本框
- 语法：$(":text:enable")
选择不可用的文本框
- 语法：$(":text:disable")
复选框选中的元素
- 语法：$(":checkbox:checked")
选择指定下拉列表的被选中元素
- 语法：选择器>option:selected
- 表示的是父子关系，父>子

举个例子

<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
        $(function(){
            //获取按钮
            $("#btn1").click(function(){
                //获取所有可用的文本框
                var $obj = $(":text:enabled");
                //设置对象的value值为hello，val()函数传值调用即可
                $obj.val("hello");
            })
            $("#btn2").click(function(){
                //获取选中的复选框
                var $obj = $(":checkbox:checked");
                //遍历数组
                for (var i = 0;i<$obj.length;i++){
                    //alert($obj[i].value); 方法一
                    alert($($obj[i]).val());    //方法二
                }
            })
            $("#btn3").click(function(){
                //获取当前的下拉列表
                var $obj = $("select>option:selected");
                //输出value值
                alert($obj.val());
            })
        })
</script>
...
<body>
    <p>文本框</p>
    <input type="text" id="txt1" name="txt" value="text1" /><br/>
    <input type="text" id="txt2" name="txt" value="text2" disabled/><br/>
    <input type="text" id="txt3" name="txt" value="text3" /><br/>
    <input type="text" id="txt4" name="txt" value="text4" disabled/><br/>
    <br/>
    <p>复选框</p>
    <input type="checkbox" value="游泳"/>游泳<br/>
    <input type="checkbox" value="健身" checked/>健身<br/>
    <input type="checkbox" value="游戏" checked/>游戏<br/>
    <br/>
    <p>下拉列表</p>
    <select id="lang">
        <option value="java">java</option>
        <option value="python">python</option>
        <option value="javascript" selected>javascript</option>
        <option value="go">go</option>
    </select>
    <br/>
    <p>功能按钮</p>
    <button id="btn1">所以可用的text值设置为hello</button><br/>
    <button id="btn2">显示被选中的复选框的值</button><br/>
    <button id="btn3">显示下拉列表选中的值</button><br/>
</body>