2.jQuery显示与隐藏元素,操作css样式，添加和删除类名，隐式迭代

本文链接：https://blog.youkuaiyun.com/m0_75166176/article/details/145686146

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>一段文字</p>
    <button id="hide">hide</button>
    <button id="show">show</button>
    <button id="toggle">hide or show</button>
    <div>
        <button class="btn">1按钮</button>
        <button class="btn">2按钮</button>
        <button class="btn">3按钮</button>
        <button class="btn">4按钮</button>
        <button class="btn">5按钮</button>
    </div>


</body>
<script src="./jquery-3.7.1.min.js"></script>


<script>
    // 1.jQuery显示与隐藏元素
    $(document).ready(function () {
        // 绑定事件的元素id
        $("#hide").click(function () {
            //添加事件的操作对象和事件hide，hide里的第一个参数为毫秒值，可以实现过渡效果。第二个是过渡类型，第三个是自定义函数。
            $("p").hide(3000, "linear", () => {
                alert("linear是匀速过渡的意思，而默认的可能是swing，也就是开始慢，中间快，最后又慢。")
            });
        })
    });
    // 同hide的使用方法
    $(document).ready(() => {
        $("#show").click(() => {
            $("p").show(10000, "swing");
        })
    });
    // toggle就是开关
    $(document).ready(() => {
        $("#toggle").click(() => {
            $("p").toggle(3000, "linear")
        })
    });


    // 2.操作css样式
    $(
        () => {
            $("p").css({
                backgroundColor: "red",
                fontSize: "2em",
            })
        }
    )


    // 3.为元素添加和删除类名
    $(
        () => {
            // 1.addClass添加类
            $("p").addClass("text")
            // 2.removeClass删除类
            $("p").removeClass("text")
            // 3.toggleClass切换类
            $("p").click(function () {
                $("p").toggleClass("text")
            })

        }
    )

    // 4.隐式迭代
    $(
        // 隐式迭代：循环逻辑被封装在底层，开发者只需调用方法或语法，无需关心循环细节。
        () => {
            $(".btn").mouseover(function () {
                // $(this).css("background", "red");
                // $(this).siblings().css("background","")

                //链式编程
                $(this).css("background", "blue").siblings().css("background", "")
            })
        }
    )

</script>

</html>