jQuery 属性操作 - toggleClass() 方法
实例
对设置和移除所有
元素的 "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) |
必需。规定返回需要添加或删除的一个或多个类名的函数。
|
| switch | 可选。布尔值。规定是否添加(true)或移除(false)类。 |
jQuery 属性操作 - toggleClass() 方法的更多相关文章
- jQuery 属性操作 - val() 方法
val() 方法返回或设置被选元素的值. 元素的值是通过 value 属性设置的.该方法大多用于 input 元素. 如果该方法未设置参数,则返回被选元素的当前值. <html> < ...
- jQuery 属性操作 - attr() 方法
定义和用法 attr() 方法设置或返回被选元素的属性值. 根据该方法不同的参数,其工作方式也有所差异. 实例1 设置被选元素的属性和值. <html><head><sc ...
- jQuery 属性操作 - addClass() 方法
使用 addClass() 和 removeClass() 来移除 class,并添加新的 class. <html> <head> <script type=" ...
- jquery——属性操作、特殊效果
1. attr().prop() 取出或者设置某个属性的值 <!DOCTYPE html> <html lang="en"> <head> &l ...
- jQuery 样式操作、文档操作、属性操作的方法总结
文档操作: addClass() 向匹配的元素添加指定的类名.after() 在匹配的元素之后插入内容.append() ...
- jQuery属性操作
jQuery 的属性操作的核心部分其实就是对底层 getAttribute().setAttributes()等方法的一系列兼容性处理 ...if ( notxml ) { name = name.t ...
- jQuery源代码学习之八——jQuery属性操作模块
一.jQuery属性模块整体介绍 jQuery的属性操作模块分四个部分:html属性操作,dom属性操作,类样式操作,和值操作. html属性操作(setAttribute/getAttribute) ...
- jQuery 属性操作和CSS 操作
如有在jQuery方法中涉及到函数,此函数必定会返回一个数值(函数由于运行次数不同触发一些不同效果) jQuery 属性操作方法(以下方法前些日子学习过,不再赘述) addClass() attr() ...
- JQuery --- 第二期 (jQuery属性操作)
个人学习笔记 1.JQuery的内容选择器 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
随机推荐
- APP弱网测试工具（QNET）
QNET介绍官网链接:https://wetest.qq.com/product/qnet 目前在测试移动设备上进行弱网络专项测试的方案主要有两种: 通过Android设备连接到PC上进行弱网络测试, ...
- C#在WebApi 中使用Redis 的方法
首先Startup public void ConfigureServices(IServiceCollection services) { services.AddControllers(); // ...
- MySQL分区表 非分区索引 无法使用
在<高性能Mysql>这本书的‘如何使用分区’这一小章中,列举的常见问题中,有以下一个问题: 分区列和索引列不匹配 如果定义的索引列和分区列不匹配,会导致查询无法进行分区过滤.假设在列a上 ...
- Codeforces Round #557 题解【更完了】
Codeforces Round #557 题解 掉分快乐 CF1161A Hide and Seek Alice和Bob在玩捉♂迷♂藏,有\(n\)个格子,Bob会检查\(k\)次,第\(i\)次检 ...
- 10分钟用Python爬取最近很火的复联4影评
欲直接下载代码文件,关注我们的公众号哦!查看历史消息即可! <复仇者联盟4:终局之战>已经上映快三个星期了,全球票房破24亿美元,国内票房破40亿人民币. 虽然现在热度逐渐下降,但是我们还 ...
- UOJ226. 【UR #15】奥林匹克环城马拉松 [组合数学，图论]
UOJ 思路 我们知道关于有向图欧拉回路计数有一个结论:在每个点入度等于出度的时候,答案就是 \[ t_w(G)\prod (deg_i-1)! \] 其中\(t_w(G)\)是以某个点为根的树形图个 ...
- Dart 日期时间 DateTime
1.获取当前时间 var now = new DateTime.now(); print(now); // 2019-06-20 16:59:05.560543 2.设置时间 var d =new D ...
- 安装php的oracle扩展
PHP 版本5.5 Windows下 1.首先下载OCI8的扩展 http://pecl.php.net/package/o... 我这里下的版本是5.5 Thread Safe (TS) x86 版 ...
- top,free,df,iostat,netstat
服务器程序员除了编写功能之外,若想往上走需要在外网环境打磨很久,以下是行走江湖的制胜法宝. top(综合查看) free(查看内存占用) ps aux|sort -nk6 (查看内存占用具体使用物理内 ...
- DevOps-如何构建持续交付流水线
引言 DevOps 是一套实践方法,在保证高质量的前提下缩短系统变更从提交到部署至生产环境的时间,其中持续集成和持续交付是 DevOps 里面非常重要的一环.本文讲述了达到自动化持续交付需要做的准备工 ...