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 匿名函数的理解(透彻版)
Jan 28 Javascript
JavaScript CSS修改学习第一章 查找位置
Feb 19 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
Apr 12 Javascript
jQuery读取和设定KindEditor值的方法
Nov 22 Javascript
JS获取时间的方法
Jan 21 Javascript
JS实现图片平面旋转的方法
Mar 01 Javascript
Canvas实现放射线动画效果
Feb 15 Javascript
JS基于面向对象实现的多个倒计时器功能示例
Feb 28 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
JsonProperty 的使用方法详解
Oct 11 Javascript
Vue项目打包部署到apache服务器的方法步骤
Feb 01 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
基于mysql的论坛(1)
2006/10/09 PHP
php基础教程
2015/08/26 PHP
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
Laravel使用PHPQRCODE实现生成带有LOGO的二维码图片功能示例
2017/07/07 PHP
Laravel 前端资源配置教程
2019/10/18 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
两个Javascript小tip资料
2010/11/23 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
2014/03/13 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
2015/08/10 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
详解JavaScript数组过滤相同元素的5种方法
2017/05/23 Javascript
原生js FileReader对象实现图片上传本地预览效果
2020/03/27 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
vue踩坑记录之数组定义和赋值问题
2019/03/20 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
[01:38]DOTA2 2015国际邀请赛中国区预选赛 Showopen
2015/06/01 DOTA
Python 音频生成器的实现示例
2019/12/24 Python
python中requests模拟登录的三种方式(携带cookie/session进行请求网站)
2020/11/17 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
Nice Kicks网上商店:ShopNiceKicks.com
2018/12/25 全球购物
100%羊绒:NakedCashmere
2020/08/26 全球购物
食堂员工工作职责
2013/12/18 职场文书
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
城市规划应届生推荐信
2014/09/08 职场文书
小学家长通知书评语
2014/12/31 职场文书
2015年信访工作总结
2015/04/07 职场文书
污水处理保证书
2015/05/09 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server
使用Ajax实现无刷新上传文件
2022/04/12 Javascript