jQuery中removeClass()方法用法实例

最新推荐文章于 2023-07-23 09:01:22 发布
最新推荐文章于 2023-07-23 09:01:22 发布
阅读量2.9k 收藏 1
点赞数
分类专栏： JQUERY

本文实例讲述了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="http://www.jb51.net/" />
<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="http://www.jb51.net/" />
<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="http://www.jb51.net/" />
<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="http://www.jb51.net/" />
<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="http://www.jb51.net/" />
<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类名，类名之间用空格分隔。

下面这个是addClass和removeClass混用的实例：

实例：
<script type="text/javascript" src="jquery.js"></script>
<div id="div_id" class="off">aaaa</div>
<script type="text/javascript">
<!--
if($("#div_id").hasClass("off")){
 $("#div_id").removeClass("off").addClass("on");
}else{
 $("#div_id").removeClass("on").addClass("off");
}
//-->
</script>
我这边用在生产项目中的是这样写的： 

    if (type == 3)
            {
                //alert(type);
                $("#problem").removeClass("cb-enable selected").addClass("cb-enable");
             $("#description").removeClass("cb-disable").addClass("cb-disable selected");
          
            }



蓝色水
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery使用removeClass方法删除元素指定Class的方法
10-24
主要介绍了jQuery使用removeClass方法删除元素指定Class的方法,可实现针对指定元素样式的批量删除功能,具有一定参考借鉴价值,需要的朋友可以参考下
JQuery删除移除节点元素指定id或者指定class
09-28 1万+
JQuery 下面有两个删除元素的方法： 1.$('#test')empty() 从id为test元素中删除子元素。 2.$('#test').remove() 删除被选元素及其子元素。 如果，想要从多层元素进行指定删除，可以通过一下这种方式进行： 1.$("#test").remove(".classname"); 删除test元素下面，class为classname的元...
jQuery removeClass() 方法
m0_57835615的博客
06-02 5852
removeClass()方法可以删除被选元素的一个或多个类。 1.删除单个类 语法格式： <style> .one { font-size: 14px; color: darkorange; } </style> <script src="jQuery.js"></script> <script> $(docum
jquery通过前缀removeClass
为梦想奋斗
04-16 969
通过类的前缀来删除class，可以用在只知道前缀的情况下。 <divclass="cardmb-3border-success"id="card_1">xxx</card> $("#card_1“).removeClass(function(index,className){return(className.match(/(^|\s)border-...
jQuery的属性与样式之删除样式.removeClass()
北极星小王子
05-25 1584
jQuery通过.addClass()方法可以很便捷的增加样式。如果需要样式之间的切换，同样jQuery提供了一个很方便的.removeClass()，它的作用是从匹配的元素中删除全部或者指定的class .removeClass( )方法 1、.removeClass( [className ] )：每个匹配元素移除的一个或多个用空格隔开的样式名 2、.removeClass( functi
正则 removeClass
weixin_30633507的博客
10-14 130
下面这个函数是去掉元素上指定的className，这功能用得多，看了其它人写的，都是先把className转行数组后，再删掉的，我就用正则来做吧，写这个函数的时候也碰到了问题，幸好有群里的.net和小袁帮忙，才得以完成。 function removeClass(o, name) { var oClass = o.className; var reg = "/" + name +...
jQuery中hasClass()方法用法实例
10-24
- **组合使用**：`hasClass()`常与其他jQuery方法（如`addClass()`，`removeClass()`）结合使用，以实现更复杂的DOM操作。 **4. 实例分析** 以下是一个简单的HTML和JavaScript示例，演示如何使用`hasClass()`方法...
jQuery操作cookie方法实例教程
10-25
首先，让我们了解jQuery操作cookie的基本方法。jQuery库并没有内置的cookie管理函数，但可以通过第三方插件如`jquery-cookie`来实现。在这个教程中，我们将使用`$.cookie`这个函数，它是一个模拟的API，用于简化...
无涯教程-removeClass（class）
无涯教程
07-23 539
removeClass(class)方法从匹配的元素集中删除所有或指定的类。
jquery中hasClass和removeClass
bingguang1993的博客
11-02 543
hasClass("per")方法可判断是否具有per类 removeClass("per")  移除所有的per类
jquery—addClass方法和removeClass方法
记录点滴
05-17 5879
addClass ( ): 给选中的元素添加class类名； 可以传class类名，也可以传function函数。 removeClass ( ): 把选中的元素的class类名删除； 可以传class类名，也可以传function函数。 下边我们通过一个小例子来理解下这两个方法： 需求是——有四个div，起始背景颜色都是黄色，被点击的div元素背景变绿； 效果是 方法一：把...
addClass() removeClass()
qq_26239917的博客
05-23 235
addClass(“red green”) 添加某个类名 class=“red green” removeClass() 删除所有类名 class class保留 removeClass(“red”) 删除指定类名 class=“green” $(“p”).addClass(“selected1 selected2”); 添加类名 $(...
java 通配符 删除文件_jQuery removeClass通配符
weixin_36048031的博客
02-25 157
有没有简单的方法来删除所有匹配的类，例如，color-*所以，如果我有一个元素：删除后，它会谢谢！#1楼我将它概括为一个Jquery插件，它以正则表达式作为参数。咖啡：$.fn.removeClassRegex = (regex) ->$(@).removeClass (index, classes) ->classes.split(/\s+/).filter (c) ->reg...
（十三）jQuery addClass()和removeClass()方法
北斗星的爱886的博客
07-07 685
1、addClass()方法 向被选元素添加一个或多个类 CSS： .addClass{ width: 400px; height: 100px; border: 1px solid #000; background-color: pink; font-size: 18px; } HTML： <div> 你的爱,会将我灌醉,我没有所谓,太过清醒怎么陶醉. -----好好学习，天天向上。 </div> JS： 添加class属性前：
前端提高篇(八十六)：jQuery的class属性操作addClass()与removeClass()、hasClass()、toggleClass()
安之ccy的博客
03-29 1606
1.addClass()与removeClass()基本使用 addClass：添加class；removeClass：移除class，返回this对象，支持链式操作 $('div').addClass('test').removeClass('test'); 另： 当一个方法要取值时返回要取的值；不需要返回时，返回this对象，方便链式调用 就像text()，当取文本时，返回文本；设置文本时，返回this console.log ($('div').text()); console.log ($('di
addClass、removeClass、toggleClass属性（方法）
热门推荐
weixin_44540178的博客
04-27 1万+
大家来想一想jQuery的addClass、removeClass、toggleClass操作HTMLDOM的属性（方法） 开发工具与关键技术：Visual Studio jQuey 作者：Li Mingrun 撰写时间：2019年4月26日 小时可以不懂事，大时需懂事。小时不懂事有父母，大时不懂事您还有谁… 学习完新的课程有必要回头复习一下以前的课程知识基础，巩固个人的程序...
统计预测与决策课程实验
最新发布
07-06
内含实验与完整程序
jQuery的removeClass
05-16
jQuery的removeClass()方法用于从元素的class属性中移除一个或多个类。 语法： ``` $(selector).removeClass(classname,function(index,currentclass)) ``` 参数说明： - selector：必需，选择器，用于指定需要移除class的元素。 - classname：可选，需要移除的一个或多个类名，用空格分隔。 - function(index,currentclass)：可选，一个函数，用于指定移除类的条件。该函数的参数index表示元素在集合中的位置，currentclass表示元素的当前class属性值。如果返回true，则移除该类。 示例： HTML代码： ``` <div class="box green"></div> <div class="box red"></div> <div class="box blue"></div> ``` jQuery代码： ``` // 移除所有元素的class属性 $(".box").removeClass(); // 移除所有元素的green类 $(".box").removeClass("green"); // 移除所有元素的green和red类 $(".box").removeClass("green red"); // 仅移除位置为2的元素的blue类 $(".box").removeClass(function(index,currentclass){ return index==2 && currentclass=="blue"; }); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值