一、自定義html標(biāo)簽屬性

對于html文件中的html標(biāo)簽，可以自定義屬性，如：

<a href="#" id="link1" action="delete">刪除</a>

上面的標(biāo)簽a并沒有action屬性（也就是說w3c定義中沒有給a標(biāo)簽定義action屬性），但有href ,id 屬性。

但我們一樣可以給它加自己需要的屬性，如這里的action。這個(gè)在很多場合下還是有用的，特別是當(dāng)需要給標(biāo)簽來設(shè)置某些特性時(shí)。

我們看到很多的框架，如bootstrap都給html標(biāo)簽定了各種自定義屬性。

二、獲取html標(biāo)簽的屬性

方法一：利用dom對象來獲取

如： $("#link1")[0].id ,

或 $("#link1")[0]["id"]

注意：對于自定義屬性，無法利用dom對象來獲取，比如 $("#link1")[0].action 是獲取不到值的?？梢岳孟旅娼榻B的attr方法來獲取。

方法二：利用jquery對象的 attr 或 prop方法

jquery的prop方法是jquery1.6版本引入的，那什么時(shí)候使用 prop方法，什么時(shí)候使用attr方法呢？

這個(gè)還真有些區(qū)別。經(jīng)過實(shí)際的測試，發(fā)現(xiàn)如下使用比較好。

對于標(biāo)簽的固有屬性（也就是說w3c給該標(biāo)簽定義的屬性），建議用prop方法。 如 var id = $("#link1").prop("id"); 獲取標(biāo)簽a的id屬性。

對于上述在html文件中靜態(tài)添加的自定義屬性，建議用attr方法。如 varaction = $("#link1").attr("action"); 獲取標(biāo)簽a的自定義action屬性。因?yàn)榻?jīng)過測試發(fā)現(xiàn)，對于這種自定義屬性，調(diào)用prop方法無法獲取。如果想深入研究下，建議看下jquery的源代碼就清楚了。

三、動態(tài)設(shè)置html標(biāo)簽的屬性

我們知道，html文件的每個(gè)標(biāo)簽，在瀏覽器內(nèi)存中實(shí)際對應(yīng)一個(gè)dom對象。html頁面開發(fā)中的Js代碼實(shí)際就是對dom對象的處理。

這樣我們可以利用js代碼動態(tài)的來給dom對象設(shè)置屬性。

也有兩種方法：

第一種方法時(shí)，獲取dom對象（注意不是jquery對象），如同給普通的js對象一樣，給其添加或設(shè)置屬性。

第二種方法，調(diào)用jquery對象的方法，給其對應(yīng)的dom對象添加和設(shè)置屬性。

經(jīng)過測試我們發(fā)現(xiàn)，如果要動態(tài)添加一個(gè)新的屬性，需要利用prop方法，使用attr方法是無效的。如 $("#link1").prop("mydata","demo")

如果該屬性是通過在html文件中靜態(tài)添加的自定義的屬性，則修改其值時(shí)只能用attr方法。

如果該標(biāo)簽已經(jīng)有某個(gè)靜態(tài)添加的自定義的屬性，這時(shí)用prop方法添加一個(gè)屬性，則不會影響原來的靜態(tài)屬性。但原來的靜態(tài)屬性只能用attr方法去讀寫，而用prop方法添加的屬性只能用prop方法去讀寫。

可以看出，attr方法和prop方法還是有很多區(qū)別的。

對于自定義屬性，靜態(tài)設(shè)置和動態(tài)設(shè)置有較大差別，動態(tài)添加自定義屬性只能用prop方法（包括添加、讀取和修改），而靜態(tài)自定義屬性后續(xù)的讀取和修改只能用attr方法。并且靜態(tài)設(shè)置的自定義屬性和動態(tài)設(shè)置的自定義屬性是互不干涉的。對于標(biāo)簽的固定屬性，讀寫都應(yīng)該用prop方法。

四、動態(tài)刪除html元素的屬性

對于靜態(tài)自定義的html屬性，可以利用jquery對象的 removeAttr 方法來刪除屬性，如$("#link1").removeAttr("action"); 就刪除了action自定義屬性。

如果是利用prop方法動態(tài)添加的自定義屬性，則需要調(diào)用jquery的 removeProp方法來刪除。

對于固定屬性，則也需要調(diào)用jquery的 removeProp方法來刪除。

五、小結(jié)

經(jīng)過上面的介紹可以看出。 attr和prop方法是有區(qū)別的，并且容易混淆。這里總結(jié)下：

1、如果沒有靜態(tài)自定義的屬性。則不管是否會動態(tài)設(shè)置固定屬性或動態(tài)屬性。都應(yīng)該用 prop方法，刪除也用removeProp方法。

2、對于靜態(tài)自定義的屬性，則用attr方法和removeAttr來操作。

如果同時(shí)有靜態(tài)自定義屬性和動態(tài)自定義屬性，則使用時(shí)要小心區(qū)別。并且要注意的是，隨著jquery版本的區(qū)別，prop和attr方法的含義也可能會有變化。

總結(jié)

以上是生活随笔為你收集整理的Jquery学习笔记： attr和 prop的区别，以及为html标签自定义属性的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。