16--Jquery对样式的操作之删除和切换样式

  1. 使用removeClass()删除样式
    实例:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Jquery的removeClass()移除样式</title>
    <script src="jquery-1.11.3.js"></script>

    <style>
        .myClass{
     
     
            font-weight: 900;
            color:red;
        }
        .another{
     
     
            font-style: italic;
            color: blue;
        }
    </style>
</head>
<body>
    <p title="你喜欢的运动" class="myClass another">请选择你喜欢的运动?</p>
    <ul id="sport">
        <li>足球</li>
        <li>王者荣耀</li>
        <li>乒乓球</li>
        <li>排球</li>
    </ul>
     <script>
        $(function(){
     
     
            /*removeAttr()移除的是属性*/
            /*$("p").removeAttr("class");*/
            /*removeClass()移除的是class属性的值*/
            $("p").removeClass("myClass");
        });
     </script>
</body>
</html>

注意:removeAttr()移除的是属性。removeClass()移除的是class属性的值。
2. 使用toggleClass()切换样式
实例:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Jquery的toggleClass切换样式</title>
    <script src="jquery-1.11.3.js"></script>

    <style>
        .myClass{
     
     
            font-weight: 900;
            color:red;
        }
        .another{
     
     
            font-style: italic;
            color: blue;
        }
    </style>
</head>
<body>
    <p title="你喜欢的运动" class="myClass">请选择你喜欢的运动?</p>
    <ul id="sport">
        <li>足球</li>
        <li>王者荣耀</li>
        <li>乒乓球</li>
        <li>排球</li>
    </ul>
     <script>
        $(function(){
     
     
            /*给p标签绑定一个点击事件*/
            $("p").click(function(){
     
     
                /*切换样式:指的是该样式在有和没有之间进行切换*/
                $("p").toggleClass("another");
            });
        });
     </script>
</body>
</html>

注意:toggleClass()指的是该样式在有和没有之间进行切换。

猜你喜欢

转载自blog.csdn.net/qwy715229258163/article/details/113878594