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);

 })