jquery 如何动态添加、删除class样式方法介绍


Posted in Javascript onNovember 07, 2012

取与设置样式 获取class和设置class都可以使用attr()方法来完成。例如使用attr()方法来获取p元素的class,JQuery代码如下:

var p_class = $("p").attr("class"); //获取p元素的class 
[html] 
使用attr()方法来设置p元素的class,JQuery代码如下: 
[code] 
1 $("p").attr("'class", "high"); //设置p元素的class为 "high"

大多数情况下,它是将原来的class替换为新的class,而不是在原来的基础上追加新的class。
追加样式 什么是追加class呢?假如p元素原本的class为myClass,那么追加一个名叫high的class后,class属性变为 “myClass high”,即myClass和high两种样式的叠加。JQuery提供了专门的addClass()方法来追加样式。为了使例子更容易理解,首先在 style标签里添加另一组样式:
1 .high{ color:red; } 
2 .another{ font-style:italic; color:blue; } 
后在网页中添加一个“追加class类”的按钮,按钮的事件代码如下: 
1 $("#btn_3").click(function(){ 
2 $("#nm_p").addClass("another"); // 追加样式 
3 });

后当单击“追加class类”按钮时,p元素样式就会变为斜体,而先前的红色字体也会变为蓝色。此时p元素同时拥有两个class值,即"high"和"another"。在CSS中有以下两条规定。
1.如果给一个元素添加了多个class值,那么就相当于合并了它们的样式。 2.如果有不同的class设定了同一样式属性,则后者覆盖前者。 在上例中,相当于给p元素添加了如下样式:
1 color : red; /* 字体颜色设置红色*/ 
2 font-style:italic; 
3 color:blue;

以上的样式中,存在两个“color”属性,而后面的“color”属性会覆盖前面的“color”属性,因此最终的“color”属性的值为“blue”,而不是“red”。
移除样式 如果用户单击某个按钮时,要删除class的某个值,那么可以使用与addClass()方法相反的removeClass()方法来完成,它的 作用是从匹配的元素中删除全部或者指定的class。例如可以使用如下的JQuery代码来删除p元素中值为“high”的class:
1 $("p").removeClass("high"); //移除p元素中值为"high"的class 
果要把p元素的两个class都删除,就要使用两次removeClass()方法,代码如下: 
1 $("p").removeClass("high").removeClass("another"); 
Query提供了更简单的方法。可以以空格的方式删除多个class名,代码如下: 
1 $("p").removeClass("high another"); 
外,还可以利用removeClass()方法的一个特性来完成同样的效果。当它不带参数时,就会将class的值全部删除,JQuery代码如下: 
1 $("p").removeClass(); //移除p元素的所有class 
换样式 JQuery中有一个方法toggle(),JQuery代码如下: 
1 toggleBtn.toggle(function(){ 
2 //元素显示 代码③ 
3 }, function(){ 
4 //元素隐藏 代码④ 
5 })

oggle()方法此处的作用是交替执行代码③和代码④两个函数,如果元素原来是显示的,则隐藏它:如果元素原来是隐藏的,则显示它。此时,toggle()方法主要是控制行为上的重复切换。
另外JQuery还提供了一个toggleClass()方法控制样式上的重复切换。如果类名存在则删除它,如果类名不存在则添加它。例如对p元素进行toggleClass()方法操作。
1 $("p").toggleClass("another"); //重复切换类名“another”

不断单击“切换样式”按钮时,p元素的class的值就会在“myClass”和“myClass another”之间重复切换。
判断是否含有某个样式 hasClass()可以用来判断元素中是甭含有某个class,如果有,则返回true,否则返回false。例如可以使用下面的代码来判断p元素中是否含有“another”的class:
1 $("p").hasClass("another");

个方法是为了增强代码可读性面产生的。在JQuery内部实际上是调用了is()方法来完成这个功能的.该方法等价于如下代码:
view sourceprint? 1 $("p").is(".another"); //is("."+class);
Javascript 相关文章推荐
总结一些js自定义的函数
Aug 05 Javascript
打开超链需要“确认”对话框的方法
Mar 08 Javascript
javascript实现二分查找法实现代码
Nov 12 Javascript
高效率JavaScript编写技巧整理
Aug 23 Javascript
Javascript this 关键字 详解
Oct 22 Javascript
PHP守护进程实例
Mar 06 Javascript
Bootstrap的图片轮播示例代码
Aug 31 Javascript
实例讲解JavaScript中instanceof运算符的用法
Jun 08 Javascript
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
Dec 02 Javascript
JavaScript中的this/call/apply/bind的使用及区别
Mar 06 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
探索Emberjs制作一个简单的Todo应用
Nov 07 #Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
Nov 07 #Javascript
seajs1.3.0源码解析之module依赖有序加载
Nov 07 #Javascript
Javascript引用指针使用介绍
Nov 07 #Javascript
JavaScript在多浏览器下for循环的使用方法
Nov 07 #Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
Nov 07 #Javascript
JS正则中的RegExp对象对象
Nov 07 #Javascript
You might like
德劲1103的维修打理经验
2021/03/02 无线电
图象函数中的中文显示
2006/10/09 PHP
一些关于PHP的知识
2006/11/17 PHP
ThinkPHP中Session用法详解
2014/11/29 PHP
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
javascript 弹出层组件(升级版)
2011/05/12 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
2011/09/19 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
javascript实现显示和隐藏div方法汇总
2015/08/14 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
AngularJS中一般函数参数传递用法分析
2016/11/22 Javascript
详解javascript获取url信息的常见方法
2016/12/19 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
探索Vue高阶组件的使用
2018/01/08 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
Python 错误和异常小结
2013/10/09 Python
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
python 函数传参之传值还是传引用的分析
2017/09/07 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
python函数的作用域及关键字详解
2019/08/20 Python
Python shelve模块实现解析
2019/08/28 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
python 哈希表实现简单python字典代码实例
2019/09/27 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
Giglio俄罗斯奢侈品购物网:男士、女士、儿童高级时装
2018/07/27 全球购物
大学生活自我评价
2014/04/09 职场文书
2014学校领导四风对照检查材料思想汇报
2014/09/23 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android