实例

对设置和移除所有

元素的 "main" 类进行切换:

$("button").click(function(){
$("p").toggleClass("main");
});
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").toggleClass("main");
});
});
</script> <style type="text/css">
.main
{
font-size:120%;
color:red;
}
</style>
</head> <body>
<h1 id="h1">This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">切换段落的 "main" 类</button>
</body>

定义和方法

toggleClass() 对设置或移除被选元素的一个或多个类进行切换。

该方法检查每个元素中指定的类。如果不存在则添加类,如果已设置则删除之。这就是所谓的切换效果。

不过,通过使用 "switch" 参数,您能够规定只删除或只添加类。

语法

$(selector).toggleClass(class,switch)

参数

参数 描述
class

必需。规定添加或移除 class 的指定元素。

如需规定若干 class,请使用空格来分隔类名。

switch 可选。布尔值。规定是否添加或移除 class。

使用函数来切换类

$(selector).toggleClass(function(index,class),switch)

例子

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$('ul li').toggleClass(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>Apple</li>
<li>IBM</li>
<li>Microsoft</li>
<li>Google</li>
</ul>
<button class="btn1">添加或移除列表项的类</button>
</body>
</html>

参数

参数 描述
function(index,class)

必需。规定返回需要添加或删除的一个或多个类名的函数。

  • index - 可选。接受选择器的 index 位置。
  • class - 可选。接受选择器的当前的类。
switch 可选。布尔值。规定是否添加(true)或移除(false)类。

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

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

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

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

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

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

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

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

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

  5. jQuery 样式操作、文档操作、属性操作的方法总结

    文档操作: addClass()             向匹配的元素添加指定的类名.after()                    在匹配的元素之后插入内容.append()         ...

  6. jQuery属性操作

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

  7. jQuery源代码学习之八——jQuery属性操作模块

    一.jQuery属性模块整体介绍 jQuery的属性操作模块分四个部分:html属性操作,dom属性操作,类样式操作,和值操作. html属性操作(setAttribute/getAttribute) ...

  8. jQuery 属性操作和CSS 操作

    如有在jQuery方法中涉及到函数,此函数必定会返回一个数值(函数由于运行次数不同触发一些不同效果) jQuery 属性操作方法(以下方法前些日子学习过,不再赘述) addClass() attr() ...

  9. JQuery --- 第二期 (jQuery属性操作)

    个人学习笔记 1.JQuery的内容选择器 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

随机推荐

  1. Python程序格式规范

    Python是一种计算机编程语言.计算机编程语言和我们日常使用的自然语言有所不同,最大的区别就是,自然语言在不同的语境下有不同的理解,而计算机要根据编程语言执行任务,就必须保证编程语言写出的程序决不能 ...

  2. js模拟滚动条滚动

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 【概率论】6-2:大数定理(The Law of Large Numbers)

    title: [概率论]6-2:大数定理(The Law of Large Numbers) categories: - Mathematic - Probability keywords: - Ma ...

  4. Angular惰性加载的特性模块

    一:Angular-CLI建立应用 cmd命令:ng new lazy-app --routing    (创建一个名叫 lazy-app 的应用,而 --routing 标识生成了一个名叫 app- ...

  5. 洛谷P1325 雷达安装

    题目 考虑对于一个小岛,如果有雷达可以覆盖它,则这些雷达肯定在一个区间里,则原题内容则变为区间选点问题 #include <bits/stdc++.h> using namespace s ...

  6. 从海量文本中统计出前k个频率最高的词语

    现有如下题目:有一个海量文本,存储的是汉语词语,要求从中找出前K个出现频率最高的词语,写出最优算法,兼顾时间和空间复杂度. 思路分析:熟悉搜索引擎的程序员,应该不是难题.用传统的HashMap是无法解 ...

  7. 一次docker镜像的迁移

    docker 镜像迁移 背景,本地测试环境要切到线上测试,镜像下载或编译都需要时间. 所以直接scp镜像过去来节省时间. save 相对于export会占用更多存储空间 被迁移服务器导出所有镜像 do ...

  8. 2-SAT 知识小结

    2-SAT 问题: 有 n 个变量,每一个变量都是 bool 类型的,除了这 n 个变量以外,我们还有 m 个关系表达式,关系表达式差不多是这样的: x1 & x2 = false(注意每个表 ...

  9. 【CSP模拟赛】Adore(状压dp 二进制)

    题目描述 小w偶然间见到了一个DAG.这个DAG有m层,第一层只有一个源点,最后一层只有一个汇点,剩下的每一层都有k个节点.现在小w每次可以取反第i(1<i<n-1)层和第i+1层之间的连 ...

  10. [Linux] 60s快速分析Linux性能

    转载: https://www.cnblogs.com/zichuan/p/10440617.html 之前在地铁上看到过一篇快速分析Linux系统性能的文章,觉得以后有用,今天就找了一下,转载过来. ...