JQuery 课时四 jQuery基础过滤器

卷毛崽

于 2021-07-04 16:05:48 发布

阅读量100

点赞数

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

本文链接：https://blog.csdn.net/qq_42221321/article/details/118462906

版权

jQuery 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

课时四 jQuery基础过滤器

:animated Selector
:eq( ) Selector
:even Selector
:first Selector
:focus Selector
:header Selector
：last Selector
:gt() Selector
:lt() Selector
：not Selector

:animated Selector

在这里插入图片描述

<!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>Document</title>
    <style>
        div{
            width: 100px;
            height: 160px;
            background-color: yellow;
            float: left;
            border: 1px solid #aaaaaa;
            margin: 0 5px;
        }
        .colored{
            background-color: green;
        }
    </style>
    <script src="./jquery-3.6.0.js"></script>
</head>
<body>
    <button id="run">run</button>
    <div></div>
    <div id="mover"></div>
    <div></div>

<script>
    //效果 id为mover的div执行动画，点击按钮时改为绿色
    $(function(){
        $("#run").click(function(){
            // 查找正在执行动画的div,点击按钮改变class
            $("div:animated").toggleClass("colored");
        });
        function animatedit(){
            // 用滑动动画显示或者隐藏一个元素
            $("#mover").slideToggle("slow",animatedit)
        };
        animatedit();
    })
</script>
</body>
</html>

效果：
在这里插入图片描述

:eq( ) Selector

在这里插入图片描述

:even Selector

在这里插入图片描述

:first Selector

在这里插入图片描述

:focus Selector

在这里插入图片描述

<!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>Document</title>
    <style>
        .focused{
            background-color: #abcdef;;
        }
    </style>
    <script src="./jquery-3.6.0.js"></script>
</head>
<body>
    <div id="content">
        <input tabindex="1">
        <input tabindex="2">
        <select tabindex="3">
            <option>select menu</option>
        </select>
        <div tabindex="4">
            a div
        </div>
    </div>
<script>
    $(function(){
        // delegate（），给一个元素添加一个或多个事件
        //toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
        // setTimeout(fn,0)的含义是，指定某个任务在主线程最早可得的空闲时间执行，也就是说，尽可能早得执行。它在"任务队列"的尾部添加一个事件，因此要等到主线程把同步任务和"任务队列"现有的事件都处理完，才会得到执行。在某种程度上，我们可以利用setTimeout(fn,0)的特性，修正浏览器的任务顺序。
        //setTimeout(fn,0)是异步函数
        $("#content").delegate("*","focus blur",function(event){
            var e =$(this);
            setTimeout(function(){
                // 当获取焦点时运用focused
                e.toggleClass("focused",e.is(":focus"));
            },0)
        })
    })
</script>
</body>
</html>

效果：焦点处背景颜色改变
在这里插入图片描述

:header Selector

在这里插入图片描述

：last Selector

在这里插入图片描述

:gt() Selector

在这里插入图片描述

:lt() Selector

在这里插入图片描述

<!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>Document</title>
    <script src="./jquery-3.6.0.js"></script>
</head>
<body>
    <table border="1">
        <tr>
            <td>td #0</td>
            <td>td #1</td>
            <td>td #2</td>
        </tr>
        <tr>
            <td>td #3</td>
            <td>td #4</td>
            <td>td #5</td>
        </tr>
        <tr>
            <td>td #6</td>
            <td>td #7</td>
            <td>td #8</td>
        </tr>
    </table>
    <script>
        //索引值小于4的所有元素，让字体颜色变为红色
        $(function(){
            $("td:lt(4)").css("color","red")
        })
    </script>
</body>
</html>

效果：//索引值小于4的所有元素，让字体颜色变为红色
在这里插入图片描述

：not Selector

在这里插入图片描述

卷毛崽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery 课时四 jQuery基础过滤器

课时四 jQuery基础过滤器:animated Selector:eq( ) Selector:even Selector:first Selector:focus Selector:header Selector：last Selector:gt() Selector:lt() Selector：not Selector:animated Selector<!DOCTYPE html><html lang="en"><head> <meta c
复制链接

扫一扫

专栏目录