在DOM操作，除了前面的節點操作以外，常常被用到的操作還有屬性操作和節點操作，下面，主要來總結一下jQuery中的屬性操作方法和樣式操作方法。
在開始操作前，我們需要先在html中添加如下代碼，后面所有的操作都是基於該DOM結構進行的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<style>
.red{
color:red;
}
.blue{
color:blue;
}
.yellow{
color:yellow;
}
</style>
</head>
<body>
<p title="選擇你最喜歡的水果">你最喜歡的水果是？</p>
<ul>
<li title='蘋果' class="red">蘋果</li>
<li title='香蕉'>香蕉</li>
<li title='荔枝'>荔枝</li>
</ul>
<script>
</script>
</body>
</html>
屬性操作
獲取和設置屬性
在前面我們提到過一個方法attr()，通過給該方法添加一個參數（屬性名稱），可以獲取相應信息。
$(function(){
var txt = $("ul li:eq(1)").attr("title");
console.log(txt);
})
當給該方法傳遞多個參數時，可以用來設置相關屬性。
$(function(){
$("ul li:eq(1)").attr("title","最喜歡的水果");
$("ul li:eq(2)").attr({"title":"水果","name":"荔枝"});
})
刪除屬性
在jQuery中，使用removeAttr()方法刪除某個元素的特點屬性。
$(function(){
$("p").removeAttr("title");
})
樣式操作
獲取和設置樣式
因為class也是和title一樣，也屬於元素的屬性，所以，我們可以使用attr()來獲取和設置元素的class。
$(function(){
var txt1 = $("ul li:eq(0)").attr("class");
console.log(txt1);
$("ul li:eq(0)").attr("class","blue");
var txt2 = $("ul li:eq(0)").attr("class");
console.log(txt2);
})
使用attr()方法設置樣式時，新的樣式覆蓋了之前的樣式。
添加樣式
有的時候，我們希望為某個元素添加樣式，但是又不覆蓋之前原有的樣式，很明顯，attr()並不能滿足我們的要求，這個時候，我們需要用到一個新的方法addClass()，該方法是在不改變原有樣式的基礎上，在后面添加新的樣式。
$(function(){
var txt1 = $("ul li:eq(0)").attr("class");
console.log(txt1);
$("ul li:eq(0)").addClass("blue");
var txt2 = $("ul li:eq(0)").attr("class");
console.log(txt2);
})
移除樣式
在上面，我們知道可以用removeAttr()方法刪除元素的屬性，自然，這個方法可以用來刪除元素的樣式。
$(function(){
$("ul li:eq(0)").removeAttr("class");
})
除了刪除屬性的方法外，jQuery中，還有一個專門用來刪除元素樣式的方法：removeClass()，參數為需要刪除的類名，該方法可以同時刪除一個或多個樣式，多個類名中間用空格間隔即可，當該方法不帶參數時，表明要刪除該元素的所有方法。
$(function(){
$("ul li:eq(0)").removeClass("red");
})
判斷是否含有某個樣式
hasClass()方法可以用來判斷元素中是否含有某個class，如果有，返回true，否則，返回false。
$(function(){
var txt1 = $("ul li:eq(0)").hasClass("red");
var txt2 = $("ul li:eq(1)").hasClass("red");
console.log(txt1);
console.log(txt2);
})
