jQuery属性操作之html属性操作

jQuery的属性操作， 是对html文档中的属性进行读取、设置和移除操作。比如，attr()、 removeAttr()。

1. attr()

attr()可以设置属性值或者返回被选元素的属性值

1.1 使用attr()获取值

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>attr()获取值</title>
     <script type="text/javascript" src="jquery.js"></script>
     <script>

          $(function () {
              var cla = $("div").attr("class");
              console.log(cla);
              var id = $("div").attr("id");
              console.log(id);
          })

     </script>
 </head>
 <body>
     <div class="divClass" id="divId"></div>
 </body>
 </html>

结果为：

1.2 使用attr()设置值

　　1.2.1 使用attr()设置一个值

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>attr() Demo</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
        $(function () {
            $("div").attr("class", "box");
        })
    </script>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>

结果显示为：

　　1.2.2 使用attr()设置多个值

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>attr() Demo</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
        $(function () {
            $("div").attr({
                "class": "divClass",
                "id": "divId"
            });
        })
    </script>
</head>
<body>
    <div></div>
</body>
</html>

设置效果为:

2. removeAttr()

移除属性

2.1 删除单个属性

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>removeAttr() Demo</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
        $(function () {
            $("div").removeAttr("class");
            $("div").removeAttr("id");
        })
    </script>
</head>
<body>
    <div class="divClass" id="divId"></div>
</body>
</html>

设置效果为：

2.2 removeAttr()设置多个属性值

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>removeAttr() Demo</title>
     <script type="text/javascript" src="jquery.js"></script>
     <script>
         $(function () {
             $("div").removeAttr("class id");
         })
     </script>
 </head>
 <body>
     <div class="divClass" id="divId"></div>
 </body>
 </html>

显示结果为：