在jQuery中，關於元素的樣式操作方法共有2種：
這一節我們先來學習CSS屬性操作的方法。在jQuery中，我們可以使用css()方法為獲取或設置某個元素的CSS屬性的值。
語法：
$().css("屬性")
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
p
{
color:Red;
background-color:#F1F1F1;
font-weight:bold;
}
</style>
<script src="jquery-1.12.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
var str = $("p").css("color");
alert("p元素的color屬性值是：" + str);
})
})
</script>
</head>
<body>
<p> 學習網jQuery入門教程</p>
<input id="btn" type="button" value="獲取"/>
</body>
</html>
在浏覽器預覽效果如下：
分析：
$("#btn").click(function(){……})表示按鈕的鼠標單擊事件，接觸過JavaScript的同學一看就懂了。這也是為什麼我在之前強調，一定要有JavaScript基礎再來學習jQuery。當然關於jQuery各種事件處理，我們在後續章節也會有詳細介紹。
$("p").css("color")表示獲取p元素的color屬性值。其中，當我們點擊“獲取”按鈕，浏覽器會彈出如下對話框：
設置某個元素的CSS屬性值，分為2種情況：（1）設置單個CSS屬性；（2）設置多個CSS屬性。
語法：
$().css("屬性","屬性值")
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.12.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
$("ul li:nth-child(odd)").css("color","red");
})
})
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>ASP.NET</li>
</ul>
<input id="btn" type="button" value="設置" />
</body>
</html>
在浏覽器預覽效果如下：
當我們點擊“設置”按鈕之後，在浏覽器預覽效果如下：
分析：
$("ul li:nth-child(odd)").css("color","red")這句代碼中使用了子元素偽類選擇器，表示選取ul元素下的奇數個li元素，然後設置color屬性值為red。
語法：
$().css({"屬性1":"屬性值1","屬性2":"屬性值2",……})
說明：
但我們為元素同時設置多個CSS屬性值時，應該用{}括起來，並且屬性與屬性值以“鍵值對”的形式，每個鍵值對之間用英文逗號隔開。這種 “鍵值對”的形式，跟JSON數據格式、JavaScript對象的屬性形式是非常相似的。
當然我們也可以用這種方式為元素設置單個CSS屬性。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.12.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
$("ul li:nth-child(odd)").css("color","red");
})
})
</script>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>ASP.NET</li>
</ul>
<input id="btn" type="button" value="設置" />
</body>
</html>
在浏覽器預覽效果如下：
當我們點擊“設置”按鈕，在浏覽器預覽效果如下：
分析：
這裡使用css()方法為選取的元素同時設置多個CSS屬性值。
其實我們也可以使用這種形式為選取的元素設置單個CSS屬性。例如：
$("ul li:nth-child(odd)").css("color","red");
上述這句代碼等價於：
$("ul li:nth-child(odd)").css({"color":"red"});