【JQ】Jquery_过滤器（基础-子元素-可见性-内容）

最新推荐文章于 2024-01-13 22:21:09 发布

拾贰_C

最新推荐文章于 2024-01-13 22:21:09 发布

阅读量503

点赞数

分类专栏：学习笔记文章标签： jquery 前端 javascript vscode 前端框架

本文链接：https://blog.csdn.net/weixin_52372189/article/details/127161918

版权

本文介绍了JQuery的过滤器功能，包括基本过滤器（如:first、:last、:even、:odd等）、子元素过滤器（如:first-child、:last-child、:eq()等）和内容过滤器（如:hidden）。通过案例展示了如何使用这些过滤器进行DOM对象的筛选，并提供了相关参考链接。

摘要由CSDN通过智能技术生成

CSDN话题挑战赛第2期
参赛话题：前端技术分享

分享的本意就是总结并传播知识。这里，大家可以将自己掌握的前端知识总结，分享给大家。内容不限于分享技术干货、实用方案、框架解读、工具资源、前沿资讯等等，只要和前端技术有关即可，期待大家的大作~~~：

目录
过滤器

JQ过滤器

过滤器就是过滤条件，对已经定位到数组中的DOM对象进行过滤筛选，过滤条件不能独立出现在jQuery函数，如果使用只能出现在选择器后方。

基本过滤器

$("选择器:过滤器")
过滤器有：
:first - 保留数组中第一个DOM对象
:last - 保留数组中最后一个DOM对象
:even - 偶数
:odd - 奇数
:eq() - 等于 - 指定DOM对象
:gt() - 大于
:lt() - 小于
:not() - 不符合的
:header - 标题

子元素过滤器

可筛选指定的元素的子元素

「:first-child」

当前选中元素的第一个子元素

「:last-child」

当前选中元素的最后一个子元素

「:nth-child」

指定当前选中元素的第n个子元素

「:nth-last-child」

指定当前选中元素的倒数第n个子元素

「:onlyt-child」

指定当前选中元素的唯一子元素

内容过滤器

「:contains」

选择所有处于隐藏状态的元素

案例

基础选择器

`:first`

:firsrt

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQ Filtre（过滤器）</title>
    <script src="js/jQuery.min.js">      
    </script>
</head>
<body>
    <h1>JQ Base Filter</h1>
    <div>
        <p>00-01</p>
        <p>01-02</p>
        <p>02-03</p>
    </div>
    <script>     
        $(document).ready(
            function() {
     
                // 1.base filter---:first
                $("p:first").css("color","red");
            }
        );
    </script>
</body>
</html>

`:last`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQ Filtre（过滤器）</title>
    <script src="js/jQuery.min.js">
        
    </script>
    <style>
        body{
     
            background-color:cadetblue;
        }
    </style>
</head>
<body>
    <h1>JQ Base Filter</h1>

    <div>
        <p>00-01</p>
        <p>01-02</p>
        <p>02-03</p>
    </div>


    <script>
        
        $(document).ready(
            function() {
     

            

                // 2.:last
                $("p:last").css("color","yellow");

               

            }
        );
    </script>
</body>
</html>

`:even`:选择偶数的元素

偶数指的是—索引的数值
:even

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQ Filtre（过滤器）</title>
    <script src="js/jQuery.min.js">
        
    </script>
    <style>
        body{
     
            background-color:cadetblue;
        }
    </style>
</head>
<body>
    <h1>JQ Base Filter</h1>

    <div>
        <p>00-01</p>
        <p>01-02</p>
        <p>02-03</p>
        <p>03-04</p>
        <p>04-05</p>
        <p>05-06</p>
    </div>


    <script>
        
        $(document).ready(
            function() {
     

                // 1.base filter---:first
                // $("p:first").css("color","red");

                // 2.:last
                // $("p:last").css("color","yellow");

                // 3.:even
                $("p:even").css("color","blue");

            }
        );
    </script>
</body>
</html>

`:odd` —选择索引为奇数数值的元素

even、odd、first、last 以上都是将符合冒号:前条件的元素，收集起来放入集合中，从0开始编号为索引~ 对应的选择符合冒号：后条件的元素~~~

:odd

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQ Filtre（过滤器）</title>
    <script src="js/jQuery.min.js">
        
    </script>

最低0.47元/天解锁文章

拾贰_C

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JQ】Jquery_过滤器（基础-子元素-可见性-内容）

CSDN话题挑战赛第2期参赛话题：前端技术分享分享的本意就是总结并传播知识。这里，大家可以将自己掌握的前端知识总结，分享给大家。内容不限于分享技术干货、实用方案、框架解读、工具资源、前沿资讯等等，只要和前端技术有关即可，期待大家的大作~~~：「」「」「」「」「」「」:选择偶数的元素偶数指的是—索引的数值 —选择索引为奇数数值的元素子元素过滤器 · 3 · 3.1 好好学习学无止境
复制链接

扫一扫