jQuery非表单属性过滤器------jQuery学习之路4

最新推荐文章于 2024-09-29 11:25:09 发布

dragoned_123

最新推荐文章于 2024-09-29 11:25:09 发布

阅读量135

点赞数

分类专栏： jQuery 文章标签： jquery javascript

本文链接：https://blog.csdn.net/dragoned_123/article/details/107644569

版权

jQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

jQuery非表单属性过滤器

jQuery非表单属性过滤器

相信你应该了解了jQuery选择器，过滤器要配合选择器使用不能单独使用。

jQuery对象其实是一个包含DOM对象的数组，比如说

<div class="box2">你好</div>
<div class="box3">你好</div>

当你使用$(“div”)获取div时，其实包含了上面两个div对象，他们在一个数组里面

效果

在这里插入图片描述

<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<button class="one">第一个数字变红</button>
<button class="two">最后一个数字变红</button>
<button class="three">数字3变红</button>
<button class="four">大于第二个的数字的都变红</button>
<button class="five">小于第三个的数字的都变红</button>

方法

$(“选择器:first”) 获取选择器选中的第一个DOM对象

$(".one").click(function () {
     ds.css("color","black");
    $("div:first")[0].style.color = "red";
});

$(“选择器:last”) 获取选择器选中的最后一个DOM对象

$(".two").click(function () {
    ds.css("color","black");
    $("div:last")[0].style.color = "red";
});

$(“选择器:eq(数组下标)”) 获取选择器选中DOM数组的eq里面下标的对应DOM对象

$(".three").click(function () {
    ds.css("color","black");
    $("div:eq(3)")[0].style.color = "red";
});

$(“选择器:it(数组下标)”) 获取选择器选中的DOM数组下标小于it里面值的DOM

$(".four").click(function () {
    ds.css("color","black");
    $("div:gt(1)").css("color","red");
});

$(“选择器:gt(数组下标)”) 获取选择器选中的DOM数组下标大于gt里面值的DOM

$(".five").click(function () {
    ds.css("color","black");
    $("div:lt(2)").css("color","red");
});

完整源码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jq过滤器</title>
    <style>
        body{
            width: inherit;
            height: 600px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
    <script src="js/jquery-3.5.1.js"></script>
</head>
<body>
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<button class="one">第一个数字变红</button>
<button class="two">最后一个数字变红</button>
<button class="three">数字3变红</button>
<button class="four">大于第二个的数字的都变红</button>
<button class="five">小于第三个的数字的都变红</button>
<script>
    var ds = $("div");
    $(".one").click(function () {
         ds.css("color","black");
        $("div:first")[0].style.color = "red";
    });
    $(".two").click(function () {
        ds.css("color","black");
        $("div:last")[0].style.color = "red";
    });
    $(".three").click(function () {
        ds.css("color","black");
        $("div:eq(3)")[0].style.color = "red";
    });
    $(".four").click(function () {
        ds.css("color","black");
        $("div:gt(1)").css("color","red");
    });
    $(".five").click(function () {
        ds.css("color","black");
        $("div:lt(2)").css("color","red");
    });
</script>
</body>
</html>