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 相关文章推荐
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
Nov 27 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 Javascript
jQuery制作仿腾讯web qq用户体验桌面
Aug 20 Javascript
Jquery获取元素的父容器对象示例代码
Feb 10 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 Javascript
js实现可控制左右方向的无缝滚动效果
May 29 Javascript
详解微信小程序 template添加绑定事件
Jun 23 Javascript
详解RequireJs官方使用教程
Oct 31 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 10 Javascript
WebRTC记录音视频流(web技术分享)
Feb 24 Javascript
探索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
模仿OSO的论坛(四)
2006/10/09 PHP
mysql limit查询优化分析
2008/11/12 PHP
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
php使用gzip压缩传输js和css文件的方法
2015/07/29 PHP
总结对比php中的多种序列化
2016/08/28 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
jQuery 美元符冲突的解决方法
2010/03/28 Javascript
PHP配置文件php.ini中打开错误报告的设置方法
2015/01/09 PHP
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
2016/04/01 Javascript
Javascript实现跑马灯效果的简单实例
2016/05/31 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
解析Python中while true的使用
2015/10/13 Python
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
Python实现的字典值比较功能示例
2018/01/08 Python
Django中使用celery完成异步任务的示例代码
2018/01/23 Python
对pytorch网络层结构的数组化详解
2018/12/08 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
时尚设计师手表:The Watch Cabin
2018/10/06 全球购物
公共机构节能宣传周活动总结
2014/07/09 职场文书
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers