Jquery中的DOM操作 (六.样式操作)

最新推荐文章于 2021-10-03 16:05:56 发布

张大仙是个妖怪

最新推荐文章于 2021-10-03 16:05:56 发布

阅读量340

点赞数 1

分类专栏： # jQuery选择器和DOM操作文章标签： jQuery DOM对象操作DOM节点

本文链接：https://blog.csdn.net/NDKHBWH/article/details/60143724

版权

jQuery选择器和DOM操作专栏收录该内容

26 篇文章 0 订阅

订阅专栏

        $(function () {
            //9.样式操作
                    //1.获取样式和设置样式,使用attr();
                            //改变div元素的class属性
                             $("div").attr("class", "two");
                    //2.追加样式addClass();
                         //追加three样式;
                        //(1)如果给一个元素添加了多个class值,那么就相当于合并了他们的样式
                        //(2)如果有不同的class设置了同一样式的属性,则后者覆盖前者
                            $("div").addClass("three");
                            $("div").addClass("five");
                    //3.移除样式removeClass():从匹配的元素中删除全部的class或者指定的class
                            $("#btn1").click(function () {
                                $("div:eq(0)").removeClass("five");
                            });
                            $("#btn2").click(function () {
                                $("div:eq(0)").removeClass("three two");
                            });
                            $("#btn3").click(function () {
                                $("div:eq(1)").removeClass();
                            });
                    //4.切换样式
                            $("#btn4").click(function () {
                                $("div").toggle();
                            });
                            $("#btn5").click(function () {
                                $("div").toggleClass("five");
                            });
                    //5.判断是否含有某个样式hasClass
                            $("#btn6").click(function () {
                                var s = $("div").hasClass("five");
                                alert(s);
                            });
        });

<body>
<div class="one">你最喜欢的水果是?</div>
<div class="one">你最喜欢的水果是?</div>
<button id="btn1">第一个div移除蓝色的颜色</button>
<button id="btn2">第一个div移除红色和加粗</button>
<button id="btn3">第二个移除所有的样式</button>
<button id="btn4">交替执行一组隐藏和显示的动作toggle</button>
<button id="btn5">交替执行一组隐藏和显示class的动作toggleClass</button>
<button id="btn6">是否含有five</button>
</body>