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); }