addClass(class) — 为每个匹配的元素添加指定的类名。
参数 : class — 一个或多个要添加到元素中的CSS类名,请用空格分开(String)
示例 一 :
为匹配的元素加上 'selected' 类
HTML 代码:
<p>Hello</p>
jQuery 代码:
$("p").addClass("selected");
结果:
[ <p class="selected">Hello</p> ]
示例 二 :
为匹配的元素加上 selected highlight 类
HTML 代码:
<p>Hello</p>
jQuery 代码:
$("p").addClass("selected highlight");
结果:
[ <p class="selected highlight">Hello</p> ]

addClass(function(index, class)) — 为每个匹配的元素添加指定的类名。

参数 : function(index, class) — 此函数必须返回一个或多个空格分隔的class名。接受两个参数,index参数为对象在这个集合中的索引值,class参数为这个对象原先的class属性值。(Function)
示例 : 给li加上不同的class
HTML 代码:
<ul><li>Hello</li><li>Hello</li><li>Hello</li></ul>
jQuery 代码:
$('ul li:last').addClass(function() {
  return 'item-' + $(this).index();
});

removeClass([class]) — 从所有匹配的元素中删除全部或者指定的类。

参数 : class (可选) — 一个或多个要删除的CSS类名,请用空格分开(String)
示例 : 
从匹配的元素中删除 'selected' 类
HTML 代码:
<p class="selected first">Hello</p>
jQuery 代码:
$("p").removeClass("selected");
结果:
[ <p class="first">Hello</p> ]

删除匹配元素的所有类
HTML 代码:
<p class="selected first">Hello</p>
jQuery 代码:
$("p").removeClass();
结果:
[ <p>Hello</p> ]

removeClass(function(index, class)) — 从所有匹配的元素中删除全部或者指定的类。
参数 : function(index, class) — 此函数必须返回一个或多个空格分隔的class名。接受两个参数,index参数为对象在这个集合中的索引值,class参数为这个对象原先的class属性值。(Function)
示例:
删除最后一个元素上与前面重复的class
jQuery 代码:
$('li:last').removeClass(function() {
    return $(this).prev().attr('class');
});

toggleClass(class) — 如果存在(不存在)就删除(添加)一个类。
参数 : class — CSS类名(String)
示例 :
为匹配的元素切换 'selected' 类
HTML 代码:
<p>Hello</p><p class="selected">Hello Again</p>
jQuery 代码:
$("p").toggleClass("selected");
结果:
[ <p class="selected">Hello</p>, <p>Hello Again</p> ]

toggleClass(class, switch) — 如果开关switch参数为true则加上对应的class,否则就删除。
参数 :
class — 要切换的CSS类名(String)
switch — 用于决定元素是否包含class的布尔值(Boolean)
示例 :
每点击三下加上一次 'highlight' 类
HTML 代码:
<strong>jQuery 代码:</strong>
jQuery 代码:
  var count = 0;
  $("p").click(function(){
      $(this).toggleClass("highlight", count++ % 3 == 0);
  });

