JQuery实现样式设置、追加、移除与切换的方法


Posted in Javascript onJune 11, 2015

本文实例讲述了JQuery实现样式设置、追加、移除与切换的方法。分享给大家供大家参考。具体分析如下:

有了JQuery,元素的样式操作会变得相当简易。下面我们来看看如何使用JQuery来实现元素样式的获取、设置、追加、删除以及其它一些操作。

获取与设置样式

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

var p_class = $("p").attr("class");
//获取p元素的class

使用attr()方法来设置p元素的class,JQuery代码如下:

$("p").attr("'class", "high");
//设置p元素的class为 "high"

在大多数情况下,它是将原来的class替换为新的class,而不是在原来的基础上追加新的class。

追加样式

什么是追加class呢?假如p元素原本的class为myClass,那么追加一个名叫high的class后,class属性变为“myClass high”,即myClass和high两种样式的叠加。JQuery提供了专门的addClass()方法来追加样式。为了使例子更容易理解,首先在style标签里添加另一组样式:

.high{ color:red; }
.another{ font-style:italic; color:blue; }

然后在网页中添加一个“追加class类”的按钮,按钮的事件代码如下:

$("#btn_3").click(function(){
  $("#nm_p").addClass("another");
  // 追加样式
});

最后当单击“追加class类”按钮时,p元素样式就会变为斜体,而先前的红色字体也会变为蓝色。此时p元素同时拥有两个class值,即"high"和"another"。在CSS中有以下两条规定。

1. 如果给一个元素添加了多个class值,那么就相当于合并了它们的样式。
2. 如果有不同的class设定了同一样式属性,则后者覆盖前者。

在上例中,相当于给p元素添加了如下样式:

color : red;  /* 字体颜色设置红色*/ 
font-style:italic; 
color:blue;

在以上的样式中,存在两个“color”属性,而后面的“color”属性会覆盖前面的“color”属性,因此最终的“color”属性的值为“blue”,而不是“red”。

移除样式

如果用户单击某个按钮时,要删除class的某个值,那么可以使用与addClass()方法相反的removeClass()方法来完成,它的作用是从匹配的元素中删除全部或者指定的class。例如可以使用如下的JQuery代码来删除p元素中值为“high”的class:

$("p").removeClass("high");
//移除p元素中值为"high"的class

如果要把p元素的两个class都删除,就要使用两次removeClass()方法,代码如下:

$("p").removeClass("high").removeClass("another");

JQuery提供了更简单的方法。可以以空格的方式删除多个class名,代码如下:

$("p").removeClass("high another");

另外,还可以利用removeClass()方法的一个特性来完成同样的效果。当它不带参数时,就会将class的值全部删除,JQuery代码如下:

$("p").removeClass();
//移除p元素的所有class

切换样式

JQuery中有一个方法toggle(),JQuery代码如下:

toggleBtn.toggle(function(){
  //元素显示 代码③
}, function(){
  //元素隐藏 代码④
})

toggle()方法此处的作用是交替执行代码③和代码④两个函数,如果元素原来是显示的,则隐藏它:如果元素原来是隐藏的,则显示它。此时,toggle()方法主要是控制行为上的重复切换。

另外JQuery还提供了一个toggleClass()方法控制样式上的重复切换。如果类名存在则删除它,如果类名不存在则添加它。例如对p元素进行toggleClass()方法操作。

$("p").toggleClass("another");
//重复切换类名“another”

当不断单击“切换样式”按钮时,p元素的class的值就会在“myClass”和“myClass another”之间重复切换。

判断是否含有某个样式

hasClass()可以用来判断元素中是甭含有某个class,如果有,则返回true,否则返回false。例如可以使用下面的代码来判断p元素中是否含有“another”的class:

$("p").hasClass("another");

这个方法是为了增强代码可读性面产生的。在JQuery内部实际上是调用了is()方法来完成这个功能的.该方法等价于如下代码:

$("p").is(".another");//is("."+class);

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
新浪的图片新闻效果
Jan 13 Javascript
通过Mootools 1.2来操纵HTML DOM元素
Sep 15 Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
Oct 22 Javascript
Jquery实现三层遍历删除功能代码
Apr 23 Javascript
纯javascript实现图片延时加载方法
Aug 21 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
ajax前台后台跨域请求处理方式
Feb 08 Javascript
详解webpack4.x之搭建前端开发环境
Mar 28 Javascript
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
解决vscode进行vue格式化,会自动补分号和双引号的问题
Oct 26 Javascript
Vue路由权限控制解析
Nov 09 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 #Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 #Javascript
JQuery节点元素属性操作方法
Jun 11 #Javascript
JQuery包裹DOM节点的方法
Jun 11 #Javascript
JQuery替换DOM节点的方法
Jun 11 #Javascript
JavaScript中实现map功能代码分享
Jun 11 #Javascript
JQuery复制DOM节点的方法
Jun 11 #Javascript
You might like
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
Javascript引用指针使用介绍
2012/11/07 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
2015/03/23 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
基于es6三点运算符的使用方法(实例讲解)
2017/10/12 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
2017/12/08 Javascript
nodejs实现套接字服务功能详解
2018/06/21 NodeJs
JavaScript中判断为整数的多种方式及保留两位小数的方法
2019/09/09 Javascript
vue setInterval 定时器失效的解决方式
2020/07/30 Javascript
Python 使用folium绘制leaflet地图的实现方法
2019/07/05 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
解决pycharm debug时界面下方不出现step等按钮及变量值的问题
2020/06/09 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
python如何爬取网页中的文字
2020/07/28 Python
python编写实现抽奖器
2020/09/10 Python
戴森英国官网:Dyson英国
2019/05/07 全球购物
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
linux系统都有哪些运行级别
2016/03/26 面试题
GWebs公司笔试题
2012/05/04 面试题
社会保险接收函
2014/01/12 职场文书
一年级班主任寄语
2014/01/19 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
初中生庆国庆演讲稿范文2014
2014/09/25 职场文书
高中班主任评语
2014/12/30 职场文书
教师求职信怎么写
2015/03/20 职场文书
钱学森观后感
2015/06/04 职场文书
2015年三好一满意工作总结
2015/07/24 职场文书
超市店长竞聘书
2015/09/15 职场文书
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android