众所周知jq支持对元素的类样式操作,但是html5中也新增了对元素的类样式操作,并且用起来也很方便,下面我们就直接上代码来感受一下.
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>
以上代码可以直接复制查看效果.对比非常直观;
