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 相关文章推荐
js时间比较示例分享(日期比较)
Mar 05 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
Feb 24 Javascript
jquery实现点击变换导航样式的方法
Aug 31 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
Feb 19 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 Javascript
three.js实现3D影院的原理的代码分析
Dec 18 Javascript
JavaScript实现页面中录音功能的方法
Jun 04 Javascript
layui的数据表格+springmvc实现搜索功能的例子
Sep 28 Javascript
原生js实现随机点餐效果
Dec 10 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 Javascript
全面解析Vue中的$nextTick
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
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
PHP html_entity_decode()函数讲解
2019/02/25 PHP
理解Javascript_13_执行模型详解
2010/10/20 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
2011/12/21 Javascript
在js文件中写el表达式取不到值的原因及解决方法
2013/12/23 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
js基于canvas实现时钟组件
2021/02/07 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
Python 随机生成中文验证码的实例代码
2013/03/20 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
python实现机器人行走效果
2018/01/29 Python
python写日志文件操作类与应用示例
2019/07/01 Python
python3 打印输出字典中特定的某个key的方法示例
2019/07/06 Python
Joules美国官网:出色的英国风格
2017/10/30 全球购物
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
酒店led欢迎词
2014/01/09 职场文书
金融行业职业生涯规划范文
2014/01/17 职场文书
一年级班主任感言
2014/03/08 职场文书
工厂采购员岗位职责
2014/04/08 职场文书
预防传染病方案
2014/06/14 职场文书
行政答辩状范文
2015/05/21 职场文书