jQuery操作类相关的方法

最新推荐文章于 2021-04-20 22:22:44 发布

Michael II

最新推荐文章于 2021-04-20 22:22:44 发布

阅读量180

点赞数

分类专栏： jQuery学习文章标签： jQuery操作类相关的方法 jQuery基础

本文链接：https://blog.csdn.net/YYxiaobao0726/article/details/88137865

版权

jQuery学习专栏收录该内容

16 篇文章 1 订阅

订阅专栏

jQuery中操作类相关的方法总共有三个，下面的代码很基础，也很容易懂。部分地方做好了注释。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery操作类相关的方法</title>
    <style>
        *{
            margin: 0;
            padding: 0
        }
        .class1{
            width: 100px;
            height: 100px;
            background: red;
        }
        .class2{
            border: 10px solid #000;
        }
    
    </style>
    <script src="js/jquery.js"></script>
   	<script>
   		$(function(){
            /*
            1.addClass(class|fn)
            作用：添加一个类
            如果要添加多个，多个类名之间用空格隔开即可
           
            2.removeClass([class|fn])
            作用：删除一个类
            如果要删除多个，多个类名之间用空格隔开即可

            3.toggleClass(class|fn[.sw])
            作用：切换类
            有就删除，没有就添加
            
            */
            var btns = document.getElementsByTagName("button");
            btns[0].onclick = function(){
                $("div").addClass("class1 class2")
            }
            btns[1].onclick = function(){
                $("div").removeClass("class1 class2")
            }
            btns[2].onclick = function(){
                $("div").toggleClass("class1 class2")
            }

           })
   	</script>
</head>
<body>
    <button>添加类</button>
    <button>删除类</button>
    <button>切换类</button>
    <div> </div>
</body>
</html>

若想查看运行效果，可复制代码。

Michael II

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery操作类相关的方法

jQuery中操作类相关的方法总共有三个，下面的代码很基础，也很容易懂。部分地方做好了注释。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=dev
复制链接

扫一扫

专栏目录