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. 【转】MyBatis学习总结(四)——解决字段名与实体类属性名不相同的冲突

    [转]MyBatis学习总结(四)——解决字段名与实体类属性名不相同的冲突 在平时的开发中,我们表中的字段名和表对应实体类的属性名称不一定都是完全相同的,下面来演示一下这种情况下的如何解决字段名与实体 ...

  2. 存储结构中的对齐(alignment)

    最近,在测试基于ceph的小文件合并方案(见上个博文)时,遇到一个怪异的现象:将librados提供的append接口与我们封装的WriteFullObj接口(osd端是append操作和kvdb的p ...

  3. 使用blktrace排查iowait cpu高的问题

    本文转自这里,blktrace在这种情况下的使用方法值得借鉴学习. ------------------------------------------------------------------ ...

  4. Microsoft Visual Studio 2013 Update 1 离线安装程序

    ☆ 微软官网地址:☆http://www.microsoft.com/zh-cn/download/details.aspx?id=41650☆ 离线安装程序 直接下载链接:☆http://downl ...

  5. 20150503-struts2入门-标签

    一.几个标签介绍 1.property标签 property标签用于输出指定值: <s:set name="name" value="'kk'" /> ...

  6. 如何入侵Linux操作系统

    我发现了一个网站,于是常规入侵.很好,它的FINGER开着,于是我编了一个SHELL,aaa帐号试到zzz(by the way,这是我发现的一个网上规律,那就是帐号的长度与口令的强度成正比, 如果一 ...

  7. IOS 高级开发 KVC(二)

    前一篇博客最后介绍了KVC 再json 转模型时遇到一些问题.今天接着来介绍KVC 的其他用法.其实我们在一开始的时候就一直再强调命名的重要性.命名规范是KVC 存活的基础.如果没有这个条件支撑,那么 ...

  8. 07_Java8新增的Lambda表达式

    [Lambda表达式概述] Lambda表达式支持将代码块作为方法参数,Lambda表达式允许将使用简洁的代码来创建只有一个抽象方法的接口的实例.(这种接口称为函数式接口) [入门实例] packag ...

  9. 写入.csv文件

    #include "stdafx.h" #include "WriteCsv.h" CString m_strData;//写入记录的一条数据 CString ...

  10. [翻译][MVC 5 + EF 6] 12[完结]:高级场景

    原文:Advanced Entity Framework 6 Scenarios for an MVC 5 Web Application 1.执行原生SQL查询: EF Code First API ...