jQuery toggleClass
类别:Web前端 浏览量:1564
时间:2015-11-23 jQuery toggleClass
jQuery toggleClass一、jQuery 中 toggleClass方法的理解
1、用于切换当前jQuery对象所匹配的每一个元素上指定的css类名。
2、所谓"切换",就是如果该元素上已存在指定的类名,则移除掉;如果不存在,则添加该类名。
二、toggleClass语法
1、类的切换
$(selector).toggleClass(class,switch)
参数说明
class
(1)、必需。规定添加或移除 class 的指定的css类名。
(2)、如需规定若干 class,请使用空格来分隔类名。
switch
(1)、可选。布尔值。
(2)、用于指定是只添加(true)还是只移除(false)指定的css类名。
2、使用函数来切换类
$(selector).toggleClass(function(index,class),switch)
参数说明
function(index,class)
(1)、必需。规定返回需要添加或删除的一个或多个类名的函数。
(2)、index - 可选。接受选择器的 index 位置。
(3)、class - 可选。接受选择器的当前的类。
switch
可选。布尔值。规定是否添加(true)或移除(false)类。
三、toggleClass 与 js 的等价代码
$element.toggleClass( className );
// 相当于
if( $element.hasClass( className ) ){
$element.removeClass( className );
}else{
$element.addClass( className );
}
//上面的className均表示单个css类名,如果是空格分隔的多个css类名,则等价部分的代码是需要循环执行的
/* ********** 分割线 ********** */
$element.toggleClass( className, true );
//相当于
$element.addClass( className );
/* ********** 分割线 ********** */
$element.toggleClass( className, false );
//相当于
$element.removeClass( className );
四、toggleClass实例
1、对添加和移除类进行切换
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggleClass("main");
});
});
</script>
<style>
.main
{
font-size:120%;
color:red;
}
</style>
<p>This is a paragraph.</p>
<p class="main">This is another paragraph.</p>
<button>Toggle class "main" for p elements</button>
2、使用函数切换类
<script>
$(document).ready(function(){
$("button").click(function(){
$("li").toggleClass(function(n){
return "listitem_" + n;
});
});
});
</script>
<style>
.listitem_1, .listitem_3
{
color:red;
}
.listitem_0, .listitem_2
{
color:blue;
}
</style>
<h1>This is a heading</h1>
<ul>
<li>Peter</li>
<li>Lois</li>
<li>Chris</li>
<li>Stewie</li>
</ul>
<button>Add/remove classes to list items</button>
3、使用 switch 参数
<script>
$(document).ready(function(){
$("#add").click(function(){
$("p").toggleClass("main",true);
});
$("#remove").click(function(){
$("p").toggleClass("main",false);
});
});
</script>
<style>
.main
{
font-size:120%;
color:red;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p class="main">This is another paragraph.</p>
<button id="add">Add class "main"</button>
<button id="remove">Remove class "main"</button>
标签:jquery
您可能感兴趣
- jquerycss3轮播案例(CSS3实现列表无限滚动/轮播效果)
- jquery中change()
- jquery filter方法
- jQuery给动态添加的元素绑定事件
- jquery滚动加载数据
- jQuery对象和DOM的相互转换
- Jquery中parent()和parents()
- jQuery end()
- javascript和jquery的区别详解(JavaScript与JQuery框架基础入门教程)
- jquery中hasClass()、is()判断是否包含指定的class
- JQuery中extend的用法
- jQuery 右侧浮动导航菜单
- jquery属性选择器
- jQuery多个版本间,以及与其他js文件冲突的解决方法
- jquery中text(),val(),html()区别
- css3设置过渡效果(CSS3 media queries + jQuery实现响应式导航)
- 太鸡贼了,这老小区轻松搞定了停车问题(这老小区轻松搞定了停车问题)
- 节日我在岗|警景相融 平安相伴(节日我在岗警景相融)
- 战 疫 时刻 致敬每一位石化大学的 守护者(战疫时刻)
- 老弄堂里的市井味道(老弄堂里的市井味道)
- 小米音乐可绑定QQ音乐, QQ音乐 真的会消失在小米的设备上吗(小米音乐可绑定QQ音乐)
- 小米Watch S1评测 或许能成为小米冲击高端可穿戴设备的里程碑(小米WatchS1评测或许能成为小米冲击高端可穿戴设备的里程碑)
热门推荐
- linux巡检命令手册(Linux xargs命令的使用)
- apache和yii域名配置(yii框架数据库关联查询操作示例)
- sql死锁进程保护(SqlServer查询和Kill进程死锁的语句)
- html5的新特性
- tp5微信支付接口开发案例(PHP实现的微信APP支付功能示例基于TP5框架)
- idea集成docker-compose(IDEA 集成 docker 实现远程部署的详细步骤)
- web服务器iis安全访问机制(IIS与APACHE实现HTTP重定向到HTTPS)
- python的opencv图片识别(OpenCV-Python 摄像头实时检测人脸代码实例)
- C#中IDisposable
- python time模块记录时间(Python Datetime模块和Calendar模块用法实例分析)