jq: dom的筛选

本文深入解析了jQuery中各种筛选方法的应用,包括:first/:last选取首个/末个元素,:odd/:even选取奇数/偶数索引元素,:eq选取指定索引元素,以及prev/next/siblings等方法的选择相邻/所有兄弟元素策略。同时,还介绍了filter/not方法的使用,以及如何利用slice/map等函数进行元素的截取和高级筛选。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

筛选

jq中除了传css选择器以外,还可以传其他: 如li:first(li中的第一个)

:first(第一个) / :last(最后一个)

        <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>dom的筛选</title>
    <style>
    ul {
        margin: 0;
        width: 200px;
    }
    li {
        list-style: none;
        margin: 10px 0;
        padding: 10px;
        text-align: center;
        background: #e0eee8;
        border-radius: 10%;
    }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
<script src="http://code.jquery.com/jquery-3.4.1.js"></script>
<script>
    $('li:first').css('background-color', '#eacd76');
    $('li:last').css('background-color', '#40de5a');
</script>
</body>
</html>
      

v2-57cf6141f04d11cd5d5f5ccd15dcc325_b.jpg

:odd(索引为奇数) / :even(索引为偶数)

        $('li:odd').css('background-color', '#eacd76');
$('li:even').css('background-color', '#40de5a');

      

v2-83f13797587646793a4a147cedcc7ec2_b.jpg

:eq(具体的索引),如果是负数倒着来,如-1是最后一个

        $('li:eq(2)').css('background-color', '#eacd76');

      

v2-0152f868f42cbbbf17364d499554821f_b.jpg
        $('li').eq(2).css('background-color', '#eacd76');
$('li').first().css('background-color', '#3eede7');
$('li').last().css('background-color', '#fff143');

      

这三个可以写在后面。

v2-6a4e6dfccd4f17d580699225b74c5309_b.jpg

prev() / prevAll()

        $('li').eq(2).prev().css('background-color', '#eacd76');

      

prev选择当前元素的上面的兄弟元素,(可以传参,可以判断是不是该类似的元素)。

prevAll选择当前元素上面的全部兄弟元素。

nextAll如果没有具体选择哪个li,全部选中,但最后一个不会选中。

v2-3063249e62b0bc707eef9b0f6b6d7258_b.jpg

next() / nextAll()

用法和prev一样。nextAll如果没有具体选择哪个li,全部选中,但第一个不会被选中。

        $('li').nextAll().css('background-color', '#eacd76');

      

v2-46e90490bd269a419ae18e1a759b9250_b.jpg

siblings() 除了当前元素,其他的都选中。如果没有具体元素,则全部选中。

        $('li:eq(2)').siblings().css('background-color', '#eacd76');

      

v2-be03b03979f736dcdf820342559b16b5_b.jpg

filter。

可以写css选择器,拥有的会被选择出来。

也可以写函数,只要filter结果不等于false,可以根据函数index值选择,也可以选择全部

        $('li').filter(function(index, ele) {
    return index % 2 == 0; // 只要return不等于false就可以
}).css('background-color', '#eacd76');

      

v2-7821a4a0359cff2c339753a788fdd91d_b.jpg

not

可以传css选择器,可以传函数

和filter刚刚相反,只要不是当前元素的兄弟元素都可以选中。

        $('li').not('.test').css('background-color', '#eacd76');

      

v2-3e075785eb04c6e8008ec6ac46e36d50_b.jpg

is 判断这个范围中是否包含参数,包含则返回true

        console.log($('li').is('.test'));

      

v2-c84ca2bfde35c786c45940bdf456cac4_b.jpg

slice 截取

参数取头不取尾

        $('li').slice(2, 4).css('background', '#fff2df');

      

v2-e5d0a595ebd1ec0377e668ca87753968_b.jpg

map。

each的进阶版,each只可以遍历,处理数据需要其他的配合。

map遍历完后,还可以写条件,返回满足的元素(jq对象)。

        <ul>
    <li>
        <span class="food">瓜子</span>
        <span class="price">4</span>
    </li>
    <li>
        <span class="food">花生</span>
        <span class="price">3</span>
    </li>
    <li>
        <span class="food">矿泉水</span>
        <span class="price">1</span>
    </li>
    <li>
        <span class="food">方便面</span>
        <span class="price">2.5</span>
    </li>
</ul>
<script src="http://code.jquery.com/jquery-3.4.1.js"></script>
<script>
    $('li').map(function(index, ele) {
        if( $(ele).find('.price').text() > 2 ) {
            return ele;
         }
    }).css('background', '#fff2df');
</script>
      

v2-817d1c4e6d91c47e5923ea0651fde9f2_b.jpg

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值