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属性操作以及一些实用方法
目录 一.jQuery属性操作 1.prop() a.获取属性值 b.设置属性值 c.自定义属性值获取 2.数据缓存 3.jQuery内容文本值 a.普通元素内容 b.普通元素文本内容 c.获取设置表 ...
- jQuery—常用API(jQuery 属性操作、jQuery 文本属性值、jQuery 元素操作)
1. jQuery 属性操作 1.1 设置或获取元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性,比如 <a> 元素里面的 href,比如 <input> ...
- 定义一个Dog类,包含age,weight等属性,以及对这些属性操作的方法。实现并测试这个类。
定义一个Dog类,包含age,weight等属性,以及对这些属性操作的方法.实现并测试这个类. [输入形式] 程序参考的输入(提示"Input Age and Weight:"): ...
- web前端----jQuery属性操作
知识点总结 1.属性 属性(如果你的选择器选出了多个对象,那么默认只会返回出第一个属性). attr(属性名|属性值) - 一个参数是获取属性的值,两个参数是设置属性值 - 点击加载图片示例 remo ...
- jQuery CSS 操作 - css() 方法
实例 设置 <p> 元素的颜色: $(".btn1").click(function(){$("p").css("color", ...
- Mr.J-- jQuery学习笔记(三十二)--jQuery属性操作源码封装
扫码看专栏 jQuery的优点 jquery是JavaScript库,能够极大地简化JavaScript编程,能够更方便的处理DOM操作和进行Ajax交互 1.轻量级 JQuery非常轻巧 2.强大的 ...
- [jQuery原理] jQuery属性操作相关方法
属性操作相关方法 attr() 设置或者获取元素的属性节点值 attr: function (attr, value) {// 1.判断是否是字符串if(njQuery.isString(attr)) ...
- 46 jQuery属性操作
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.设置或获取元素固有属性值prop() 所谓的固有属性就是指元素本身自带的属性.如< ...
- jQuery 属性操作 - addClass() 和 removeClass() 方法
实例 向第一个 p 元素添加一个类: $("button").click(function(){$("p:first").addClass("intr ...
最新文章
- 全文搜索引擎Elasticsearch,这篇文章给讲透了
- 记录一次maven jar包冲突的排查过程
- ADExchange2010 简单安装部署(二)
- 使用StringRedisTemplate和RedisTemplate
- Quartz2 定时器 《一》(概述)
- 句句真研—每日长难句打卡Day14
- python工资一般多少西安-python西安薪资
- mysql查看已打开文件数_[MySQL FAQ]系列 -- mysql如何计算打开文件数
- 数据库索引系列四:索引算法Hash与BTree的区别
- cuda-gdb 调试python中的module/cu文件
- query归一 同义词挖掘
- 开wifi微信定位服务器,企业微信wifi定位
- 条件变量之虚假唤醒 (Spurious wakeup)
- IE浏览器运行Applet
- ubuntu11.10输入法推荐-ibus-sunpinyin
- 如何初版一本书——出版社选择
- r语言ggplot2 多线图绘制图例_R语言绘制箱线图示例
- css compressor java_javascript/css压缩工具---yuicompressor使用方法
- excel在文本的固定位置插入字符、进行日期和时间的合并
- 删库跑路的「faker.js」又能用了,8位开发者维护新项目!
热门文章
- panda 函数笔记(merge\DataFrame用法\DataFrame.plot)
- JAVA-求整数序列中出现次数最多的数
- mysql获取当前时间的订单_mysql获取当前时间,及其相关操作
- 北林oj-算法设计与分析-Line up in the canteen(两种解法,附思路)
- 2014递归求解单链表中的平均值(C++,附递归函数思路讲解)
- 葡萄酒质量和时间的关系
- docker pull 下载一半_Docker三个重要的基本操作,镜像,容量,仓库
- 常见的div盒子居中(上下左右)实现
- idea插件Lombok
- 闭包造成的内存泄露怎么解决?