在 jQuery 中，可以对元素的属性执行获取、设置、删除的操作，通过 attr() 方法可以对元素属性执行获取和设置操作，而 removeAttr() 方法则可以轻松删除某一指定的属性。

 

一.获取元素的属性

获取元素属性的语法格式如下：



attr(name)



其中，参数 name 表示属性的名称。以下示例将介绍如何通过调用 attr() 方法，以元素属性名称为参数的方式，来获取元素的属性的过程。



<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>获取元素的属性 </title>
    <script type="text/javascript" src="Jscript/jquery-1.8.2.min.js">  </script>
    <style type="text/css">
        body {
            font-size: 12px
        }

        div {
            float: left;
            padding-left: 10px
        }

        img {
            border: solid 1px #ccc;
            padding: 3px;
            float: left
        }
    </style>
    <script type="text/javascript">
        $(function () {
            var strAlt = $("img").attr("src");                   //属性值一
            strAlt += "<br/><br/>" + $("img").attr("title");     //属性值二
            $("#divAlt").html(strAlt);                           //显示在页面中
        })
    </script>
</head>

<body>
    <img alt="" title="这是一幅风景画 " src="Images/img01.jpg" /> <div id="divAlt"></div>
</body>

</html>



 

二.设置元素的属性

在页面中，attr() 方法不仅可以获取元素的属性值，还可以设置元素的属性，其设置属性语法格式如下所示：



attr(key, value)



其中，参数 key 表示属性的名称，value 表示属性的值。如果要设置多个属性，也可以通过attr() 方法实现，其语法格式如下所示：



attr({key0:value0, key1:value1})



下面示例说明如何通过 attr(name,value) 的方式设置元素的属性。



<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>设置元素的属性 </title>
    <script type="text/javascript" src="Jscript/jquery-1.8.2.min.js">  </script>
    <style type="text/css">
        body {
            font-size: 12px
        }

        .clsSpn {
            float: left;
            padding-top: 10px;
            padding-left: 10px
        }

        .clsImg {
            border: solid 1px #ccc;
            padding: 3px;
            float: left
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("img").attr("src", "Images/img01.jpg");    //设置 src属性  
            $("img").attr("title", "这是一幅风景画 ");     //设置 title属性  
            $("img").attr({ src: "Images/img02.jpg", 
                            title: "这是一幅风景画 " });   //同时设置两个属性  
            $("img").addClass("clsImg");                 //增加样式
            $("span").html("加载完毕 ");                  //显示加载状态
        })
    </script>
</head>

<body>
    <img alt="" src="Images/img03.gif" style="float:left" /> 
    <span class="clsSpn">正在加载图片 ...</span>
</body>

</html>



attr() 方法还可以绑定一个 function() 函数，通过该函数返回的值作为元素的属性值，其语法格式如下所示：



attr(key, function(index))



其中，参数 index 为当前元素的索引号，整个函数返回一个字符串作为元素的属性值。下面我们通过示例介绍。



<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>设置元素的属性 </title>
    <script type="text/javascript" src="Jscript/jquery-1.8.2.min.js">  </script>
    <style type="text/css">
        body {
            font-size: 12px
        }

        .clsSpn {
            float: left;
            padding-top: 10px;
            padding-left: 10px
        }

        .clsImg {
            border: solid 1px #ccc;
            padding: 3px;
            float: left
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("img").attr("src", function() {
                return "Images/img0" + Math.floor(Math.random() * 2 + 1) + ".jpg" });    //设置 src属性
            $("img").attr("title", "这是一幅风景画 ");                                   //设置 title属性
            $("img").addClass("clsImg");                                                //增加样式
        })
    </script>
</head>

<body>
    <img alt="" src="Images/img03.gif" style="float:left" /> 
    <span class="clsSpn">正在加载图片 ...</span>
</body>

</html>



 

三.删除元素的属性

jQuery 中通过 attr() 方法设置元素的属性后，使用 removeAttr() 方法可以将元素的属性删除，其使用的语法格式为：



removeAttr(name)



其中，参数 name 为元素属性的名称。例如，可以通过如下代码删除标记 <img> 中的 src属性：



$("img").removeAttr("src");