类操作是什么意思?jQuery的类操作教程
类操作就是通过操作元素的类名进行元素样式操作，当元素样式比较复杂时，如果通过css()方法实现，需要在CSS里编写很长的代码，既不美观也不方便。而通过写一个类名，把类名加上或去掉就会显得很方便。下面通过代码演示类的添加、删除和切换。
1. 准备工作
先准备一个HTML网页，然后用jQuery代码对网页进行操作。HTML代码如下。
<style>
.current { background-color: red; }
</style>
<div>添加类名</div>
<div class="current">删除类名</div>
<div class="current">切换类名</div>
上述代码中，第2行定义current类的样式为背景色为红色，第5行和第6行定义了两个类名 为current的div元素。
2. addClass()添加类
addClass()方法向被选元素添加一个或多个类名，基本语法如下所示。
$(selector).addClass(className)
上述代码中，className表示要添加的类名，示例代码如下
<script>
$("div").click(function() {
$(this).addClass("current");
});
</script>
上述代码执行后，单击页面中的“添加类名”按钮，就会在div元素上添加current类名，背景色修改为红色。
如果添加多个类，使用空格分隔类名，示例代码如下。
$(this).addClass("current current1 …");
3. removeClass()移除类
removeClass()方法从被选元素移除一个或多个类，基本语法如下所示。
$(selector).removeClass(className)
上述代码中， className参数可以传入一个或多个类名，使用空格来分隔，如果省略该参数，表示移除所有的类名。下面通过代码演示。
<script>
$("div").click(function() {
$(this).removeClass("current");
});
</script>
上述代码执行后，单击页面中的“删除类名”按钮，在div元素上的current类名会被移除，背景色消失。
4. toggleClass()切换类
toggleClass()方法用来为元素添加或移除某个类，如果类不存在，就添加该类，如果类存在，就移除该类。基本语法如下所示。
$(selector).toggleClass(className, switch)
上述代码中，className表示添加或移除的一个或多个类名，多个类名用空格分隔；switch参数用来规定只删除类或只添加类，设为true表示添加，设为false表示移除。
下面通过代码演示toggleClass()的使用。
<script>
$("div").click(function() {
$(this).toggleClass("current");
});
</script>
上述代码执行后，单击页面中的“切换类名”按钮，当div元素上存在current类名时，则被移除，否则就添加。可以实现字体背景色的切换效果。
类操作是什么意思?jQuery的类操作教程相关推荐
- 类操作是什么意思？jQuery的类操作教程分享
类操作就是通过操作元素的类名进行元素样式操作,当元素样式比较复杂时,如果通过css()方法实现,需要在CSS里编写很长的代码,既不美观也不方便.而通过写一个类名,把类名加上或去掉就会显得很方便.下面通 ...
- 仿Jquery链式操作的xml操作类
经常需要对xml文件进行操作,参考了Jquery的链式操作后实现了xmlHelper类. 代码 using System; using System.Data; using System.Config ...
- 23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API
1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...
- 在GDI+中用Mattix类对2D矢量图形进行平移、缩放操作
在GDI+中用Mattix类对2D矢量图形进行平移.缩放操作 1. GDI+中点坐标的格式及矩阵乘法的定义 GDI+中的的点按照1行3列的格式,即(x坐标,y坐标,1),其中1为哑元坐标.变换矩 ...
- java jdbc 教程_java JDBC系列教程之JDBC类的简析与JDBC的基础操作
什么是JDBC? 概念:JAVA Database Connectivity Javas数据库连接,Java语言操作数据库接口,然后由各个数据库厂商去实现这个接口,提供数据库驱动java包,我们可以使 ...
- html5 酒店入住插件,jQuery酒店类入住日期时间范围选择器插件
t-datepicker是一款jQuery酒店类入住日期时间范围选择器插件.该jquery日期选择器提供多个配置参数和方法,可以创建响应式的.灵活的.多种主题效果的日期范围选择器.它的特点还有: 内置 ...
- php db类 应用实例,PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
本文实例讲述了PHP封装类似thinkphp连贯操作数据库Db类与简单应用.分享给大家供大家参考,具体如下: header("Content-Type:text/html;charset=u ...
- 声明一个长方形类，属性有长和宽；操作有赋值、计算长方形的周长和面积、输出信息等，要求定义构造函数（缺省值为10）和析构函数。
题目描述:声明一个长方形类,属性有长和宽:操作有赋值.计算长方形的周长和面积.输出信息等,要求定义构造函数(缺省值为10)和析构函数. 析构函数的作用:对象消亡时,自动被调用,用来释放对象占用的空间. ...
- -1-4 java io java流 常用流 分类 File类 文件 字节流 字符流 缓冲流 内存操作流 合并序列流...
File类 •文件和目录路径名的抽象表示形式 构造方法 •public File(String pathname) •public File(String parent,Stringchild) •p ...
最新文章
- 到底选择PostgreSOL还是MySQL？看这里！
- java等待欢迎界面_android welcome欢迎界面3秒后自动跳转
- ArrayList分析
- 数据分析的必备材料：学完可以解决90%以上的数据分析问题
- python群发邮箱软件下载_用python群发电子邮件
- mybatis通用mapper_全网最全Mapper解析，附实操代码帮你更好理解
- liunx常用命令0
- 单链表的归并算法思路总结
- Docker入门学习四之自己制作Docker镜像
- python学习一：基本数据类型
- 工作缺点和不足及措施_个人工作缺点和不足
- CentOS 7迁移Tencent OS 2.4 tk
- elementUI实现table表头展示上、下角标
- 借助大数据培育健康医疗产业群
- c语言栈的实现和表示
- 护眼灯显色指数多大最好?一文了解护眼灯显色指数怎么选
- rtos系统c语言,让我们来学习RTOS，自己写RTOS
- WIN10 设置或取消自动关机
- 计算机培训如何做,如何做培训课件.doc
- 游戏测试的工作(来自网络)