类操作是什么意思?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的类操作教程”的相关内容,希望上面的介绍能够给大家带来帮助。想要获取web前端学习路线和学习资料,欢迎关注小千,后期为大家分享更多内容。
本文来自千锋教育,转载请注明出处。
类操作是什么意思?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)和析构函数. 析构函数的作用:对象消亡时,自动被调用,用来释放对象占用的空间. ...
最新文章
- redhat5.5安装oracle10g出现问题
- go语言的main函数
- cordova环境部署
- LINUX下动态链接库的使用-dlopen dlsym dlclose dlerror
- 退化函数及多种复原方法【Matlab】
- java icache_java手写多级缓存
- linux中级之防火墙的数据传输过程
- Git学习总结(1)——简介与基本操作
- 【速来报名】中国影响力巨大的开源峰会即将召开
- 转:短小强悍的JavaScript异步调用库
- Python入门者必须吃透嚼烂的69个内置函数一(1含案例详解)
- 广电行业编码传输系统调研
- react router BrowserRoute部署后页面空白问题
- Maven父子项目的理解
- [贴图]TVB香港大部分演员照片、姓名(值得收藏)
- 咽炎引发-----喉源性咳嗽(摘)
- 得力计算机怎么把小数化成分数,判断分数能否化成有限小数的方法.ppt
- 使用python合并多个txt文件
- Summertime_cinnamons --罗马音歌词
- 自定义加载更多的Recycleview
热门文章
- winform listview 设置选中项 图片_实战PyQt5: 069-MV框架中的项视图拖放功能
- html中inline函数,开窗函数和窗口函数区别 inline函数和一般的函数有什么不同
- vue 项目引用static目录资源_vuejs-templates静态资源目录src/assets、和static/区别
- 那些年,我的数据结构课设,现在满满的回忆!(现如今身处内卷之中,已经很难出现当初那份乐趣了)
- 十大经典排序算法之插入排序及其二分优化
- LeetCode 13 罗马数字转整数
- 《数据库系统实训》实验报告——单表查询
- Easy h-index
- 安卓CheckBox实现单选
- 使用分页插件PageHelper