一、总结
一句话总结：jquery中css的类的操作有增删切三种。
1、jquery中css的类的操作有哪些？
增删切三种
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
39 $('li').toggleClass('red')
2、jquery中的切换是哪个单词？
toggle
39 $('li').toggleClass('red')3、css的类的操作中toggleClass切换是什么意思？
38 $('#btn3').click(function(){
39 $('li').toggleClass('red')
40 //所谓"切换"，就是如果该元素上已存在指定的类名，则移除掉；如果不存在，则添加该类名。
4、jquery中如何添加或删除多个类，类中间的符号是什么？
空格，和属性class中的多个类的写法一样
33 $('li').addClass('red w opa')
5、toggleClass切换的三种形式？
toggleClass() - 对被选元素进行添加/删除类的切换操作
$(selector).toggleClass(classname,function(index,currentclass),switch)
- classname 必需。规定添加或移除的一个或多个类名。如需规定若干个类，请使用空格分隔类名。
- function(index,currentclass) 可选。规定返回需要添加/删除的一个或多个类名的函数。
- index - 返回集合中元素的 index 位置。
- currentclass - 返回被选元素的当前类名。
- switch 布尔值，规定是否仅仅添加（true）或移除（false）类。
a、变频切换
37 count++
38 alert(count)
39 $('li').toggleClass('red',count%3==0)
b、详细制定切换
42 $('li').toggleClass(function(index,className){
43 alert(className+(index+1))
44 return className+(index+1)
45 })c、单一切换
49 //$('li').toggleClass('red',false)
二、jquery中css的类的操作有哪些
1、相关知识
CSS类操作
在jQuery中，类名操作包括：添加类名、删除类、切换类这3种情况
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作 $(selector).toggleClass(classname,function(index,currentclass),switch)
- classname 必需。规定添加或移除的一个或多个类名。如需规定若干个类，请使用空格分隔类名。
- function(index,currentclass) 可选。规定返回需要添加/删除的一个或多个类名的函数。
- index - 返回集合中元素的 index 位置。
- currentclass - 返回被选元素的当前类名。
- switch 布尔值，规定是否仅仅添加（true）或移除（false）类。
2、代码
11-4
1 <!DOCTYPE html>
2 <html lang="en">
3 <style>
4 </style>
5 <head>
6 <meta charset="UTF-8">
7 <title>演示文档</title>
8 <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
9 <style>
10 li{margin-top: 10px}
11 .red{background: red;}
12 .blue{background: blue;}
13 .orange{background: orange}
14 .w{width: 200px}
15 .opa{opacity: 0.5}
16 </style>
17 </style>
18 </head>
19 <body>
20
21 <ol>
22 <li>1</li>
23 <li>2</li>
24 <li>3</li>
25 <li>4</li>
26 <li>5</li>
27 </ol>
28 <input id="btn1" type="button" value="添加类">
29 <input id="btn2" type="button" value="删除类">
30 <input id="btn3" type="button" value="切换类"> <script type="text/javascript">
31 $(function(){
32 $('#btn1').click(function(){
33 $('li').addClass('red w opa')
34 })
35 $('#btn2').click(function(){
36 $('li').removeClass('opa w red')
37 })
38 $('#btn3').click(function(){
39 $('li').toggleClass('red')
40 //所谓"切换"，就是如果该元素上已存在指定的类名，则移除掉；如果不存在，则添加该类名。
41 })
42 })
43 </script>
44 </body>
45 </html>
11-5
1 <!DOCTYPE html>
2 <html lang="en">
3 <style>
4 </style>
5 <head>
6 <meta charset="UTF-8">
7 <title>演示文档</title>
8 <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
9 <style>
10 li{margin-top: 10px}
11 .li_1{background: red;}
12 .li_2{background: blue;}
13 .li_3{background: orange}
14 .red{background: red;}
15 .blue{background: blue;}
16 .orange{background: orange}
17 .w{width: 200px}
18 .opa{opacity: 0.5}
19 </style>
20 </style>
21 </head>
22 <body>
23
24 <ol>
25 <li class="li_"></li>
26 <li class="li_"></li>
27 <li class="li_"></li>
28 </ol>
29 <input id="btn1" type="button" value="切换类1">
30 <input id="btn2" type="button" value="切换类2">
31 <input id="btn3" type="button" value="切换类3">
32 <script type="text/javascript">
33 $(function(){
34 var count=0;
35 $('#btn1').click(function(){
36 //$('li').toggleClass('red',true)
37 count++
38 alert(count)
39 $('li').toggleClass('red',count%3==0)
40 })
41 $('#btn2').click(function(){
42 $('li').toggleClass(function(index,className){
43 alert(className+(index+1))
44 return className+(index+1)
45 })
46 })
47
48 $('#btn3').click(function(){
49 //$('li').toggleClass('red',false)
50 })
51 })
52 </script>
53 </body>
54 </html>
我的旨在学过的东西不再忘记（主要使用艾宾浩斯遗忘曲线算法及其它智能学习复习算法）的偏公益性质的完全免费的编程视频学习网站： fanrenyi.com；有各种前端、后端、算法、大数据、人工智能等课程。
一些博文中有一些参考内容因时间久远找不到来源了没有注明，如果侵权请联系我删除。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
