微信扫一扫打赏支持

js进阶 11-4/5 jquery中css的类的操作有哪些

js进阶 11-4/5  jquery中css的类的操作有哪些

一、总结

一句话总结：jquery中css的类的操作有增删切三种。

 

1、jquery中css的类的操作有哪些？

增删切三种

  1. addClass() - 向被选元素添加一个或多个类
  2. removeClass() - 从被选元素删除一个或多个类
  3. 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)

  1. classname 必需。规定添加或移除的一个或多个类名。如需规定若干个类，请使用空格分隔类名。
  2. function(index,currentclass) 可选。规定返回需要添加/删除的一个或多个类名的函数。
    1. index - 返回集合中元素的 index 位置。
    2. currentclass - 返回被选元素的当前类名。
  3. 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种情况

  1. addClass() - 向被选元素添加一个或多个类
  2. removeClass() - 从被选元素删除一个或多个类
  3. toggleClass() - 对被选元素进行添加/删除类的切换操作

    $(selector).toggleClass(classname,function(index,currentclass),switch)

    1. classname 必需。规定添加或移除的一个或多个类名。如需规定若干个类，请使用空格分隔类名。
    2. function(index,currentclass) 可选。规定返回需要添加/删除的一个或多个类名的函数。
      1. index - 返回集合中元素的 index 位置。
      2. currentclass - 返回被选元素的当前类名。
    3. 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>

 

 

 

 

 

 

 

 

 

 
posted @ 2018-06-19 11:38  范仁义  阅读(366)  评论(0)  编辑  收藏  举报