首页 > Web开发 > 详细

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

时间:2015-11-09 12:39:33      阅读:251      评论:0      收藏:0      [点我收藏+]

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

 

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!