jq中的類樣式操做與html5中的類樣式操做的對比

時間 2019-12-13

原文原文鏈接

衆所周知jq支持對元素的類樣式操做,可是html5中也新增了對元素的類樣式操做,而且用起來也很方便,下面咱們就直接上代碼來感覺一下.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>樣式操做的對比</title>
 8     <style>
 9     .add{
10         color:red;
11     }
12     .remove{
13         color:blue;
14     }
15     .toggle{
16         color:purple;
17     }
18     .isHas{
19         color:green;
20     }
21     </style>
22     <script src="./jquery-3.2.1.js"></script>
23 </head>
24 <body>
25     <ul id="ul">
26         <li class=''>1.添加的樣式</li>
27         <li class='remove'>2.移除的樣式</li>
28         <li class='toggle'>3.切換的樣式</li>
29         <li class='isHas'>4.判斷是否有的樣式</li>
30     </ul>
31     <div id="dv">
32         <input type="button" name="" value="添加">
33         <input type="button" name="" value="移除">
34         <input type="button" name="" value="切換">
35         <input type="button" name="" value="判斷">
36     </div>
37 </body>
38 <script>    
39     //1.jq實現操做類樣式
40     // $('#dv input:eq(0)').click(function (){
41     //         $('#ul li:eq(0)').addClass('add');
42     // })
43     // $('#dv input:eq(1)').click(function (){
44     //         $('#ul li:eq(1)').removeClass('remove');
45     // })
46     // $('#dv input:eq(2)').click(function (){
47     //         $('#ul li:eq(2)').toggleClass('toggle');
48     // })
49     // $('#dv input:eq(3)').click(function (){
50     //       var qq =  $('#ul li:eq(3)').hasClass('isHas');
51     //         console.log(qq);   //(有返回值)
52     // }) 
53 
54     // ============================================
55 
56     //2.html5實現操做類樣式
57     // $('#dv input:eq(0)').click(function (){
58     //         $('#ul li:eq(0)')[0].classList.add('add');
59     // })
60     // $('#dv input:eq(1)').click(function (){
61     //         $('#ul li:eq(1)')[0].classList.remove('remove');
62     // })
63     // $('#dv input:eq(2)').click(function (){
64     //         $('#ul li:eq(2)')[0].classList.toggle('toggle');
65     // })
66     // $('#dv input:eq(3)').click(function (){
67     //        var qq = $('#ul li:eq(3)')[0].classList.contains('isHas');
68     //        console.log(qq);  //(有返回值)
69     // })
70 
71     // 補充:className是原生的jsDOM方法
72 
73 </script>
74 </html>