jQuery过滤器

最新推荐文章于 2024-09-09 23:21:46 发布

原创最新推荐文章于 2024-09-09 23:21:46 发布 · 94 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

5 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <script type="text/javascript" src="jquery-3.4.1.js"></script>
</head>
<body>
    <div >我是divone</div>
    <div >我是div2
        <div>我是div three</div>
        <div>我是div four</div>
    </div>

    <div >我是div five</div>
    <br>
    <span>我是span</span>
    <br>
    <input type="button" id="btn1" value="第一个div">
    <input type="button" id="btn2" value="第二个div">
    <input type="button" id="btn3" value="第三个div">
    <input type="button" id="btn4" value="第四个div">
    <input type="button" id="btn5" value="第五个div">

</body>
</html>
<script type="text/javascript">
    //过滤器不能单独使用，必须和选择器一起使用
    //根据一定条件来筛选dom对象
    //语法
    //$("选择器:first")  第一个dom对象
    //$("选择器:last")    数组中的最后一个dom对象
    //$("选择器:eq(数组的下标)")    获取指定下标的dom对象
    //$("选择器:lt(下标)")    获取小于下标的所有dom对象
    //$("选择器:gt(下标)")    获取大于下标的所有dom对象

    $(function () {

        $("#btn1").click(function () {
                $("div:first").css("background","red");
        });

        $("#btn2").click(function () {
            $("div:last").css("color","red");
        });
        $("#btn3").click(function () {
            //$操作的是一个数组
            //获取指定下标的dom对象
            $("div:eq(2)").css("color","red");
        });
        $("#btn4").click(function () {
            //$操作的是一个数组
            $("div:gt(2)").css("color","red");
        });
        $("#btn5").click(function () {
            //$操作的是一个数组
            $("div:lt(2)").css("color","red");
        });
    })
</script>