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 IE 与 FF中兼容问题小结
Feb 18 Javascript
基于jquery ajax 用户无刷新登录方法详解
Apr 28 Javascript
Jquery实现图片预加载与延时加载的方法
Dec 22 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
javascript+html5+css3自定义弹出窗口效果
Oct 26 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 Javascript
React Navigation 使用中遇到的问题小结
May 08 Javascript
React 实现拖拽功能的示例代码
Jan 06 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
Oct 15 Javascript
JavaScript 禁止用户保存图片的实现代码
Apr 28 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 的加密函数 md5,crypt,base64_encode 等使用介绍
2012/04/09 PHP
PHP实现懒加载的方法
2015/03/07 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
jquery select(列表)的操作(取值/赋值)
2011/03/16 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
jquery时间下拉框小例子
2013/04/15 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
最好用的Bootstrap fileinput.js文件上传组件
2016/12/12 Javascript
vuejs指令详解
2017/02/07 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
vue登录路由验证的实现
2017/12/13 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
微信小程序个人中心的列表控件实现代码
2020/04/26 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
JavaScript中数组去重的5种方法
2020/07/04 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
python不带重复的全排列代码
2013/08/13 Python
Python中DJANGO简单测试实例
2015/05/11 Python
python生成式的send()方法(详解)
2017/05/08 Python
python获取酷狗音乐top500的下载地址 MP3格式
2018/04/17 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
基于Django框架的权限组件rbac实例讲解
2019/08/31 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
Hurley官方网站:扎根于海滩生活方式的全球青年文化品牌
2020/05/18 全球购物
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
一份报关员的职业规划范文
2014/01/08 职场文书
面试后感谢信
2014/02/01 职场文书
优秀管理者获奖感言
2014/02/17 职场文书
详解Java实践之抽象工厂模式
2021/06/18 Java/Android