牛牛生肖配

書名： 15天學會jQuery編程與實戰（視頻教學版）（Web前端技術叢書）
作者名：劉鑫
本章字數： 575字
更新時間： 2020-11-28 16:21:45

3.2 獲取或設置元素的屬性

獲取和設置屬性使用jQuery的attr方法，而移除屬性使用removeAttr方法。獲取元素屬性的attr方法的語法如下：

$(selector).attr(attribute)

其中，selector是jQuery的選擇器，attr中的參數attribute是指定要獲取的元素的屬性名稱。舉個簡單的例子，要想獲取圖像的地址，可以使用如下語句：

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

【示例3-2】get_set_attributes.html

        01    <body>
        02    <ul id="nav">
        03    <li><a  id="company_info" title="
    介紹公司的相關資訊04  ">
        05   公司信息</a></li>
        06    <li><a  id="product_info" title="
    公司的產品信息">
        07   產品簡介</a></li>
        08    <li><a  id="culture_info"
    title="公司的文化信息">
        09   公司文化</a></li>
        10   <li><a  id="contactus" title="聯系方式
    ">聯系我們</a>
        11    </li></ul>
        12    <div id="content"></div>
        13   <! --屬性信息顯示如下-->
        14    <div id="attr_info">
        15   <input id="btn_getAttr" type="button" value="顯示屬性信息">
        16    </div>
        17    </body>

在這里構建了一個菜單，用作網站的導航欄。id為btn_getattr的按鈕將獲取頁面上DOM的不同屬性值，代碼如下：

        <script type="text/javascript">
          $(document).ready(function(e) {
              $("#btn_getAttr").click(function(e) {
            var str="<br\>"+$("#company_info").attr("title");
                                                  //顯示id為company_info的title屬性值
            str+="<br\>"+$("#product_info").attr("href");
                                                  //顯示id為product_info的href屬性值
            str+="<br\>"+$("#culture_info").attr("id");
                                                  //顯示id為culture_info的id屬性值
            str+="<br\>"+$("#btn_getAttr").attr("value");
                                                  //顯示id為btn_getAttr的value屬性值
              $("#attr_info").append(str);        //在div中顯示屬性的值
            });
          });
        </script>

在示例代碼中，使用attr分別獲取4個HTML元素的屬性值，并保存到str字符串中。通過運行可以看到，不同屬性值已經成功顯示到了頁面上。

設置和獲取的方法是一樣的。下面為上述案例添加一個按鈕，在jQuery的頁加載事件中通過如下代碼設置DOM元素的屬性：

        $("#btn_setAttr").click(function(e) {
              $("company_info").attr("title", "公司的發展歷程和發展經驗"); //設置title屬性
            $("#product_info").attr("href", "http://www.microsoft.com");
        //設置href屬性
              $("#culture_info").attr("id", "btn_culture_info");       //設置id屬性
              $("#contactus").attr("title", "歡迎聯系我們來獲取更多信息");
                                                              //設置聯系人的title屬性
            });

可以看到，使用attr設置屬性是使用“屬性名稱：屬性值”匹配的語句，attr可以同時設置兩個以上的屬性值，代碼如下：

            //同時設置兩個屬性的值
           $("#company_info").attr({
            "href":"http://www.microsoft.com/",
            "title":"歡迎進入微軟公司網站"
           });

可以看到，通過屬性名/值對的方式，示例同時為href和title兩個屬性設置了屬性值。本示例效果如圖3.3所示。

圖3.3 獲取元素的屬性值

官术网_书友最值得收藏!

15天學會jQuery編程與實戰（視頻教學版） （Web前端技術叢書）

3.2 獲取或設置元素的屬性

15天學會jQuery編程與實戰（視頻教學版）（Web前端技術叢書）