一：
在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表示绑定匹配到的最后一个span46 $(‘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>
