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 !!的作用
Dec 04 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
Aug 06 Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 Javascript
使用Promise链式调用解决多个异步回调的问题
Jan 15 Javascript
用Webpack构建Vue项目的实践
Nov 07 Javascript
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 Javascript
JavaScript事件对象深入详解
Dec 30 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 Javascript
js实现select下拉框选择
Jan 11 Javascript
JavaScript对象字面量和构造函数原理与用法详解
Apr 18 Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 Javascript
实现vuex原理的示例
Oct 21 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系统命令函数使用分析
2013/07/05 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
onpropertypchange
2006/07/01 Javascript
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
Jquery 表单验证类介绍与实例
2013/06/09 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
Bootstrap CSS组件之导航条(navbar)
2016/12/17 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
Element Input组件分析小结
2018/10/11 Javascript
vue-router传递参数的几种方式实例详解
2018/11/13 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
Python中拆分字符串的操作方法
2019/07/23 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
解决Python3下map函数的显示问题
2019/12/04 Python
python垃圾回收机制(GC)原理解析
2019/12/30 Python
python实现PCA降维的示例详解
2020/02/24 Python
python redis存入字典序列化存储教程
2020/07/16 Python
网络技术专业推荐信
2014/02/20 职场文书
国贸专业的职业规划书
2014/03/15 职场文书
医院科室评语
2015/01/04 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
CSS3实现模糊背景的三种效果示例
2021/03/30 HTML / CSS
简单了解 MySQL 中相关的锁
2021/05/25 MySQL
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python