Jquery重新学习之三[属性addClass(),removeClass(),toggleClass()]

时间:2024-09-03 20:33:50

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()]