.addClass("className")方法是用来给指定元素增加类名,也就是说给指定的元素追加样式;

可以同时添加多个类名,空格符隔开

$("selector").addClass("className1 className2");

.removeClass("className")方法是用来给指定的元素移除类名,也就是说给指定元素移除样式;

可以同时移除多个类名,空格符隔开

$("selector").removeClass("className1 className2");

$("selector").removeClass();//这种方法将移除选择定元素的所有类名

.toggleClass("className")方法是用来给指定的元素添加或者移除类名(如果类名存在则移除,不存在则增加)

toggleClass()方法和addClass()方法一样,可以同时加多个或同时移除多个类名,不过他们之间需要用空格隔开,如:

$("selector").toggleClass("className1 className2");
//上面表达式等于
$("selector").toggleClass("className1").toggleClass("className2");

无参数时,自动删除、恢复全部className,也可以传递一个布尔值,true为恢复class,false为删除class

三者之间的关系如下:

$("selector").toggleClass("className");
//等同于
if($("selector").hasClass("className")){
    $(this).removeClass("className");
} else {
    $(this).addClass("className");
}
//也等同于
$("selector").hasClass('className') ? $("selector").removeClass('className') : $("selector").addClass('className');

  

 

.addClass(),.removeClass(),.toggleClass()的区别的更多相关文章

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

    jQuery addClass removeClass toggleClass hasClass is(.class)用法 <%@ page language="java" ...

  2. addClass, removeClass, toggleClass(从jquery中抠出来)

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

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

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

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

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

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

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

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

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

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

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

  8. jQuery addClass removeClass toggleClass方法概述

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

  9. 原生JavaScript实现的addclass,removeclass,hasclass,toggleclass,getbyclass

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. java1.8--1.8入门介绍

    在我之前的工作中,一直使用的是java6.所以即使现在java已经到了1.8,对于1.7增加的新特性我也基本没使用的.在整理一系列1.8的新特性的过程中,我也会添加上1.7增加的特性. 下面的整理可能 ...

  2. hibernate 基础

    Hibernate:是开源的ORM框架技术,对jdbc进行了非常轻量级的对象封装,处于业务逻辑层和数据库层之间,称作持久化层. 持久化层的作用:把程序生成的对象持久化到数据库,也就是保存到数据库.   ...

  3. css 块状元素与行内元素(内联元素)的理解

    块状元素: 它一般是其他元素的容器元素,可以容纳块状元素和行内元素,它默认是不会和其他元素同一行的,即相当于两个块状元素写一起是垂直布局的.最常用的是div和p 行内元素: 行内元素又称内联元素,它只 ...

  4. JavaScript算法实现排序

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. JavaSE基础篇—流程控制语句

    本章知识点分析: 流程控制语句 1.定义:流程控制语句是用来控制程序中各语句执行顺序的语句,可以把语句组合成能完成一定功能的小逻辑模块.流程控 制方式采用结构化程序设计中规定的三种基本流程机构:顺序结 ...

  6. TCP/IP参考模型

    1.简介 什么是TCP/IP参考模型? TCP/IP模型是网络通信模型的一种.网络通信模型还包括OSI,旨在使各种计算机在世界范围内互连为网络.其中有OSI为七层模型.TCP/IP为四层模型,现在大部 ...

  7. Python CRM项目三

    1.分页: 分页使用Django内置的分页模块来实现 官方的分页案例 from django.core.paginator import Paginator, EmptyPage, PageNotAn ...

  8. c# 对象 & 类

    类定义中可以使用的访问修饰符组合 none or internal 类只能在当前工程中访问 public 类可以在任何地方访问 abstract or internal abstract 类只能在当前 ...

  9. 不需要客户端插件PHP也能实现单点登录

    分析CAS原理,构建PHP单点登录 单点登录(Single Sign On , 简称 SSO )是目前比较流行的服务于企业业务整合的解决方案之一, SSO 使得在多个应用系统中,用户 只需要登录一次就 ...

  10. ABP官方文档翻译 5.3 OData集成

    OData集成 介绍 安装 安装Nuget包 设置模块依赖 配置实体 创建控制器 配置 示例 获取实体列表 Request Response 获取单个实体 Request Response 使用导航属 ...