jQuery中removeClass()方法用法实例

本文实例讲述了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类名,类名之间用空格分隔。

(0)

相关推荐

  • MongoDB Remove函数的3个常见用法

    在MongoDB中,db.collection.remove()方法用来从文档中删除文档.可以从一个集合中删除所有文档,删除匹配一个条件的所有文档,或者限制操作只删除一条文档. 删除所有文档: 删除集合中的所有文档,需要传递一个空的query文档{}给remove()方法.remove()方法不会删除索引.下面是从inventory集合中删除所有文档的例子: 复制代码 代码如下: db.inventory.remove({}) 删除集合中所有的文档,drop()方法可能更有效,drop()方法会

  • 怎么重置mysql的自增列AUTO_INCREMENT初时值

    重置 MySQL 自增列 AUTO_INCREMENT 初时值 注意, 使用以下任意方法都会将现有数据删除. 方法一: delete from tb1; ALTER TABLE tbl AUTO_INCREMENT = 100; (好处, 可以设置 AUTO_INCREMENT 为任意值开始) 提示:如果表列和数据很多, 速度会很慢, 如90多万条, 会在10分钟以上. 方法二: truncate tb1; (好处, 简单, AUTO_INCREMENT 值重新开始计数.) 怎么重置mysql的

  • Lua的table库函数insert、remove、concat、sort详细介绍

    函数列表: table.insert(table,[ pos,] value) table.remove(table[, pos]) table.concat(table[, sep[, i[, j]]]) table.sort(table[, comp]) 1. insert 和 remove 只能用于数组元素的插入和移出, 进行插入和移出时,会将后面的元素对齐起来. 所以在 for 循环中进行 insert 和 remove 的时候要注意插入和移除时是否漏掉了某些项:   复制代码 代码如下

  • js使用removeChild方法动态删除div元素

    在做用户查找时 因为要把查找的结果动态加载和显示,所以,那些html元素要由Ajax动态生成.用户打开查找界面时,有系统推荐的用户,而当用户按条件查找后,查找的结果动态加载和显示.所以考虑到用js来搞. 这个for循环就是移除已有的表单.然后根据Ajax请求过来的数据,动态生成新的表单对象.一定要注意j变量从大往小循环,否则,删除div元素后会引起serchResultLenth=serchResult.children.length;长度的变化(这个问题摸索了好久,才搞定,切记) for(va

  • jQuery .attr()和.removeAttr()方法操作元素属性示例

    今天主要和大家一起分享一下如何使用jQuery的.attr()和.removeAttr()方法读取,添加,修改,删除元素的属性.大家在平时的Web页面制作中都有碰到如何动态的获取元素的属性和属性值,或者说动态的修改元素的某个(某些)属性的属性值.那么jQuery就可以让我们轻松的读取,添加,更改或删除一个(或多个)元素中的任何属性,在jQuery中我们可以使用下面的方法来实现: 1 .attr():jQuery中的.attr()方法让你能轻松的读取,增加或修改一个元素的属性(详情参考.attr(

  • JavaScript中rem布局在react中的应用

    前面给大家分享了一个react项目(http://www.jb51.net/article/76085.htm),这次对这个项目做了一些改进,增加了rem布局和对iscroll在Android上的优化. 项目代码,欢迎fork和star,在线预览 REM布局实例代码 var fontSizeInit = function() { var doc = document.documentElement, cli = doc.clientWidth; cli&&(cli/=320,2<cl

  • PowerShell使用Remove-Item命令删除文件、注册表项介绍

    本文介绍PowerShell中如何将文件删除.在DOS下,可以使用del命令,Linux下也有rm命令,而在PowerShell中使用Remove-Item这个cmdlet就可以一句话轻松搞定! 在PowerShell中,删除文件的cmdlet为Remove-Item.Remove-Item这个cmdlet有如下一些别名:ri.rm.rmdir.del.erase.rd,如果大家要问这些别名怎么记或者怎么来的,小编提示一下,这些别名都是DOS和Linux系统下,删除文件和删除目录的命令.仔细回想

  • 使用JS实现jQuery的addClass, removeClass, hasClass函数功能

    废话不多说,直接上代码 复制代码 代码如下: function addClass(obj, cls){     var obj_class = obj.className,//获取 class 内容.     blank = (obj_class != '') ? ' ' : '';//判断获取到的 class 是否为空, 如果不为空在前面加个'空格'.     added = obj_class + blank + cls;//组合原来的 class 和需要添加的 class.     obj

  • 批处理中常用命令介绍(Echo、rem、goto、call、pause、if、for)

    一.echo命令 (echo图文版) 1. Echo :显示当前ECHO的状态:ECHO ON 或者ECHO OFF .2. ECHO ON :ECHO状态设为ON,将显示命令行(如每行前的C:\>等类似标志).3. ECHO OFF:CHO状态设为OFF,将不显示命令行(如每行前的C:\>等类似标志) .4. ECHO 字符串 :将输入的字符串显示在CMD屏幕上.5. ECHO 字符串 &ECHO 字符串 - :&,类似and的意思,逻辑运算,用来显示多行数据.6. ECHO

  • python dict remove数组删除(del,pop)

    比如代码 binfo = {'name':'jay','age':20,'python':'haha'} print binfo.pop('name')#pop方法删除键,并且返回键对应的值 print binfo##输出结果:{'python': 'haha', 'age': 20} del binfo['python']##内置方法删除元素 print binfo##输出结果:{'age': 20}

  • 手机端页面rem宽度自适应脚本

    什么是rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对大小就可以实现自适应了,就不用什么媒体查询那些的. 我们的设计图往往宽度是640或者其他尺寸的,不过我建议是用这个尺寸,以640为基准,以小到大,实现自适应,下面实现的比例为1rem=40px(640宽度). 为什么这样搞? 这样一套代码就搞定手机端尺寸自适应,不需要媒体查询,而且利用Sass和Less能够给我们节约更多的时间,以及

  • MySQL查询和修改auto_increment的方法

    本文实例讲述了MySQL查询和修改auto_increment的方法.分享给大家供大家参考.具体如下: 查询表名为tableName的auto_increment值: 复制代码 代码如下: SELECT AUTO_INCREMENT FROM information_schema.tables WHERE table_name="tableName"; 修改表名为tableName的auto_increment值: 复制代码 代码如下: ALTER TABLE tableName au

随机推荐