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/ ...
随机推荐
- “千千静听”滚动标题栏,非常简单!(时间器控制窗口标题栏文字,然后赋值给Application.Title)
记得曾写过类似功能,但由于对Delphi数据类型不清楚,要花不少代码去处理中文被切半而出现乱码的尴尬.后来知道只需把字符串定义成 WideString 即可解决半个中文的问题了. 实现过程:不停地剪切 ...
- CentOS 7下修改rabbitmq打开文件数量方法
以下为使用systemd的修改方法: 1.系统层修改: 通过修改sysctl配置,提高系统的打开文件数量 vim /etc/sysctl.conf,添加: fs.file-max = 65535 ...
- APP界面常用的五种颜色搭配
众所周知,每一种颜色带给用户的视觉感受也是不同的.现在人们对手机的依赖程度,就能看到手机中APP的发展前景,那今天就跟大家聊聊如何通过颜色搭配的不同来进行移动端APP界面的布局和排版设计.移动端UI界 ...
- html5--switch选择结构的优化
html5--switch选择结构的优化 问题: 使用循环语句判断月份是31天还是30天 两点提示: 使用switch多条件判断语句 合理的省略break优化代码 <!DOCTYPE html& ...
- 2. Ext中关于Ext.QuickTips.init()的使用
转自:http://www.cnblogs.com/jianglan/archive/2011/08/26/2154120.html 在extJS的例子中,大部分都在程序第一行使用了如下语句:Ext. ...
- 比Android更深远的改变世界——谷歌开源人工智能系统TensorFlow文档中文版
OpenStack中国社区编者按:开源无处不在,特别在基础创新领域,未来系统软件都会是开源为主流:2015年11月9日,Google于开源了其第二代人工智能系统Tensorflow,如同6年前同样开源 ...
- 转载:Eclipse build Android时不生成apk问题解决方法
Eclisps有时build后不生成apk.没有对Eclise做过设置调整,android工程代码也是没有问题的.反正就是莫名奇妙的遇到两次,解决方法如下: 1. 设置:Preferences -&g ...
- python 面向对象四 继承和多态
一.继承 class Animal(object): def run(self): print('Animal is running...') class Dog(Animal): def run(s ...
- 【插件开发】—— 12 GEF入门
介绍 前面也简单的介绍了一下插件开发的相关知识,下面主要就介绍一下GEF的相关使用.由于最近使用到编辑器这部分的操作,因此就跳过其他的内容,先介绍下GEF的相关知识. 前文回顾 1 插件学习篇 2 简 ...
- 小程序各种授权封装、saveImageToPhotosAlbum、chooseAddress、getUserInfo、getLocation,保存图片、获取用户信息、获取位置信息、收货地址等
代码略多,请异步 github __点击链接