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 相关文章推荐
JavaScript DOM 学习第五章 表单简介
Feb 19 Javascript
jQuery :nth-child前有无空格的区别分析
Jul 11 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
Mar 19 Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 Javascript
@ResponseBody 和 @RequestBody 注解的区别
Mar 08 Javascript
vue.js源代码core scedule.js学习笔记
Jul 03 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 Javascript
基于dataset的使用和图片延时加载的实现方法
Dec 11 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
vue中设置、获取、删除cookie的方法
Sep 21 Javascript
微信小程序实现预览图片功能
Oct 22 Javascript
vue两组件间值传递 $router.push实现方法
May 15 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
Laravel5.7 Eloquent ORM快速入门详解
2019/04/12 PHP
很可爱的输入框
2008/08/03 Javascript
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
jquery基础教程之数组使用详解
2014/03/10 Javascript
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
JavaScript使用cookie实现记住账号密码功能
2015/04/27 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
jQuery UI设置固定日期选择特效代码分享
2015/08/27 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
2016/11/25 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
鼠标经过出现气泡框的简单实例
2017/03/17 Javascript
js提取中文拼音首字母的封装工具类
2018/03/12 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
2019/04/11 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
python下如何查询CS反恐精英的服务器信息
2017/01/17 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
python实现可下载音乐的音乐播放器
2020/02/25 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
英国著名音像制品和图书游戏购物网站:Zavvi
2016/08/04 全球购物
美国经典刺绣和字母儿童服装特卖:Smocked Auctions
2018/07/16 全球购物
台湾母婴用品限时团购:妈咪爱
2018/08/03 全球购物
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
体育教师个人的自我评价
2014/02/16 职场文书
旅游安全协议书
2014/04/21 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
2014年调度员工作总结
2014/11/19 职场文书
先进班组事迹材料
2014/12/25 职场文书
车间质检员岗位职责
2015/04/08 职场文书
欠条范文
2015/07/03 职场文书
公司车辆管理制度
2015/08/04 职场文书