js setAttribute與jquery中attr用法對比

根據大體上的意思我感覺js setAttribute與jquery中attr工作是完全一樣的，只是jquery中簡寫了並且工能更強大了，下面我來分別介紹一下他們的用法。

 

setAttribute(string name, string value)：增加一個指定名稱和值的新屬性，或者把一個現有的屬性設定為指定的值。
1、樣式問題

setAttribute("class", value)中class是指改變"class"這個屬性，所以要帶引號。
vName代表對樣式賦值。

例如:

 代碼如下

var input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("name", "q");
input.setAttribute("class",bordercss);

輸出時：<input type="text" name="q" class="bordercss">,即，input控件具有bordercss樣式屬性
注意：class屬性在W3C DOM中扮演着很重要的角色，但由於瀏覽器差異性仍然存在。
使用setAttribute("class", vName)語句動態設置Element的class屬性在firefox中是行的通的，但在IE中卻不行。因為使用IE內核的瀏覽器不認識"class"，要改用"className"；
同樣，firefox 也不認識"className"。所以常用的方法是二者兼備：

 代碼如下

element.setAttribute("class", value); //for firefox
element.setAttribute("className", value); //for IE

2、方法屬性等問題

例如：

 代碼如下

var bar = document.getElementById("testbt");
bar.setAttribute("onclick", "javascript:alert('This is a test!');");

這里利用setAttribute指定e的onclick屬性，簡單，很好理解。
但是IE不支持，IE並不是不支持setAttribute這個函數，而是不支持用setAttribute設置某些屬性，例如對象屬性、集合屬性、事件屬性，也就是說用setAttribute設置style和onclick這些屬性在IE中是行不通的。
為達到兼容各種瀏覽器的效果，可以用點符號法來設置Element的對象屬性、集合屬性和事件屬性。

 代碼如下

document.getElementById("testbt").className = "bordercss";
document.getElementById("testbt").style.cssText = "color: #00f;";
document.getElementById("testbt").style.color = "#00f";
document.getElementById("testbt").onclick= function () { alert("This is a test!"); }

在不同瀏覽器上的不同表現

一、setAttribute的問題

elementNode為<tr>...</tr>

希望對其增加一個單擊行的事件處理函數， 
寫法1： 
table1row1.setAttribute("onclick", "selectrow1(this)"); 
IE8, Firefox, google chrome 能正確觸發click 事件 
IE6，IE7則不能觸發click 事件。 
寫法2： 
table2row1.onclick = function() { selectrow2(this) }; 
所有測試瀏覽器均能觸發click 事件

故為了兼容在不同的IE中，我們可以統一使用如下語句。 
table2row1.onclick = function() { selectrow2(this) };

jquery 定義和用法

attr() 方法設置或返回被選元素的屬性值。

根據該方法不同的參數，其工作方式也有所差異。
返回屬性值
返回被選元素的屬性值。

語法

$(selector).attr(attribute)參數 描述

設置多個屬性/值對

為被選元素設置一個以上的屬性和值。

語法

$(selector).attr({attribute:value, attribute:value ...})參數 描述 
attribute:value 規定一個或多個屬性/值對。

attribute 規定要獲取其值的屬性。

用法一: $(選擇器).attr(屬性名) 它的作用就是獲取指定元素( $(選擇器)部分 )的指定屬性的值. 看例子:

有這樣一段html:

 

 代碼如下

<img src=“/lpic/s3791510.jpg” alt=“變形金剛海報” width=“500″ height=“300″ />

 

那么你要獲取到圖片的地址該怎么辦呢? 這樣: $(”img”).attr(”src”) 就這么簡單, 你用alert或者其它形式輸出一下就看到圖片的地址了. 那么我要取得圖片的描述呢? 這樣: $(”img”).attr(”alt”) .夠簡單吧. 它不但可以取到html本身有的屬性, 而且也能取到你自己定義的屬性, 比如上例中的 funny屬性, 自己試試能不能獲取到它的值. 注意: 如果你要獲取的屬性是不存在的, 那么jquery就會返回一個 undefined .

用法二: $(選擇器).attr(屬性名, 屬性值) 它的作用是為所有匹配的元素設置一個屬性值。

假如頁面中有一堆這樣的html:

 代碼如下

 

<img /><img />

 

我們寫一句這樣的jquery代碼: $(”img”).attr(”src”,”http://t.douban.com/lpic/s3791510.jpg”) 這樣上面一堆無意義的img標簽就變成了:

 代碼如下

 
<img src=“/s3791510.jpg” /><img src=“/s3791510.jpg” />

 

很容易理解吧. 假如我們想給圖片設置高度,那么只要 $(”img”).attr(”height”,”300″) . 再要設置寬度就這樣: $(”img”).attr(”width”,”500″) . 如此看來是沒有什么問題, 但是當要設置多個屬性時, 一個一個的這樣寫真是太麻煩了, 那么我們來看第三個用法.

用法三: $(選擇器).attr(Map) 它的意思就是給指定元素設置多個屬性值, 我們重點看一下 Map 是什么意思. 它其實是這樣一種序列:

{屬性名一: “屬性值一” , 屬性名二: “屬性值二” , … … }

那么我要實現用法二中的例子只要這樣寫:

 代碼如下

$(“img”).attr({src:“/s3791510.jpg” , height: “300″ , width : “500″})

以上我們學會了獲取屬性值, 設置屬性值, 那么怎么刪除屬性呢?

jquery中刪除屬性的關鍵詞是: removeAttr 注意A是大寫的. 看看怎么用的:

同樣是用法一中的html代碼, 我想刪掉圖片的高度屬性, 那么就這樣:

$(“img”). removeAttr(“height”);

嗯,就這么簡單.  attr 其實就是原生js中 getAttribute 的簡化實現, 而removeAttr 就是 removeAttribute 的簡寫了

例子

 

 

 代碼如下

<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 
//$('div.chapter a').attr({'rel':'external'}); 
$('div.chapter a').each(function(index){ 
var $linkthis=$(this) 
$linkthis.attr({ 
'rel':'external', 
'id':'wikilink-'+index, 
'title':'你好，現在在試驗'+$linkthis.text() 
}); 
}); 
$('#wikilink-1').css('fontSize',33); 
}); 
</script>

 

 

原文鏈接：http://www.android100.org/html/201405/24/13308.html