toggleClass(function(index, class), [switch])— 如果开关switch参数为true则加上对应的class,否则就删除。
参数 :
function(index, class)— 返回class名的一个函数,接受两个参数,index为元素在集合中的索引位置,class为原先元素的class值(Function)
switch — (可选)用于决定元素是否包含class的布尔值(Boolean)
示例 :
根据父元素来设置class属性
jQuery 代码:
$('div.foo').toggleClass(function() {
  if ($(this).parent().is('.bar') {
    return 'happy';
  } else {
    return 'sad';
  }
});

转载于:https://www.cnblogs.com/xupeiyu/p/4012730.html

jQuery CSS 添加/删除类名相关推荐

  1. jQuery实现添加删除

    用jQuery实现添加删除 用原生js实现的代码:https://blog.csdn.net/m0_53679993/article/details/124179917?spm=1001.2014.3 ...

  2. JQuery动态添加/删除class样式

    有时我们会对某个控件的class样式进行获取.添加.修改.删除.下面是简单整理的一些实例用法: html样例代码如下: <ul class="pro_list fl cont" ...

  3. [PHP] JQuery+Layer实现添加删除自定义标签代码

    JQuery+Layer实现添加删除自定义标签代码 实现效果如下: 实现代码如下: <!doctype html> <html> <head> <meta c ...

  4. jQuery使用toggleClass方法动态添加删除Class样式的方法

    本文实例讲述了jQuery使用toggleClass方法动态添加删除Class样式的方法.分享给大家供大家参考.具体分析如下: jQuery通过toggleClass方法动态添加删除Class,一次执 ...

  5. jquery使用html()css不生效,jquery可以添加css样式吗?

    jquery可以添加css样式吗?答案是:可以.那么如何添加css样式?下面本篇文章就来给大家介绍一下使用jquery添加css样式的方法,希望对大家有所帮助. 在jquery中,可以使用addCla ...

  6. jquery中添加属性和删除属性--------------------

    jquery中添加属性和删除属性: 复制代码 代码如下: $("#2args").attr("disabled",'disabled'); $("#2 ...

  7. JavaScript经典案例:添加/删除元素类名

    效果展示: CSS代码: <style type="text/css">#btn-wrapper {width: 300px;height: 100px;text-al ...

  8. jq添加或删除html元素,jQuery添加删除DOM元素方法详解

    本文实例分析了jQuery添加删除DOM元素的方法.分享给大家供大家参考,具体如下: 介绍 DOM是Document Object Modeule的缩写,一般来说,DOM操作分成3个方面. 1.DOM ...

  9. jquery中添加属性和删除属性

    jquery中添加属性和删除属性: 复制代码 代码如下: $("#2args").attr("disabled",'disabled'); $("#2 ...

  10. jQuery HTML 添加和删除元素

    jQuery - 添加元素 通过 jQuery,可以很容易地添加新元素/内容. 添加新的 HTML 内容的四个 jQuery 方法: append() - 在被选元素的结尾插入内容 prepend() ...

最新文章

  1. 融合基础设施会给私有云带来什么?
  2. shtml与php的区别,htm,html.shtml区别
  3. 基于asp.net的Web开发架构探索(转)
  4. SQL Server-聚焦在视图和UDF中使用SCHEMABINDING(二十六)
  5. 蓝桥杯2014年省赛C/C++ 本科B组
  6. 51单片机——LED发光二极管、蜂鸣器C语言入门编程
  7. python定时任务管理系统_python定时任务最强框架APScheduler详细教程
  8. 如何用笔记本破解无线网络密码?破解无线网络密码的教程
  9. python隐藏窗口_python怎么隐藏界面?
  10. vue-element-admin的二次开发
  11. 招聘数据采集+数据清洗与分析+数据可视化
  12. 算法:什么是宠物收养所问题?
  13. 飞机飞行轨迹可视化Tacview
  14. 冒泡排序-过程详细版
  15. 我在做售前-5.如何应聘售前
  16. 描述CFAR算法原理
  17. SQL server 如何建立两个表的关系
  18. 网易企业邮箱子邮箱发送邮件
  19. 赛门铁克网络版杀毒软件SEP布署小记
  20. 微软云计算业务表现强劲,股价创历史新高

热门文章

  1. C语言Register关键字:利用寄存器提升访问效率
  2. C++链接和运行相关错误
  3. Pyinstaller将外部数据文件打包到可执行文件中(onefolder or onefile)教程
  4. 编译异常例子java_Java中异常发生时代码执行流程
  5. 蓝桥杯2015年第六届C/C++省赛A组第九题-垒骰子
  6. Android SurfaceView动画(二)
  7. The block problem poj1208
  8. Java加密与解密笔记(二) 对称加密
  9. iOS 证书, provision profile作用
  10. name after, name for, name as