jQuery--过滤器

洛小依ovo / 2023-08-03 / 原文

过滤器就是过滤条件，对已经定位到数组中的dom对象根据一些条件进行过滤筛选，过滤条件不能单独使用，必须和选择器一起使用

一、基本过滤器

1、选择第一个，保留数组中第一个DOM对象

$("选择器:first")

2、选择最后一个，保留数组中最后的DOM对象

$("选择器:last")

3、选择数组中指定对象

$("选择器:eq(数组索引)")

4、选择数组中小于指定索引的所有DOM对象

$("选择器:lt(数组索引)")

5、选择数组中大于指定索引的所有DOM对象

$("选择器:gt(数组索引)")

6、例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤器</title>
    <script src="jquery-3.7.0.js"></script>
</head>
<body>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                var obj = $("div:first")
                obj.css("background","red")
            })
            $("#btn2").click(function(){
                var obj = $("div:last")
                obj.css("background","blue")
            })
            $("#btn3").click(function(){
                var obj = $("div:eq(3)")
                obj.css("background","blue")
            })
        })
    </script>
    <div id="zero">div zero</div>
    <div id="one">div one</div>
    <div id="two">div two</div>
    <div>
        div three
        <div>div four</div>
        <div>div five</div>
    </div>
    <span>span</span>
    <br>
    <input type="button" id="btn1" value="获取第一个div">
    <input type="button" id="btn2" value="获取最后一个div">
    <input type="button" id="btn3" value="获取索引为3的div">

</body>
</html>

二、表单属性过滤器

根据表单中dom对象的状态情况定位dom对象

启用状态enabled
不可用状态disabled
选择状态checked

1、选择可用的文本框

$(":text:enabled")

2、选择不可用的文本框

$(":text:disabled")

3、复选框选中的元素

$(":checkbox:checked")

4、选择指定下拉列表的被选中元素

选择器>option:selected
// > 子选择器

5、例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单属性过滤器</title>
    <script src="jquery-3.7.0.js"></script>
</head>
<body>
    <script>
        $(function(){
            $("#btn1").click(function(){
                $(":text:enabled").val("hello")
            })
            $("#btn2").click(function(){
                var obj = $("#yuyan>option:selected")
                console.log(obj.val())
            })
        })
    </script>
    <input type="text" name="" id="txt1" value="txt1"><br>
    <input type="text" name="" id="txt2" value="txt2" disabled><br>
    <input type="text" name="" id="txt3" value="txt3"><br>
    <input type="text" name="" id="txt4" value="txt4" disabled><br>
    <select name="" id="yuyan">
        <option value="java">java</option>
        <option value="go">go</option>
        <option value="python">python</option>
    </select>
    <br>
    <input type="button" id="btn1" value="设置所有可用文本框值为hello">
    <input type="button" id="btn2" value="显示option中的value">
</body>
</html>