实例

向第一个 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>  

转载于:https://www.cnblogs.com/jiuge/p/4728850.html

jQuery 属性操作 - addClass() 和 removeClass() 方法相关推荐

  1. jQuery属性操作以及一些实用方法

    目录 一.jQuery属性操作 1.prop() a.获取属性值 b.设置属性值 c.自定义属性值获取 2.数据缓存 3.jQuery内容文本值 a.普通元素内容 b.普通元素文本内容 c.获取设置表 ...

  2. 前端提高篇(八十六):jQuery的class属性操作addClass()与removeClass()、hasClass()、toggleClass()

    1.addClass()与removeClass()基本使用 addClass:添加class:removeClass:移除class,返回this对象,支持链式操作 $('div').addClas ...

  3. 02属性操作_jqueryCSS类操作(addClass()、removeClass()、toggleClass())

    02属性操作_jqueryCSS类操作(addClass().removeClass().toggleClass()) 代码演示 <!DOCTYPE html> <html>& ...

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

    JQuery中操作Css样式的方法 <strong>//1.获取和设置样式</strong>    $("#tow").attr("class&q ...

  5. jQuery—常用API(jQuery 属性操作、jQuery 文本属性值、jQuery 元素操作)

    1. jQuery 属性操作 1.1 设置或获取元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性,比如 <a> 元素里面的 href,比如 <input> ...

  6. web前端----jQuery属性操作

    知识点总结 1.属性 属性(如果你的选择器选出了多个对象,那么默认只会返回出第一个属性). attr(属性名|属性值) - 一个参数是获取属性的值,两个参数是设置属性值 - 点击加载图片示例 remo ...

  7. Mr.J-- jQuery学习笔记(三十二)--jQuery属性操作源码封装

    扫码看专栏 jQuery的优点 jquery是JavaScript库,能够极大地简化JavaScript编程,能够更方便的处理DOM操作和进行Ajax交互 1.轻量级 JQuery非常轻巧 2.强大的 ...

  8. [jQuery原理] jQuery属性操作相关方法

    属性操作相关方法 attr() 设置或者获取元素的属性节点值 attr: function (attr, value) {// 1.判断是否是字符串if(njQuery.isString(attr)) ...

  9. jq之类名相关操作(addclass、removeClass、hasClass)及深意

    文章目录 addclass removeClass hasClass addclass <!DOCTYPE html> <html lang="en">&l ...

最新文章

  1. 从python存入的文件是乱码_如何解决python写入html文件中乱码的现象(图文详解)...
  2. Your shell has not been properly configured to use 'conda activate'
  3. 计算机网络和传统电话网络的最大区别是,传统电话和网络电话有什么区别
  4. mysql not in 多列,MySQL中的多列外键?
  5. 正则表达式实现身份证信息验证
  6. Kryo序列化实现源码分析
  7. Windows Azure HandBook (8) Azure性能测试(1)
  8. 机顶盒 img打包工具_网络机顶盒刷机、固件升级图文详解 宏旺半导体包教包会...
  9. vs2005让程序在win7下获得管理员权限
  10. JConsole可视化工具介绍
  11. KEIL编程中如何重定义printf()函数,以便在后来的开发中使用此函数进行串口数据输出
  12. C 语言 —— 命名规则
  13. 互联网日报 | 5月7日 星期五 | 街电与搜电完成合并;IBM发布2nm芯片制程;首届中国国际消费品博览会开幕...
  14. 小程序源码:uni-app云开发的网盘助手
  15. 当Androidstudio添加权限后仍然报错java.lang.SecurityException: Permission Denial
  16. JDBC学习笔记——Java语言与数据库的鹊桥
  17. 论文阅读-Boosting Data-driven Evolutionary Algorithm with Localized Data Generation
  18. ai字母组合发音规律_使用和尚ai的俄语字母分类
  19. 数字金融VS传统金融,区块链如何革新信任机制?
  20. XML Publisher介绍

热门文章

  1. 一篇文章带你搞懂 SpringBoot与Swagger整合
  2. matlab bdir 排序,命令行 - 如何获取按文件夹名称排序的子文件夹及其文件列表
  3. python 整数对应的字符,在Python中将字符串从字母解密为整数映射
  4. 系统学习机器学习之参数方法(二)
  5. WFDB软件包简介——ECG数据在Matlab下的读取/显示方法
  6. 如何读出烧录程序.bin的数据_如何改变程序搜索数据的方式?使用Redis进行搜索...
  7. 粉碎文件软件测试大乐,软件测试基础(面试)(27页)-原创力文档
  8. php实现排序,PHP实现各种排序
  9. java中的事件派发机制_事件派发器模式
  10. Spark与MR的区别