jQuery addClass removeClass toggleClass方法概述
通过动态改变类名(class),可以让其修改元素呈现出不同的效果。在HTML结构中里,多个class以空格分隔,当一个节点(或称为一个标签)含有多个class时,DOM元素响应的className属性获取的不是class名称的数组,而是一个含有空格的字符串,这就使得多class操作变得很麻烦。同样的jQuery开发者也考虑到这种情况,增加了一个.addClass()方法,用于动态增加class类名
.addClass( className )方法
- .addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名
- .addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名
注意事项:
.addClass()方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上
.removeClass( )方法
- .removeClass( [className ] ):每个匹配元素移除的一个或多个用空格隔开的样式名
- .removeClass( function(index, class) ) : 一个函数,返回一个或多个将要被移除的样式名
注意事项
如果一个样式类名作为一个参数,只有这样式类会被从匹配的元素集合中删除 。 如果没有样式名作为参数,那么所有的样式类将被移除
.toggleClass( )方法:在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即:如果存在(不存在)就删除(添加)一个类
- .toggleClass( className ):在匹配的元素集合中的每个元素上用来切换的一个或多个(用空格隔开)样式类名
- .toggleClass( className, switch ):一个布尔值,用于判断样式是否应该被添加或移除
- .toggleClass( [switch ] ):一个用来判断样式类添加还是移除的 布尔值
- .toggleClass( function(index, class, switch) [, switch ] ):用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数
注意事项:
toggleClass是一个互斥的逻辑,也就是通过判断对应的元素上是否存在指定的Class名,如果有就删除,如果没有就增加
toggleClass会保留原有的Class名后新增,通过空格隔开
jQuery addClass removeClass toggleClass方法概述的更多相关文章
- jQuery addClass removeClass toggleClass hasClass is(.class)用法
jQuery addClass removeClass toggleClass hasClass is(.class)用法 <%@ page language="java" ...
- .addClass(),.removeClass(),.toggleClass()的区别
.addClass("className")方法是用来给指定元素增加类名,也就是说给指定的元素追加样式: 可以同时添加多个类名,空格符隔开 $("selector&quo ...
- html5的classList属性介绍和原生js实现jQuery的addClass,removeClass,hasClass方法
其实html5已经扩展了class操作的相关API,其中classList属性就以及实现了class的增删和判断. classList属性的方法有: add(value) 添加类名,如果有则不添加 c ...
- addClass, removeClass, toggleClass(从jquery中抠出来)
<div id="d3" class="cur"></div> var mylibs = (function(){ var rtrim ...
- Jquery重新学习之三[属性addClass(),removeClass(),toggleClass()]
1:属性.addClass(class|fn)及.removeClass(class|fn) 1.1 .addClass(class) 参数class一个或多个要添加到元素中的CSS类名,请用空格分开 ...
- class 添加样式,删,开关 【选择】addClass,removeClass,toggleClass
<1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>< ...
- class 添加样式,删除,开关 【选择】addClass,removeClass,toggleClass
<1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>< ...
- 原生JS实现addClass,removeClass,toggleClass
jQuery操作class的方式非常强大,但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery. 在此写了一个利用原生js来实现对dom元素class的操作方法 1.addCl ...
- 原声js实现addClass removeClass toggleClass效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- Redhat enterpise6 安装unix2dos/dos2unix
初用unix2dos,在rhel6 上 用yum install unix2dos , 提示源不可用, 那好吧, 就去rpm包网:http://rpm.pbone.net/ 下载了一个unix2dos ...
- Ubuntu grub2的启动配置文件grub.cfg,为了修改另人生厌的时间
文章转自http://hi.baidu.com/detax/blog/item/90f18b54a8ef5253d00906e4.html 升级到Ubuntu 9.10后,就要接触grub2了,它和以 ...
- python set dict tuple and list
1 set 1.1 不变集合,frozenset 也就是说,集合中的元素不能删除,也不能增加. 1.2 两个集合之间的关系 isdisjoint()函数. 2 各个数据结构的不同显示 2.1 set ...
- [10.27_P2] 统计损失 (简单树形DP)
树形DP 简单题 Description 给定一棵树,每个节点有一个值.对于一条路径,它的值为路径上所有点的值的乘积.求出树上所有路径的值的和. 注意:单个点也算一条路径. Input 第 1 行一个 ...
- 关于mysqld_safe
昨天花了一天时间写了mysql的源码安装,比较蛋疼.其中对于mysqld_safe尤其不理解,因为使用apt-get安装几乎中间不需要什么配置,只需要service mysql start即可,但是源 ...
- [TJOI2016&HEOI2016] 排序
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=4552 [算法] 首先 , 二分答案x , 将比x小的数看作1,比x大的数看作0 然后 ...
- linux下libpcap抓包分析
一.首先下载libpcap包http://www.tcpdump.org/#latest-release 然后安装,安装完成后进入安装根目录的tests文件夹,编译运行findalldevstest. ...
- 洛谷 P1315 观光公交 —— 贪心
题目:https://www.luogu.org/problemnew/show/P1315 问题是想不明白改动一条边会对后面造成怎样的影响: 实际上影响的会是一段,当某个车站出发时间受其来人牵制时, ...
- vertical-align 和line-height 以及baseline的解析
line-height是相对于font-size来计算的,vertical-align的百分比值是相对于line-height来计算的,vertical-align的默认是baseline; demo ...
- FB 对话框接口
官方文档: https://developers.facebook.com/docs/dialogs FB的对话框主要是调用 FB.ui(); 方法. 有问题上官网看文档是最好的. 1. send D ...