绝代码农 发表于 2021-7-10 15:27:56

jquery 添加 删除 切换 类的练习

  知识点:addClass()removeClass() toggleClass()

  

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
            *{
    margin:0;
    padding:0;
    border-style:none;
    list-style:none;}
    div{
    height:100px;
    width:100px;
    border:1px solid red;}
   .new-style{
   background-color:#74D565;}
    </style>
   <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
    <div></div>
    <button>添加</button>
    <button>删除</button>
    <button>切换</button>
    <script>
$(document).ready(function(e) {
//添加类 addClass()
            $("button:eq(0)").click(function(){
$("div:first").addClass("new-style");
});
//删除类 addClass()
            $("button:eq(1)").click(function(){
$("div:first").removeClass("new-style");
});
//切换 toggleClass()
            $("button:eq(2)").click(function(){
$("div:first").toggleClass("new-style");
});
      });
    </script>
</body>
</html>

 
文档来源:51CTO技术博客https://blog.51cto.com/u_15288038/3029048

页: [1]
查看完整版本: jquery 添加 删除 切换 类的练习