我的第十六课：jQuery - 获取并设置 CSS 类_jquery 中没有提示css类名-CSDN博客

本文链接：https://blog.csdn.net/meiyouyimingtian/article/details/20701335

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
     <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
     <script type="text/javascript">
        $(document).ready(
            function(){
             $(".btn1").click(function(){
                 $("h1,h2,p").addClass("blue");
                 $("div").addClass("important");
             });

             $(".btn2").click(function(){
                   $("#div1").addClass("importants blues");

             });

             $(".btn3").click(
               function(){
                $("h1,h2,p").removeClass("blue");
             });

    $(".btn4").click(
               function(){
                $("#div3").toggleClass("blue");
             });

            }
        );
     </script>
     <style type="text/css">
         .important{
            font-weight:bold;
            font-size: xx-large;

         }
          .blue{
            color:blue;
          }
            .importants{
            font-weight:bold;
            font-size: xx-large;

         }
          .blues{
            color:blue;
          }
     </style>

</head>

<body>
     <h1 class="blue">标题一</h1>
     <h2 class="blue">标题二</h2>
     <p class="blue">段落一</p>
     <p class="blue">段落二</p>
     <div>这是很重要的文本</div>
     <br>
     <div id="div1">这是第一个文本</div>
     <div id="div2">这是第二个文本</div>
     <div id="div3">这是被切换的文本</div>
     <button class="btn1">向元素中添加类</button>
     <button class="btn2">向第一个div</button>
     <button class="btn3">从元素上删除类</button>
     <button class="btn4">切换css类</button>
</body>
</html>