jQuery addClass removeClass toggleClass hasClass is(.class)用法
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>b index</title>
<link rel='stylesheet' type="text/css" href='b/css/bootstrap.css'>
<style type="text/css">
.s1{
width: 100px;
height: 100px;
background-color: pink;
}
.s2{
width: 50px;
height: 50px;
background-color: green;
}
</style>
</head>
<body style="margin:150px;">
<div id="div001">div001</div>
<div id="div002">div002</div>
<div id="div003">div003</div>
<div>
<button id="btn001">click me to get btn001 class </button>
<button id="btn002">click me to add class s1 </button>
<button id="btn003">click me to add class s1 s2 </button>
<button id="btn004">click me to remove class </button>
<button id="btn005">click me to remove class s1 </button>
<button id="btn006">click me to toggleClass s1 </button>
<button id="btn007">click me to hasClass s1 </button>
</div>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="b/js/bootstrap.js"></script>
<script type="text/javascript" src="js/index034.js"></script>
</body>
</html>
$(function() {
$('#btn001').click(btn001Click);
$('#btn002').click(btn002Click);
$('#btn003').click(btn003Click);
$('#btn004').click(btn004Click);
$('#btn005').click(btn005Click);
$('#btn006').click(btn006Click);
$('#btn007').click(btn007Click);
});
function btn001Click() {
var string = $('#div001').attr('class');
console.log(string);
}
function btn002Click() {
$('#div001').addClass('s1');
}
function btn003Click() {
// 多个空格会被变为一个；
$('#div001').addClass('s1 s2');
}
function btn004Click() {
// 如果有了class，removeClass之后，还是有class属性的，attr('class')得到的会是空字符串；
$('#div001').removeClass();
}
function btn005Click() {
// bt2-->bt3 -->bt4-->bt2
// s1 -->s1 s2 -->s2 --> s2 s1
// pink->green -->green->green
// 反复折腾之后s2 s1显示的是green的，不是s1的pink；
$('#div001').removeClass('s1');
}
function btn006Click() {
// 反复折腾之后s2 s1显示的是green的，不是s1的pingk；
$('#div001').toggleClass('s1');
}
function btn007Click() {
// 反复折腾之后，虽然s1不生效，但是还是能够判断出来有这个类；
var string=$('#div001').hasClass('s1');
console.log(string);
var str2 = $('#div001').is('.s1');
console.log(str2);
}