jQuery练习t42

最新推荐文章于 2021-05-27 09:46:59 发布

虾米大王

最新推荐文章于 2021-05-27 09:46:59 发布

阅读量193

点赞数

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

本文链接：https://blog.csdn.net/modern358/article/details/112410572

版权

JavaScript 同时被 2 个专栏收录

329 篇文章 0 订阅

订阅专栏

jQuery

296 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {
            font-size: 12px;
            text-align: center;
        }
        div {
            width: 241px;
            height: 83px;
            border: 1px solid #EEEEEE;
        }
        h1 {
            font-size: 13px;
        }
        ul {
            list-style-type: none;
            padding: 0;
        }
        .defClass,.notClass{
            height: 23px;
            width: 60px;
            line-height: 23px;
            float: left;
            border-top: 1px solid #EEEEEE;
            border-bottom: 1px solid #EEEEEE;
        }
        .getFocus {
            width: 58px;
            border: 1px solid #666666;
            background-color: #EEEEEE;
        }
        #spanMove {
            width: 238px;
            height: 23px;
            line-height: 23px;
        }
    </style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            $("#btn1").click(function () {
                $("li:first").addClass("getFocus");
            });
            $("#btn2").click(function () {
                $("li:last").addClass("getFocus");
            });
            $("#btn3").click(function () {
                $("li:not(.notClass)").addClass("getFocus");
            });
            $("#btn4").click(function () {
                $("li:even").addClass("getFocus");
            });
            $("#btn5").click(function () {
                $("li:odd").addClass("getFocus");
            });
            $("#btn6").click(function () {
                $("li:eq(1)").addClass("getFocus");
            });
            $("#btn7").click(function () {
                $("li:gt(1)").addClass("getFocus");
            });
            $("#btn8").click(function () {
                $("li:lt(1)").addClass("getFocus");
            });
            $("#btn9").click(function () {
                $("div h1").css("width","238");
                $(":header").addClass("getFocus");
            });
            $("#btn10").click(function () {
                animateIt();
                $("#spanMove:animated").addClass("getFocus");
            });
        });

        function animateIt() {
            $("#spanMove").slideToggle("slow",animateIt);
        }
    </script>
</head>
<body>
    <div>
        <h1>基本过滤选择器</h1>
        <ul>
            <li class="defClass">Item 0</li>
            <li class="defClass">Item 1</li>
            <li class="notClass">Item 2</li>
            <li class="defClass">Item 3</li>
        </ul>
        <span id="spanMove">span move</span>
    </div>
    <input type="button" id="btn1" value="li:first">
    <input type="button" id="btn2" value="li:last">
    <input type="button" id="btn3" value="not(notClass)">
    <input type="button" id="btn4" value="li:even">
    <input type="button" id="btn5" value="li:odd">
    <input type="button" id="btn6" value="li:eq(1)">
    <input type="button" id="btn7" value="li:gt(1)">
    <input type="button" id="btn8" value="li:lt(1)">
    <input type="button" id="btn9" value=":header">
    <input type="button" id="btn10" value="spanMove">
</body>
</html>

虾米大王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery练习t42

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> body { font-size: 12px; text-align: center; } .
复制链接

扫一扫