一：
在HTML文件中，CSS（Cascading Style Sheet，层叠样式表）用于格式化元素。jQuery提供了用于操作CSS的方法。
1：css()方法:
css()方法可获取或设置CSS样式。
2:CSS类操作方法
jQuery提供了直接操作元素class属性的方法。
• addClass()：添加类。
• removeClass()：删除类。
• toggleClass()：切换类。若元素无指定类，则为其添加该类；若有指定类，则将其删除。
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>css样式操作</title> 7 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"> 8 </script> 9 <style type="text/css"> 10 .b { 11 border: 1px solid red; 12 padding: 5px; 13 } 14 15 .c { 16 background-color: turquoise; 17 } 18 19 .bc { 20 background-color: red; 21 } 22 </style> 23 </head> 24 <script> 25 $(function() { 26 /* 27 $('div:lt'):选中div标签的下标不大于2的div。:lt(index)基本筛选器 28 */ 29 $('#btn1').click(function() { 30 $('div:lt(2)').css({ 31 padding: '6px', 32 margin: '5px' 33 }) 34 }) 35 $('#btn2').click(function() { 36 $('#out').text($('div').css('borderTopWidth')) //获取样式 37 }) 38 $('#btn3').click(function() { 39 //添加css样式(添加css类) 40 $('span').addClass('b c') 41 }) 42 $('#btn4').click(function() { 43 /* 44 removeClass删除类 45 $('span:last'):last表示绑定匹配到的最后一个span 46 $('span:first') 47 */ 48 $('span:last').removeClass('c') 49 }) 50 $('#btn5').click(function() { 51 //toggleClass切换类. 52 $('span').toggleClass('bc') 53 }) 54 }) 55 </script> 56 57 <body> 58 <div>文本1</div><br> 59 <div>文本2</div><br> 60 <span id="s1">span文本1</span> 61 <span id="s2">span文本2</span><br> 62 <button id="btn1">设置样式</button><br> 63 <button id="btn2">查看样式</button><br> 64 <button id="btn3">添加样式</button><br> 65 <button id="btn4">删除样式</button><br> 66 <button id="btn5">切换样式</button><br> 67 <div id="out"></div> 68 </body> 69 70 </html>