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语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
JS 面向对象之神奇的prototype
Feb 26 Javascript
电子商务网站上的常用的js放大镜效果
Dec 08 Javascript
node.js不得不说的12点内容
Jul 14 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
Aug 15 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
Jun 08 Javascript
Bootstrap源码解读表单(2)
Dec 22 Javascript
windows下vue.js开发环境搭建教程
Mar 20 Javascript
利用C/C++编写node.js原生模块的方法教程
Jul 07 Javascript
RequireJS用法简单示例
Aug 20 Javascript
vue store之状态管理模式的详细介绍
Jun 13 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
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
php中如何判断一个网页请求是ajax请求还是普通请求
2013/08/10 PHP
利用php下载xls文件(自己动手写的)
2014/04/18 PHP
Destoon模板制作简明教程
2014/06/20 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
document.designMode的功能与使用方法介绍
2007/11/22 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
2015/08/12 Javascript
jQuery UI设置固定日期选择特效代码分享
2015/08/27 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
2016/10/10 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
vue-prop父组件向子组件进行传值的方法
2018/03/01 Javascript
使用layui 渲染table数据表格的实例代码
2018/08/19 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
layui table去掉右侧滑动条的实现方法
2019/09/05 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
2020/05/14 Javascript
django使用html模板减少代码代码解析
2017/12/12 Python
python 实现求解字符串集的最长公共前缀方法
2018/07/20 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
Python logging模块进行封装实现原理解析
2020/08/07 Python
Pycharm安装python库的方法
2020/11/24 Python
保安部任务及岗位职责
2014/02/25 职场文书
运动会口号8字
2014/06/07 职场文书
培训科主任岗位职责
2014/08/08 职场文书
2014年旅游局法制宣传日活动总结
2014/11/01 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers