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. thinkphp 5.0 模块设计

    模块设计 5.0版本对模块的功能做了灵活设计,默认采用多模块的架构,并且支持单一模块设计,所有模块的命名空间均以app作为根命名空间(可配置更改). 目录结构 标准的应用和模块目录结构如下: ├─ap ...

  2. thinkphp5.0 架构

    1.0 MVC的意义:MVC是一个设计模式,它强制性的使应用程序的输入.处理和输出分开.使用MVC应用程序被分成三个核心部件:模型(M).视图(V).控制器(C),它们各自处理自己的任务. 2.0入口 ...

  3. HDU 4557 非诚勿扰 队列、（记一次失败的SBT尝试）

    非诚勿扰 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others) [Problem De ...

  4. lang

    我的docker容器里边,运行我的java进程时环境变量LANG为空导致乱码,重启java进程不为空显示正常:没有地方显式的设置过LANG,没找到/etc/(environment,profile,l ...

  5. ural1521 War Games 2

    War Games 2 Time limit: 1.0 secondMemory limit: 64 MB Background During the latest war games (this s ...

  6. Java中的局部内部类

    package Smoke; public class Inner { private int num = 3; class Limian{ public void show(){ //内部类可以访问 ...

  7. Xcode7 免证书真机测试

    Xcode很早就有个免证书测试,今天我自己也测试了一把,还是挺好用的,接下来,我就说一下我的大体过程: 注意:一定要让你的真机设备的系统版本和app的系统版本想对应,如果不对应就会出现一个很常见的问题 ...

  8. tooltip 鼠标移动上去出现图片或文字与title大同小异

    代码如下: <script type="text/javascript" src="jquery-1.3.2.min.js"></script ...

  9. CodeForces 652A Gabriel and Caterpillar

    简单模拟. #include<cstdio> #include<cstring> #include<cmath> #include<algorithm> ...

  10. Victor 串口 VCL 控件 - 简单实用, 功能强大的 C++ Builder 串口控件!

    源:Victor 串口 VCL 控件 - 简单实用, 功能强大的 C++ Builder 串口控件! 2014年02月06日发布控件的重要更新版本: Victor 串口控件 1.5.0.2 版本 (包 ...