.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. Django 发送邮件

    问题: 对于一些错误信息或用户注册账号的时候,需要给用户发送邮件进行验证. 以用户注册发邮件为例子,用户向后端提起注册,后端收到用户邮箱,对邮箱格式进行验证,然后发送邮件,邮件内容中包括邮件标题.邮件 ...

  2. input标签的美化

    css input checkbox和radio样式美化:http://www.haorooms.com/post/css_mh_ck_radio 自定义 css checkbox 样式  :http ...

  3. JavaScript this浅析

    在做聊天室的过程中,我遇到了一个小问题,在javascrip中,有没有和c语言中的静态变量类似的对象呢? 答案就在闭包之中. 而说到闭包,又得说说那个我视之如地雷的this.this搞明白了,闭包这东 ...

  4. How do I copy SQL Azure database to my local development server?(如何将Azure 中的数据库备份到本地)

    Now you can use the SQL Server Managerment Studio to do this: Connect to the SQL Azure database. 通过 ...

  5. Java使用Openoffice将word、ppt转换为PDF

    最近项目中要实现WORD的文件预览功能,我们可以通过将WORD转换成PDF或者HTML,然后通过浏览器预览. OpenOffice OpenOffice.org 是一套跨平台的办公室软件套件,能在 W ...

  6. oralce plsql案例练习

    以下plsql程序用的scott用户的dept,emp表. 案例1 --查询80,81,82,87年员工入职人数 set serveroutput on declare cursor cemp is ...

  7. mongodb监控常用方法

    列举mongodb监控的常用命令 1.监控统计 mongostat 可用于查看当前QPS/内存使用/连接数,以及多个shard的压力分布 命令参考 ./mongostat --port 27071 - ...

  8. Java基础系列--Executor框架(一)

    文章来源:http://www.cnblogs.com/V1haoge/p/8393618.html 一.Executor框架介绍 Executor框架是JDK1.5之后出现的,位于juc包中,是并发 ...

  9. JSP自定义标签就是如此简单

    tags: JSP 为什么要用到简单标签? 上一篇博客中我已经讲解了传统标签,想要开发自定义标签,大多数情况下都要重写doStartTag(),doAfterBody()和doEndTag()方法,并 ...

  10. MVC思想概述

    一. 传统Model1和Model2 Model1:整个web应用几乎全部用JSP页面组成,JSP页面接收处理客户端请求,对请求处理后直接作出响应.用少量的javaBean来处理数据库链接,数据库访问 ...