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)用法的更多相关文章

  1. jQuery addClass removeClass toggleClass方法概述

    通过动态改变类名(class),可以让其修改元素呈现出不同的效果.在HTML结构中里,多个class以空格分隔,当一个节点(或称为一个标签)含有多个class时,DOM元素响应的className属性 ...

  2. addClass, removeClass, toggleClass（从jquery中抠出来）

    <div id="d3" class="cur"></div> var mylibs = (function(){ var rtrim ...

  3. Jquery重新学习之三[属性addClass(),removeClass(),toggleClass()]

    1:属性.addClass(class|fn)及.removeClass(class|fn) 1.1 .addClass(class) 参数class一个或多个要添加到元素中的CSS类名,请用空格分开 ...

  4. 原生JS实现addClass,removeClass,toggleClass

    jQuery操作class的方式非常强大,但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery. 在此写了一个利用原生js来实现对dom元素class的操作方法 1.addCl ...

  5. class 添加样式,删，开关 【选择】addClass,removeClass,toggleClass

    <1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>< ...

  6. class 添加样式,删除，开关 【选择】addClass,removeClass,toggleClass

    <1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>< ...

  7. .addClass(),.removeClass(),.toggleClass()的区别

    .addClass("className")方法是用来给指定元素增加类名,也就是说给指定的元素追加样式: 可以同时添加多个类名,空格符隔开 $("selector&quo ...

  8. 原声js实现addClass removeClass toggleClass效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 原生js 实现jquery addClass,removeClass

    代码如下: function hasClass(obj, cls) { let reg = new RegExp("(\\s|^)" + cls + "(\\s|$)&q ...

随机推荐

  1. PAT (Advanced Level) 1067. Sort with Swap(0,*) (25)

    只对没有归位的数进行交换. 分两种情况: 如果0在最前面,那么随便拿一个没有归位的数和0交换位置. 如果0不在最前面,那么必然可以归位一个数字,将那个数字归位. 这样模拟一下即可. #include& ...

  2. Codeforces Round #369 (Div. 2) C. Coloring Trees （DP）

    C. Coloring Trees time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...

  3. ExtJS简介--车辆调度

    http://www.cnblogs.com/gaoweipeng/archive/2009/11/11/1599969.html

  4. PAT (Advanced Level) 1004. Counting Leaves (30)

    简单DFS. #include<iostream> #include<cstring> #include<cmath> #include<algorithm& ...

  5. MongoDB 基本命令

    ./mongo  进入命令行. 1.show dbs 显示当前数据库服务器上的数据库 2.use pagedb 切换到指定数据库pagedb的上下文,可以在此上下文中管理pagedb数据库以及其中的集 ...

  6. (中等) POJ 1703 Find them, Catch them，带权并查集。

    Description The police office in Tadu City decides to say ends to the chaos, as launch actions to ro ...

  7. LWIP_STM32_ENC28J60_NETCONN_TCP_SERVICER（5）

    前面说了TCP客户端通讯,这一篇来说说单片机作为服务器的通讯方法 tcp客户端和服务器的链接做大的不同在于服务器是不需要主动链接谁的,他只需要绑定在自己得一个特定的端口之上,等别人来连接就好了,先创建 ...

  8. Delphi 中Format的字符串格式化使用说明(转)

    源:Delphi 中Format的字符串格式化使用说明(转) 一.Format函数的用法 Format是一个很常用,却又似乎很烦的方法,本人试图对这个方法的帮助进行一些翻译,让它有一个完整的概貌,以供 ...

  9. HDU 5631 Rikka with Graph

    如果原图不连通,直接输出0. 如果原图连通,删除X条边之后要保证新图连通,再看数据是n+1条边-->因此,最多只能删去两条边. 因为n=100,可以枚举进行验证,枚举删去每一条边是否连通,枚举删 ...

  10. 由浅入深Mysql优化

    选Mysql优化作为我的第一篇博文,实在是因为这个东西很有意思,也是能体现后端开发人员设计细节及逻辑分析的一个知识点. 那么来吧: 作为Mysql优化,很多人大概能跟着感觉说出如下   :  (1)常 ...