jQuery中removeClass()方法用法实例


Posted in Javascript onJanuary 05, 2015

本文实例讲述了jQuery中removeClass()方法用法。分享给大家供大家参考。具体分析如下:

此方法从匹配元素删除一个或多个类。
根据方法参数的不同,有以下几种语法结构。

语法结构一:
方法没有参数。把匹配元素所有的类都移除。

$(selector).removeClass()

实例代码:

代码可以将div的所有css类删除。

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="author" content="https://3water.com/" />

<title>removeClass()函数-三水点靠木</title>

<style type="text/css">

.font{

  font-size:18px;

  color:yellow

}

.bg{

  background:#336;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    $("div").removeClass();

  });

})

</script>

</head>

<body>

<div class="font bg">三水点靠木欢迎您</div>

<button>点击查看效果</button>

</body>

</html>

语法结构二:

移除匹配元素中指定的类

$(selector).removeClass(class)

参数 描述
class 一个或多个要删除的CSS类名。类名之间用空格分隔。

实例代码:

实例一:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="author" content="https://3water.com/" />

<title>removeClass()函数-三水点靠木</title>

<style type="text/css">

.font{

  font-size:18px;

  color:yellow

}

.bg{background:#336;}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    $("div").removeClass("font");

  });

})

</script>

</head>

<body>

  <div class="font bg">三水点靠木欢迎您</div>

  <button>点击查看效果</button>

</body>

</html>

移除一个指定的类。

实例二:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="author" content="https://3water.com/" />

<title>removeClass()函数-三水点靠木</title>

<style type="text/css">

.font{

  font-size:18px;

  color:yellow

}

.bg{background:#336;}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    $("div").removeClass("font bg");

  });

})

</script>

</head>

<body>

<div class="font bg">三水点靠木欢迎您</div>

<button>点击查看效果</button>

</body>

</html>

移除两个CSS类,类名之间用空格分隔。

语法结构三:

$(selector).removeClass(function(index,oldclass))

函数返回要移除的类名。

参数列表:

参数 描述
function(index,oldclass) 方法返回一个或多个空格分隔的要被移除的class名。 index - 可选,接受选择器的index 位置。 oldclass - 可选,接受选择器的原有类值。

实例代码:

实例一:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="author" content="https://3water.com/" />

<title>removeClass()函数-三水点靠木</title>

<style type="text/css">

.font{

  font-size:18px;

  color:yellow

}

.bg{background:#336;}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    $("div").removeClass(function(){

      return "font"

    });

  });

})

</script>

</head>

<body>

  <div class="font bg">三水点靠木欢迎您</div>

  <button>点击查看效果</button>

</body>

</html>

用函数作为参数,函数返回一个要删除的CSS类名。

实例二:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="author" content="https://3water.com/" />

<title>removeClass()函数-三水点靠木</title>

<style type="text/css">

.font{

  font-size:18px;

  color:yellow

}

.bg{background:#336;}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    $("div").removeClass(function(){

      return "font bg"

    });

  });

})

</script>

</head>

<body>

<div class="font bg">三水点靠木欢迎您</div>

<button>点击查看效果</button>

</body>

</html>

用函数作为参数,函数返回两个要删除的CSS类名,类名之间用空格分隔。

Javascript 相关文章推荐
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
Jan 25 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
jQuery中last()方法用法实例
Jan 06 Javascript
javascript 动态样式添加的简单实现
Oct 11 Javascript
Angular使用Md5加密的解决方法
Sep 16 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 Javascript
详解Node.js异步处理的各种写法
Jun 09 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
layui加载数据显示loading加载完成loading消失的实例代码
Sep 23 Javascript
javascript刷新父页面方法汇总详解
Oct 10 Javascript
TypeScript的安装、使用、自动编译的实现
Apr 10 Javascript
jQuery中addClass()方法用法实例
Jan 05 #Javascript
js Calender控件使用详解
Jan 05 #Javascript
js的回调函数详解
Jan 05 #Javascript
判断浏览器的内核及版本号方法汇总
Jan 05 #Javascript
jQuery中removeProp()方法用法实例
Jan 05 #Javascript
jQuery中prop()方法用法实例
Jan 05 #Javascript
jQuery中removeAttr()方法用法实例
Jan 05 #Javascript
You might like
php获取当前时间的毫秒数的方法
2014/01/26 PHP
php创建多级目录的方法
2015/03/24 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
jquery datepicker参数介绍和示例
2014/04/15 Javascript
原生javascript模仿win8等待提示圆圈进度条
2014/04/24 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
vue 2.0 购物车小球抛物线的示例代码
2018/02/01 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
js实现圆形菜单选择器
2020/12/03 Javascript
Python实现类继承实例
2014/07/04 Python
详解python之配置日志的几种方式
2017/05/22 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
Python中的单继承与多继承实例分析
2018/05/10 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
Python aiohttp百万并发极限测试实例分析
2019/10/26 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
关于win10在tensorflow的安装及在pycharm中运行步骤详解
2020/03/16 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
html5视频自动横过来自适应页面且点击播放功能的实现
2020/06/03 HTML / CSS
印度领先的在线时尚商店:Koovs
2016/08/28 全球购物
美国大尺码女装零售商:TORRID
2016/10/01 全球购物
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
通信研究生自荐信
2014/02/01 职场文书
人民教师的自我评价分享
2014/02/21 职场文书
升国旗仪式主持词
2014/03/19 职场文书
员工安全生产承诺书
2014/05/22 职场文书
2014领导干部四风问题查摆思想汇报
2014/09/13 职场文书
党员批评与自我批评范文
2014/09/23 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书