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 相关文章推荐
基于Jquery的简单图片切换效果
Jan 06 Javascript
JS实现超炫网页烟花动画效果的方法
Mar 02 Javascript
JavaScript实现点击自动选择TextArea文本的方法
Jul 02 Javascript
每天一篇javascript学习小结(Date对象)
Nov 13 Javascript
JS实现Select的option上下移动的方法
Mar 01 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
js无提示关闭浏览器窗口的两种方法分析
Nov 06 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
Feb 27 Javascript
基于pako.js实现gzip的压缩和解压功能示例
Jun 13 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
vuejs使用递归组件实现树形目录的方法
Sep 30 Javascript
JS实现的贪吃蛇游戏案例详解
May 01 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
社区(php&&mysql)六
2006/10/09 PHP
.htaccess文件保护实例讲解
2011/02/06 PHP
PHP设计模式之装饰者模式
2012/02/29 PHP
php的闭包(Closure)匿名函数详解
2015/02/22 PHP
PHP数组访问常用方法解析
2020/09/05 PHP
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
node.js中的path.basename方法使用说明
2014/12/09 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
浅谈javascript 函数属性和方法
2015/01/21 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
Javascript实现的简单右键菜单类
2015/09/23 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
2016/01/06 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
基于js中的原型、继承的一些想法
2016/08/10 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
js数组去重的方法总结
2019/01/18 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
elementUi vue el-radio 监听选中变化的实例代码
2019/06/28 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
实例讲解Python中SocketServer模块处理网络请求的用法
2016/06/28 Python
python计算日期之间的放假日期
2018/06/05 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
使用django实现一个代码发布系统
2019/07/18 Python
Python使用configparser库读取配置文件
2020/02/22 Python
python能在浏览器能运行吗
2020/06/17 Python
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
微软加拿大官方网站:Microsoft Canada
2019/04/28 全球购物
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
Python面试题集
2012/03/08 面试题
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
中学生思想品德评语
2014/12/31 职场文书
学校中层领导培训心得体会
2016/01/11 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书