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';
  }
});

jQuery CSS 添加/删除类名的更多相关文章

  1. jQuery动态添加删除CSS样式

    jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...

  2. jQuery动态添加删除select项

    // 添加 function col_add() { var selObj = $("#mySelect"); var value="value"; var t ...

  3. jQuery动态添加删除与添加表行代码

    具体实现代码如下: table的HTML如下: 代码如下 复制代码 <input type="button" value="添加一行" />< ...

  4. jquery动态添加删除div--事件绑定,对象克隆

    我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbi ...

  5. jquery动态添加/删除 tr/td

    <head runat="server"> <title></title> <!--easyui --> <link rel= ...

  6. Jquery动态添加/删除表格行和列

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. ASP.NET+ashx+jQuery动态添加删除表格

    aspx: <script src="../script/jquery-1.4.4.min.js" type="text/javascript" lang ...

  8. Jquery基础添加删除内容

    直入主题,工作中比较常用的功能在input框内添加内容,不白话了,上代码! 布局: <div id="content"> <input type="te ...

  9. Jquery动态添加 删除 操作实现

    这是gridView为空数据时显示的表头 下面直接填代码: function Add() { //动态添加行 $("#gridCustomerView").append(" ...

随机推荐

  1. 转:vim----复制粘贴

    vim有12个粘贴板,分别是0.1.2.....9.a.“.+:用:reg命令可以查看各个粘贴板里的内容.在vim中简单用y只是复制到“(双引号)粘贴板里,同样用p粘贴的也是这个粘贴板里的内容: 要将 ...

  2. Centos 7中 vim 中文乱码

    参考:http://www.myexception.cn/operating-system/1534005.html 一. sudo vim /etc/vimrc 在文件中加入如下几行:      s ...

  3. 轻松学习Ionic (二) 为Android项目集成Crosswalk(更新官方命令行工具)

        现在集成crosswalk不用这么麻烦了!官方的命令行工具已经能让我们一步到位,省去很多工作,只需在cmd中进入项目所在目录(不能有中文目录,还得FQ),执行: ionic browser a ...

  4. activity调用finish方法理解

    /** * Call this when your activity is done and should be closed. The * ActivityResult is propagated ...

  5. ubuntu下aircrack-ng的wifi破解

    首先安装aircrack-ng,apt-get install aircrack-ng. 然后打开shell,输入airmon-ng start wlan0. 输入airodump-ng mon0. ...

  6. [jquery]高级篇--标签选择

    1>3中初始化 $(document).ready(function(){ alert("开始了"); }); $(function(){ trace("初始化方法 ...

  7. 在centos7中限制kvm虚拟机可访问的资源

    最近通过艰苦卓绝的度娘(我很想用谷歌,可是,你懂的),终于搞明白如何在centos7中限制kvm虚拟机可访问的资源了.度娘给出的结果中,大部分都说的很对,然而,却很难照着做,主要原因有两点:1.网上的 ...

  8. Java获取线程的对象和名称

    /*获取线程对象以及名称(很有意义的) 原来线程都有自己默认的名称Thread-编号  该编号从0开始 Thread 父类的方法static  Thread currentThread() :获取当前 ...

  9. AngularJS的学习网站及相关资源整理

    学习angularjs的网站及相关资源的整理,会不断更新. angularJs的官网:https://angularjs.org/       API文档:https://docs.angularjs ...

  10. 安装ipython notebook

    从http://cs231n.github.io/assignments2016/assignment1/开始说起,因为要学习cs231n课程,需要安装ipython notebook,原本电脑中安装 ...