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 相关文章推荐
广告切换效果(缓动切换)
May 27 Javascript
js replace替换所有匹配的字符串
Feb 13 Javascript
javascript正则表达式定义(语法)总结
Jan 08 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 Javascript
CSS3+JavaScript实现翻页幻灯片效果
Jun 28 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
详解如何使用webpack打包JS
Jun 21 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
JavaScript插入排序算法原理与实现方法示例
Aug 06 Javascript
JavaScript监听键盘事件代码实现
Jun 03 Javascript
原生JS实现飞机大战小游戏
Jun 09 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
preg_match_all使用心得分享
2014/01/31 PHP
一个简单的php路由类
2016/05/29 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
JavaScript学习历程和心得小结
2010/08/16 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
2011/11/30 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
js函数调用的方式
2014/05/06 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
2017/06/04 Javascript
ajax前台后台跨域请求处理方式
2018/02/08 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
Python fileinput模块使用介绍
2014/11/30 Python
python安装numpy&安装matplotlib& scipy的教程
2017/11/02 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
Python3 文章标题关键字提取的例子
2019/08/26 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
linux面试题参考答案(5)
2014/09/01 面试题
求职个人评价范文
2014/04/09 职场文书
团代会宣传工作方案
2014/05/08 职场文书
好习惯伴我成长演讲稿
2014/05/21 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
介绍信怎么写
2015/05/05 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
入党自传范文2015
2015/06/26 职场文书