jQuery addClass removeClass toggleClass hasClass is(.class)用法

最新推荐文章于 2023-09-21 16:16:43 发布

清，纯一色

最新推荐文章于 2023-09-21 16:16:43 发布

阅读量104

点赞数

文章标签： javascript java ViewUI

原文链接：http://www.cnblogs.com/stono/p/4949389.html

版权

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