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]