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事件冒泡传递(cancelBubble 、stopPropagation)
May 08 Javascript
最新28个很棒的jQuery 教程
May 28 Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 Javascript
原生js的RSA和AES加密解密算法
Oct 08 Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 Javascript
详解RequireJs官方使用教程
Oct 31 Javascript
async/await地狱该如何避免详解
May 10 Javascript
vue cli 3.0 搭建项目的图文教程
May 17 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 Javascript
20多个小事例带你重温ES10新特性(小结)
Sep 29 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
PHP sprintf()函数用例解析
2011/05/18 PHP
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
PHP自定义错误用法示例
2016/09/28 PHP
PHP对象相关知识总结
2017/04/09 PHP
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
jQuery 选择同时包含两个class的元素的实现方法
2016/06/01 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
js实现延迟加载的几种方法
2017/04/24 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
Webpack中css-loader和less-loader的使用教程
2017/04/27 Javascript
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
从0到1搭建Element的后台框架的方法步骤
2019/04/10 Javascript
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
Python greenlet实现原理和使用示例
2014/09/24 Python
跟老齐学Python之编写类之二方法
2014/10/11 Python
Python实现注册、登录小程序功能
2018/09/21 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
python 如何设置守护进程
2020/10/29 Python
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
英国著名书店:Foyles
2018/12/01 全球购物
银行柜员应聘推荐信范文
2013/11/24 职场文书
爱岗敬业演讲稿
2014/05/05 职场文书
节能宣传周活动总结
2014/05/08 职场文书
数学教育专业求职信
2014/07/22 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
师德师风自查总结
2014/10/14 职场文书
营销与策划实训报告
2014/11/05 职场文书
实习单位推荐信
2015/03/27 职场文书
旅游安全责任协议书
2016/03/22 职场文书
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL
Win Server2016远程桌面如何允许多用户同时登录
2022/06/10 Servers