实例

向第一个 p 元素添加一个类:

$("button").click(function(){
$("p:first").addClass("intro");
});

定义和用法

addClass() 方法向被选元素添加一个或多个类。

该方法不会移除已存在的 class 属性,仅仅添加一个或多个 class 属性。

提示:如需添加多个类,请使用空格分隔类名。

语法

$(selector).addClass(class)
参数 描述
class 必需。规定一个或多个 class 名称。

 

使用函数来添加类

使用函数向被选元素添加类。

语法

$(selector).addClass(function(index,oldclass))
$(document).ready(function(){
$("button").click(function(){
$("p:first").addClass("intro note");
});
});

removeClass() 方法 实例

移除所有 <p> 的 "intro" 类:

$("button").click(function(){
$("p:first").removeClass("intro");
});
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$('ul li').removeClass(function() {
return 'listitem_' + $(this).index();
});
});
});
</script>
<style type="text/css">
.listitem_1, .listitem_3
{
color:red;
}
.listitem_0, .listitem_2
{
color:blue;
}
</style>
</head> <body>
<h1 id="h1">This is a heading</h1>
<ul>
<li class="listitem_0">Apple</li>
<li class="listitem_1">IBM</li>
<li class="listitem_2">Microsoft</li>
<li class="listitem_3">Google</li>
</ul>
<button>删除列表项中的类</button>
</body>
</html>  

jQuery 属性操作 - addClass() 和 removeClass() 方法的更多相关文章

  1. jQuery 属性操作 - addClass() 方法

    使用 addClass() 和 removeClass() 来移除 class,并添加新的 class. <html> <head> <script type=" ...

  2. 原生js模拟jquery中的addClass和removeClass方法

    js代码: //添加类 function addClass(obj,className) { if(obj.className == '') { //如果没有class obj.className = ...

  3. JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...

  4. 【转发】JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...

  5. jQuery属性操作(四)

    通过阅读jQuery为属性操作封装的基本方法和为处理兼容性问题提供的hooks,发现jQuery在属性操作方面并没有做过多的设计,只是处理一下兼容性问题,然后调用基础的DOM操作方法.以下是对JQue ...

  6. jquery——属性操作、特殊效果

    1. attr().prop() 取出或者设置某个属性的值 <!DOCTYPE html> <html lang="en"> <head> &l ...

  7. jQuery 属性操作 - val() 方法

    val() 方法返回或设置被选元素的值. 元素的值是通过 value 属性设置的.该方法大多用于 input 元素. 如果该方法未设置参数,则返回被选元素的当前值. <html> < ...

  8. jQuery 属性操作 - attr() 方法

    定义和用法 attr() 方法设置或返回被选元素的属性值. 根据该方法不同的参数,其工作方式也有所差异. 实例1 设置被选元素的属性和值. <html><head><sc ...

  9. jQuery属性操作

    jQuery 的属性操作的核心部分其实就是对底层 getAttribute().setAttributes()等方法的一系列兼容性处理 ...if ( notxml ) { name = name.t ...

随机推荐

  1. Windows操作系统下给文件夹右键命令菜单添加启动命令行的选项

    在命令行中或按下[WIN]+[R]键启动运行对话框的情况下,输入regedit命令启动注册表编辑器,在HKEY_CLASSES_ROOT\Folder\shell下增加一个“CMD”(此处名字可以随便 ...

  2. hive中的bucket table

    前言 bucket table(桶表)是对数据进行哈希取值,然后放到不同文件中存储 应用场景 当数据量比较大,我们需要更快的完成任务,多个map和reduce进程是唯一的选择.但是如果输入文件是一个的 ...

  3. Ubuntu上如何搭建Android开发环境

    1.以下是开始Android应用程序编程之前需要的软件列表: a.Java JDK5 及以后版本 b.Java运行环境 c.Android Studio 2.安装Android Studio: x64 ...

  4. 用C读取INI配置文件

    http://blog.csdn.net/chexlong/article/details/6818017 #define CONF_FILE_PATH "Config.ini" ...

  5. 用两个栈实现队列(C++ 和 Python 实现)

    (说明:本博客中的题目.题目详细说明及参考代码均摘自 “何海涛<剑指Offer:名企面试官精讲典型编程题>2012年”) 题目 用两个栈实现一个队列.队列的声明如下,请实现它的两个函数 a ...

  6. java操作svn【svnkit】实操

    SVNKit中怎样使用不同的仓库访问协议? 当你下载了最新版的SVNKit二进制文件并且准备使用它时,一个问题出现了,要创建一个库需要做哪些初始化的步骤?直接与Subversion仓库交互已经在低级层 ...

  7. 数据库建模工具 PD的使用

    1.1. 数据库建模工具 PD的使用 安装12.5版本,进行破解 PD 是最专业数据建模工具, 是 Sybase 公司一个 产品 PD 提供四种模型文件 PDM 物理数据模型,面向数据库表结构设计,直 ...

  8. yii2.0中解决post的400错误

    不想用gii的表单自己写表单,但是又遇到了400错误,怎么解决?下面为你解答一下:

  9. Intellij idea用快捷键自动生成序列化id

    ntellij idea用快捷键自动生成序列化id 类继承了Serializable接口之后,使用alt+enter快捷键自动创建序列化id 进入setting→inspections→seriali ...

  10. vsphere的P2V工具做的物理机迁移到虚拟机报错out of memory

     vsphere的P2V工具做的物理机迁移到虚拟机  迁移成功,但是启动报错  进入rescue模式后发现是sysctl.conf文件的参数设大了因为虚拟机的内存没有物理机内存大 kernel.shm ...