Jquery重新学习之三[属性addClass(),removeClass(),toggleClass()]
1:属性.addClass(class|fn)及.removeClass(class|fn)
1.1 .addClass(class) 参数class一个或多个要添加到元素中的CSS类名,请用空格分开
<style type="text/css">
.DivStry
{
font: 14px;
color: Red;
} .DivTwo
{
background-color: Gray;
border-color: Blue;
}
</style>
<script type="text/javascript">
$(function () {
$("#My_Div").addClass("DivStry");
$("#My_Div").addClass("DivStry DivTwo");
})
</script> <form id="form1" runat="server">
<div id="My_Div">
踏浪帅空间
</div>
1.2 .addClass(fn) 参数function(index,class)此函数必须返回一个或多个空格分隔的class名。接受两个参数,index参数为对象在这个集合中的索引值,class参数为这个对象
原先的class属性值。
<style type="text/css">
.Div-
{
font: 14px;
color: Red;
} .Div-
{
background-color: Gray;
border-color: Blue;
}
</style>
<script type="text/javascript">
$(function () {
$('#My_Div').addClass(function() {
return 'Div-' + $(this).index();
});
})
</script> <div id="My_Div">
踏浪帅空间
</div>
1.3 removeClass() 无参数 直接删除其CSS类名
<style type="text/css">
.DivStry
{
font: 14px;
color: Red;
}
</style> <script type="text/javascript">
$(function () {
$("#My_Div").removeClass();
})
</script> <div id="My_Div" class="DivStry">
踏浪帅空间
</div>
1.4 removeClass(class) 参数class一个或多个要删除的CSS类名,请用空格分开
<style type="text/css">
.DivStry
{
font: 14px;
color: Red;
}
</style> <script type="text/javascript">
$(function () {
$("#My_Div").removeClass("DivStry");
})
</script> <div id="My_Div" class="DivStry">
踏浪帅空间
</div>
1.5 .removeClass(fn) 参数此函数必须返回一个或多个空格分隔的class名。接受两个参数,index参数为对象在这个集合中的索引值,class参数为这个对象原先的class属性值。
<style type="text/css">
.Div-
{
font: 14px;
color: Red;
} </style>
<script type="text/javascript">
$(function () {
$('#My_Div').removeClass(function() {
return 'Div-' + $(this).index();
});
})
</script> <div id="My_Div" class="Div-0">
踏浪帅空间
</div>
2:属性.toggleClass(class|fn[,sw])如果存在(不存在)就删除(添加)一个类。反向执行
2.1 .toggleClass(class) 要切换的CSS类名,如果存在(不存在)就删除(添加)一个类
<style type="text/css">
.DivStry
{
font: 14px;
color: Red;
}
</style> <script type="text/javascript">
$(function () {
$("li").toggleClass("DivStry");
})
</script> <ul>
<li>第一个</li>
<li class="DivStry">第二个</li>
<li>第三个</li>
</ul> 执行完Html变成: <ul>
<li class="DivStry">第一个</li>
<li>第二个</li>
<li class="DivStry">第三个</li>
</ul>
2.2 .toggleClass(fn) 回调函数 返回Css类名
$('My_Div').toggleClass(function() {
if ($(this).parent().is('.bar') {
return 'DivStry';
} else {
return 'Div-1';
}
});
最近有个妹子弄的一个关于扩大眼界跟内含的订阅号,每天都会更新一些深度内容,在这里如果你感兴趣也可以关注一下(嘿对美女跟知识感兴趣),当然可以关注后输入:github 会有我的微信号,如果有问题你也可以在那找到我;当然不感兴趣无视此信息;
Jquery重新学习之三[属性addClass(),removeClass(),toggleClass()]的更多相关文章
- jQuery addClass removeClass toggleClass hasClass is(.class)用法
jQuery addClass removeClass toggleClass hasClass is(.class)用法 <%@ page language="java" ...
- jquery 对svg 元素的addClass removeClass 支持
jquery 2.2 之后才支持对svg 元素的addClass removeClass
- jQuery addClass removeClass toggleClass方法概述
通过动态改变类名(class),可以让其修改元素呈现出不同的效果.在HTML结构中里,多个class以空格分隔,当一个节点(或称为一个标签)含有多个class时,DOM元素响应的className属性 ...
- addClass, removeClass, toggleClass(从jquery中抠出来)
<div id="d3" class="cur"></div> var mylibs = (function(){ var rtrim ...
- class 添加样式,删,开关 【选择】addClass,removeClass,toggleClass
<1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>< ...
- class 添加样式,删除,开关 【选择】addClass,removeClass,toggleClass
<1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>< ...
- jquery源码解析:addClass,toggleClass,hasClass详解
这一课,我们将继续讲解jQuery对元素属性操作的方法. 首先,我们先看一下这几个方法是如何使用的: $("#div1").addClass("box1 box2&quo ...
- 原生JS实现addClass,removeClass,toggleClass
jQuery操作class的方式非常强大,但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery. 在此写了一个利用原生js来实现对dom元素class的操作方法 1.addCl ...
- .addClass(),.removeClass(),.toggleClass()的区别
.addClass("className")方法是用来给指定元素增加类名,也就是说给指定的元素追加样式: 可以同时添加多个类名,空格符隔开 $("selector&quo ...
随机推荐
- 较有意思的Apple XSS(CVE-2016-7762)漏洞
文章作者:Avfisher0x00 前言应CVE作者的要求帮忙分析一下这个漏洞,实际上这是一个思路比较有意思的Apple XSS(CVE-2016-7762).漏洞作者确实脑洞比较大也善于尝试和发掘, ...
- springmvc+hibernate4事务管理配置
1.事务的特性 事务的四种特性: 原子性:体现一个事务的操作的不可分割,要么权执行,要么全不执行. 一致性:事务的执行结果必须从一种一致性状态变到另一种一致性状态.最典型的就是转账,两个账户A.B总金 ...
- 01-项目简介Springboot简介入门配置项目准备
总体课程主要分为4个阶段课程: ------------------------课程介绍------------------------ 01-项目简介Springboot简介入门配置项目准备02-M ...
- Codeforces Beta Round #5 A. Chat Server's Outgoing Traffic 水题
A. Chat Server's Outgoing Traffic 题目连接: http://www.codeforces.com/contest/5/problem/A Description Po ...
- python输出字符串,UnicodeEncodeError: 'ascii' codec can't encode characters in position问题
2017-06-28更新:换到python3.x中,编码问题减少了很多.这篇博文不适用于python3.x http://blog.sina.com.cn/s/blog_64a3795a01018vy ...
- 深入浅出JDBC-快速入门
一.目录 二.概述 简述 JDBC是什么?JDBC英文名为:Java Data Base Connectivity(Java数据库连接),官方解释它是Java编程语言和广泛的数据库之间独立于数据库的连 ...
- OpenERP实施记录(13):出库处理
本文是<OpenERP实施记录>系列文章的一部分. 在前面的文章中,业务部门接到沃尔玛3台联想Y400N笔记本电脑的订单,ABC公司立即采购了8台(3台送货+5台备库存)回来,完成了入库和 ...
- JSP如何导入ckeditor
<textarea rows="3" cols="100" id="editor1"></textarea> < ...
- Android之MVC模式
MVC (Model-View-Controller):M是指逻辑模型,V是指视图模型,C则是控制器.一个逻辑模型可以对于多种视图模型,比如一批统计数据 你可以分别用柱状图.饼图来表示.一种视图模型也 ...
- OpenCV学习(8) 分水岭算法(2)
现在我们看看OpenCV中如何使用分水岭算法. 首先我们打开一副图像: // 打开另一幅图像 cv::Mat image= cv::imread("../to ...