JQuery过滤选择器--简单过滤器

最新推荐文章于 2022-10-11 17:22:32 发布

极客研究者

最新推荐文章于 2022-10-11 17:22:32 发布

阅读量284

点赞数

分类专栏： JQuery 文章标签：过滤器 css jquery

本文链接：https://blog.csdn.net/qq_34550459/article/details/106112125

版权

JQuery 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

简单过滤器是指以冒号开头,通常用于实现简单过滤效果的过滤器。

:first 匹配找到的第一个元素
:last 匹配找到的最后一个元素

:even 匹配所有索引值为偶数的元素
:odd 匹配所有索引值为奇数的元素

:eq(index) 匹配一个给定索引的元素(基于集合数据)
:gt(index) 匹配所有大于给定索引值的元素
:lt(index) 匹配所有小于给定索引值的元素

:not(selector) 去除所有与给定选择器匹配的元素
eg:$(‘input:not(:checked)’)

Demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>过滤选择器</title>
    <script src="../js/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('ul>li:first').css('background','#bfa');
            $('ul>li:last').css('background','#cacaca');
            $('ol>li:eq(2)').css('background','pink');
            
            
            $('td').css({
                "font-size":"12px",
                "padding":"3px"
            });

            $('tr:first').css({
                "background-color":"#B6DF48",
                "font-weight":"blod",
                "text-align":"center"
            });

            $("tr:odd").css("background-color","#F9FCEF");
        });
    </script>
</head>
<body>
        <ul>
                <li>多个里面筛选几个</li>
                <li>多个里面筛选几个</li>
                <li>多个里面筛选几个</li>
                <li>多个里面筛选几个</li>
                <li>多个里面筛选几个</li>
                <li>多个里面筛选几个</li>
            </ul>
            <ol>
                <li>多个里面筛选几个</li>
                <li>多个里面筛选几个</li>
                <li>多个里面筛选几个</li>
                <li>多个里面筛选几个</li>
                <li>多个里面筛选几个</li>
                <li>多个里面筛选几个</li>
            </ol>

        <div class="content">

            <table width="98%" border="1" align="center" cellpadding="0" cellspacing="0" bgcolor="#3F873B">
                <tr >
                    <td width="11%" height="27">编号</td>
                    <td width="14%" >祝福对象</td>
                    <td width="12%" >祝福者</td>
                    <td width="33%" >字条内容</td>
                    <td width="30%" >发送时间</td>
                </tr>

                <tr style="text-align:center;">
                        <td width="11%" height="27">1</td>
                        <td >琪琪</td>
                        <td >妈妈</td>
                        <td >愿你快乐的成长!</td>
                        <td>2020-05-06 20:30:00</td>
                    </tr>
            </table>
        </div>
</body>
</html>