jQuery替换类样式怎样实现?教你两种方法
Admin 2022-01-18 群英技术资讯 1334 次浏览
这篇文章我们来了解jQuery中实现替换类样式的方法,这里介绍两种方法,分别是addClass()方法和attr()方法,具体怎样实现呢?下文代码介绍的很详细,有需要的朋友可以参考,接下来就跟随小编来一起学习一下吧!
本教程操作环境:windows7系统、jquery1.10.2版本、Dell G3电脑。
jquery替换类样式
方法1:使用removeClass()和addClass()方法
使用removeClass()方法移除旧的类样式,使用addClass()方法添加新的类样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/jquery-1.10.2.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").removeClass("old-class").addClass("new-class") ; }); }); </script> <style type="text/css"> .old-class{ border: 1px solid red; background-color: #FFC0CB; } .new-class{ border: 2px solid green; background-color: #55aa7f; color: white; } </style> </head> <body> <p class="old-class">hello,测试文字</p> <button>替换类样式</button> </body> </html>
方法2:使用attr()
使用attr()方法修改class属性,直接替换为新的class类
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/jquery-1.10.2.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").attr("class","new-class"); }); }); </script> <style type="text/css"> .old-class{ border: 1px solid red; background-color: #FFC0CB; } .new-class{ border: 2px solid green; background-color: #55aa7f; color: white; } </style> </head> <body> <p class="old-class">hello,测试文字</p> <button>替换类样式</button> </body> </html>
以上就是jQuery实现替换类样式的方法介绍,上述示例具有一定的参考价值,有需要的朋友可以了解看看,希望对大家学习jQuery的使用有帮助,想要了解更多可以继续浏览群英网络其他相关的文章。
文本转载自PHP中文网
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
在面向对象语言中,接口是一个很重要的概念,它是对行为的抽象。接口也叫 interface 。在 js 中没有接口这个概念,它是新增的。该如何定义呢?下面来一起学习吧
为什么说 Node.js 不是完全的单线程?如何理解?下面本篇文章就来带大家探讨一下,希望对大家有所帮助!
Vue2.x 使用 EventBus 进行组件通信,而 Vue3.x 推荐使用 mitt.js。本文就介绍一下mitt.js的具体使用方法,感兴趣的可以了解一下
本文主要介绍了JavaScript本地存储实现用户名存储案例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
RPC是服务器和服务器之间的通信,它是基于TCP协议的,传输的数据是二进制,因此数据包要相比于http要小,同时解码数据更快。node中的net模块是创建RPC服务。
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008