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之编码规范 推荐
May 23 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
Jun 19 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
底部悬浮通栏可以关闭广告位的实现方法
Jun 01 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
jQuery基本选择器之标签名选择器
Sep 03 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 Javascript
vue-property-decorator用法详解
Dec 12 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
Feb 15 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 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
PHP4实际应用经验篇(1)
2006/10/09 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
解析PHP汉字转换拼音的类
2013/06/18 PHP
解析php中如何直接执行SHELL
2013/06/28 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
关于laravel5.5的定时任务详解(demo)
2019/10/23 PHP
这段js代码得节约你多少时间
2011/12/20 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
JavaScript提高网站性能优化的建议(二)
2016/07/24 Javascript
mvc中form表单提交的三种方式(推荐)
2016/08/10 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
python 文件与目录操作
2008/12/24 Python
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
整理Python中的赋值运算符
2015/05/13 Python
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
python如何读取bin文件并下发串口
2019/07/05 Python
Python字符串的修改方法实例
2019/12/19 Python
Python如何根据时间序列数据作图
2020/05/12 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
Ajxa常见问题都有哪些
2014/03/26 面试题
yy结婚证婚词
2014/01/10 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
大学毕业晚会开场白
2015/05/29 职场文书
中学图书馆工作总结
2015/08/11 职场文书
56句经典英文座右铭
2019/08/09 职场文书
Python基础之数据类型知识汇总
2021/05/18 Python
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL