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动态改变表格单元格内容的方法
Mar 30 Javascript
JavaScript中定义类的方式详解
Jan 07 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 Javascript
url传递的参数值中包含&时,url自动截断问题的解决方法
Aug 02 Javascript
在微信小程序中使用图表的方法示例
Apr 25 Javascript
一文快速了解JQuery中的AJAX
May 31 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
React 实现车牌键盘的示例代码
Dec 20 Javascript
vue接口请求加密实例
Aug 11 Javascript
element中table高度自适应的实现
Oct 21 Javascript
javascript实现京东快递单号的查询效果
Nov 30 Javascript
JavaScript实现页面高亮操作提示和蒙板
Jan 04 Javascript
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
MYSQL环境变量设置方法
2007/01/15 PHP
用PHP的超级变量$_POST获取HTML表单(HTML Form) 数据
2011/05/07 PHP
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
php常用数组函数实例小结
2016/12/29 PHP
JavaScript 权威指南(第四版) 读书笔记
2009/08/11 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
javaScript复制功能调用实现方案
2012/12/13 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
原生js仿jquery animate动画效果
2016/07/13 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
2018/10/28 Javascript
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
在vue中使用image-webpack-loader实例
2020/11/12 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
python求crc32值的方法
2014/10/05 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
python 异步async库的使用说明
2020/05/04 Python
四种会话跟踪技术
2015/05/20 面试题
安全生产中长期规划实施方案
2014/02/21 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
2014党员批评和自我批评思想汇报
2014/09/21 职场文书
项目备案申请报告
2015/05/15 职场文书
军训新闻稿范文
2015/07/17 职场文书
2015年三好一满意工作总结
2015/07/24 职场文书
售房协议书范本
2015/08/11 职场文书
源码解读Spring-Integration执行过程
2021/06/11 Java/Android
js基础语法与maven项目配置教程案例
2021/07/15 Javascript