jQuery 添加/移除CSS类实现代码


Posted in Javascript onFebruary 11, 2010

其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的;而jQuery里提供三种方法来实现这个功能,虽然它们和传统方法的思想相通,但是却节省了许多代码。还是那句话 - “jQuery让JavaScript代码变得简洁!”

1. addClass() - 添加CSS类

$("#target").addClass("newClass"); 
//#target 指的是需要添加样式的元素的ID 
//newClass 指的是CSS类的名称

2. removeClass() - 移除CSS类
$("#target").removeClass("oldClass"); 
//#target 指的是需要移除CSS类的元素的ID 
//oldClass 指的是CSS类的名称

3. toggleClass() - 添加或者移除CSS类:如果CSS类已经存在,它将被移除;相反,如果CSS类不存在,它将被加上。
$("#target").toggleClass("newClass") 
//如果ID为“target”的元素已经定义了CSS样式,它将被移除; 
//反之,CSS类”newClass“将被赋给该ID。

4.hasClass("className") - 判断是否已经存在CSS

在实际运用中,我们常常先定义好这些CSS类,然后通过Javascript事件触发(比如点击某个链接)来改变页面元素样式。此外,jQuery还提供一种方法 hasClass("className"),用来判断某个元素是否已经被赋予某个CSS类。
Javascript 相关文章推荐
Javascript技巧之不要用for in语句对数组进行遍历
Oct 20 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
基于jquery编写分页插件
Mar 07 Javascript
js实现打地鼠小游戏
Feb 13 Javascript
webpack 模块热替换原理
Apr 09 Javascript
Vue项目总结之webpack常规打包优化方案
Jun 06 Javascript
jQuery zTree插件快速实现目录树
Aug 16 jQuery
vue-froala-wysiwyg 富文本编辑器功能
Sep 19 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 Javascript
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
JavaScript Event学习补遗 addEventSimple
Feb 11 #Javascript
JavaScript 输入框内容格式验证代码
Feb 11 #Javascript
Extjs学习过程中新手容易碰到的低级错误积累
Feb 11 #Javascript
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 #Javascript
一段实现页面上的图片延时加载的js代码
Feb 11 #Javascript
JavaScript Event学习第十一章 按键的检测
Feb 10 #Javascript
JavaScript Event学习第十章 一些可替换的事件对
Feb 10 #Javascript
You might like
php4的session功能评述(三)
2006/10/09 PHP
解析使用substr截取UTF-8中文字符串出现乱码的问题
2013/06/20 PHP
php sybase_fetch_array使用方法
2014/04/15 PHP
基于PHP实现简单的随机抽奖小程序
2016/01/05 PHP
javascript函数库-集合框架
2007/04/27 Javascript
面向对象的编程思想在javascript中的运用上部
2009/11/20 Javascript
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
js操作label给label赋值及取label的值示例
2013/11/07 Javascript
jQuery简单实现提交数据出现loading进度条的方法
2016/03/29 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
微信小程序 for 循环详解
2016/10/09 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
nodejs中安装ghost出错的原因及解决方法
2017/10/23 NodeJs
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
Canvas实现微信红包照片效果
2018/08/21 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
Python的另外几种语言实现
2015/01/29 Python
Python中的with...as用法介绍
2015/05/28 Python
RC4文件加密的python实现方法
2015/06/30 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
2019/04/03 Python
pytorch打印网络结构的实例
2019/08/19 Python
html5中audio支持音频格式的解决方法
2018/08/24 HTML / CSS
荷兰本土平价百货:HEMA
2017/10/23 全球购物
保加利亚服装和鞋类购物网站:Bibloo.bg
2020/11/08 全球购物
歌颂祖国的演讲稿
2014/05/04 职场文书
北京申奥口号
2014/06/19 职场文书
2014年度工作总结报告
2014/12/15 职场文书
营销计划书范文
2015/01/17 职场文书
餐厅开业活动方案
2019/07/08 职场文书
HTML5 语义化标签(移动端必备)
2021/08/23 HTML / CSS
Python加密技术之RSA加密解密的实现
2022/04/08 Python
nginx七层负载均衡配置详解
2022/07/15 Servers