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 10 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
Jan 09 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
Oct 22 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
JS创建事件的三种方法(实例代码)
May 12 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
Jun 24 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
Nov 03 Javascript
vue 的keep-alive缓存功能的实现
Mar 22 Javascript
详解基于Node.js的HTTP/2 Server实践
May 31 Javascript
vue 表单验证按钮事件交由父组件触发的方法
Dec 17 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 Javascript
基于JS实现视频上传显示进度条
May 12 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 mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
PHP 网页过期时间的控制代码
2009/06/29 PHP
php 连接mysql连接被重置的解决方法
2011/02/15 PHP
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
jQuery中获取Radio元素值的方法
2013/07/02 Javascript
javascript打印输出json实例
2013/11/11 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
js实现飞入星星特效代码
2014/10/17 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
Vuex入门到上手教程
2018/06/20 Javascript
React手稿之 React-Saga的详解
2018/11/12 Javascript
Vue源码学习之关于对Array的数据侦听实现
2019/04/23 Javascript
使用uni-app开发微信小程序的实现
2019/12/13 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
解决python3 网络请求路径包含中文的问题
2018/05/10 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
python 实现字符串下标的输出功能
2020/02/13 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
Python实现Word文档转换Markdown的示例
2020/12/22 Python
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
UML设计模式笔试题
2014/06/07 面试题
小组合作学习反思
2014/02/18 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
2015年销售内勤工作总结
2015/04/27 职场文书
使用Redis实现实时排行榜功能
2021/07/02 Redis