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

来源：互联网发布：袁和平知乎编辑：程序博客网时间：2024/06/16 05:53

        $(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>

1 0