操縱DOM之---attr 獲取與設定屬性的值
阿新 • • 發佈：2019-02-12
在使用JavaScript編寫網頁程式碼的過程中，多數時間都在操縱DOM，比如Ajax返回json資料、動態地向DOM新增顯示節點或者是動態地更改頁面上元素的CSS和屬性等。DOM的全稱是Document Object Model，即文件物件模型，是一種與瀏覽器、平臺和語言無關的介面，它可以讓使用者程式碼訪問任何瀏覽器中呈現的元素，可以將DOM看作是網頁呈現的一種標準。
attr 獲取與設定屬性的值
要使用jQuery操縱DOM，必須先使用選擇器選中一個或多個元素，由於jQuery是對結果集進行隱式迭代的操作，因此一個jQuery物件可以同時對多個元素進行屬性更改。
獲取屬性值
獲取 和設定屬性使用jQuery的attr方法，而移除屬性使用removeAttr方法
獲取元素屬性的attr語法如下所示：
$(selector).attr(attribute)
//其中selector是jQuery的選擇器，attr中的引數attribute是指定要獲取的元素的屬性名稱，舉個簡單的例子，要想獲取影象的地址，可以使用如下語句：
$("img").attr("src");
《獲取屬性 的HTML DEMO》
<body>
<ul id="nav">
<li><a href="http://www.xxx.com/companyinfo" 要設定元素的屬性，同樣使用attr函式，語法如下：
html 還是使用上面的
$(selector).attr(attribute,value)
<!--其中attribute用來指定屬性的名稱，value用來指定屬性的值。-->
<script type="text/javascript">
$(document).ready(function (e) {
$('#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屬性
});
});
</script>
可以看到，使用attr設定屬性是使用"屬性名稱","屬性值"匹配的語句，
attr還可以同時設定兩個以上的屬性值
如下面的程式碼所示：
//同時設定兩個屬性的值
$("#company_info").attr({
"href":"http://www.microsoft.com/",
"title":"歡迎進入微軟公司網站"
});
//可以看到，通過屬性名/值對的方式，示例同時為href和title這兩個屬性設定了屬性值