DOM操作之属性和样式操作
在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);
})
