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 backgroundImage控制
May 19 Javascript
javascript与asp.net(c#)互相调用方法
Dec 13 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
May 08 Javascript
JS的事件绑定深入认识
Jun 26 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
js实现新浪微博首页效果
Oct 16 Javascript
jQuery实现只允许输入数字和小数点的方法
Mar 02 Javascript
Vue.Js中的$watch()方法总结
Mar 23 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
Aug 20 Javascript
解决vue热替换失效的根本原因
Sep 19 Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 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动态生成虚拟现实VRML网页
2006/10/09 PHP
坏狼php学习 计数器实例代码
2008/06/15 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
深入理解JSON数据源格式
2014/01/10 Javascript
JQuery中使用ajax传输超大数据的解决方法
2014/07/14 Javascript
JavaScript数据类型学习笔记
2016/01/25 Javascript
解决wx.onMenuShareTimeline出现的问题
2016/08/16 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
bootstrap模态框远程示例代码分享
2017/05/22 Javascript
jQuery为某个div加入行样式
2017/06/09 jQuery
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
详解微信JS-SDK选择图片遇到的坑
2018/08/15 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
分享8个JavaScript库可更好地处理本地存储
2020/10/12 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
django 多数据库配置教程
2018/05/30 Python
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
python使用tornado实现简单爬虫
2018/07/28 Python
浅谈Pytorch torch.optim优化器个性化的使用
2020/02/20 Python
python tkinter 设置窗口大小不可缩放实例
2020/03/04 Python
Django REST framwork的权限验证实例
2020/04/02 Python
pyspark 随机森林的实现
2020/04/24 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
《天安门广场》教学反思
2014/04/23 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
知识就是力量演讲稿
2014/09/13 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书