Jquery獲取自定義屬性(attr和prop)

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="/js/jq1.3.2.js"></script>
</head>
<body>
<div lang="rrery"> </div>
 <div data-url="rrery"> </div>
       <div data-url="rrrrrrrrrrrrrrttttttttttttttttttttttgggggggggggggggggggggg"> </div>
    <div data-url="rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrtttttttttttttttttttttttttttt777777777777777777777777777777777778888888888455rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrtttttttttttttttttttttttttttt777777777777777777777777777777777778888888888888"> </div>
</body>
</html>
<script>
   // var J = $("div[lang]").get();
   // alert($("[data-url]:eq(2)").attr("data-url"));
    $("[data-url]").each(function () {
        alert($(this).attr("data-url"));
    });

//    $("[data-url]").each(function () {
//        alert($(this).prop("data-url"));
//    }); 

</script>

附: jquery attr()方法

jquery中用attr()方法來獲取和設置元素屬性,attr是attribute（屬性）的縮寫，在jQuery DOM操作中會經常用到attr()，attr()有4個表達式。

1. attr(屬性名) //獲取屬性的值（取得第一個匹配元素的屬性值。通過這個方法可以方便地從第一個匹配元素中獲取一個屬性的值。如果元素沒有相應屬性，則返回 undefined ）

2. attr(屬性名, 屬性值) //設置屬性的值（為所有匹配的元素設置一個屬性值。）

3. attr(屬性名,函數值) //設置屬性的函數值（為所有匹配的元素設置一個計算的屬性值。不提供值，而是提供一個函數，由這個函數計算的值作為屬性值。）

4.attr(properties) //給指定元素設置多個屬性值，即：{屬性名一: “屬性值一” , 屬性名二: “屬性值二” , … … }。(這是一種在所有匹配元素中批量設置很多屬性的最佳方式。注意，如果你要設置對象的class屬性，你必須使用'className' 作為屬性名。或者你可以直接使用'class'或者'id'。)

示例代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery中attr()方法</title> <script src="js/jquery-1.4.2.min.js" language="javascript" type="text/javascript" ></script> <style> p{color:red} li{color:blue;} .lili{font-weight:bold;color:red;}

#lili{font-weight:bold;color:red;} </style> </head> <body> <p title="你最喜歡的水果是。">你最喜歡的水果是？</p> <ul> <li title="蘋果汁">蘋果</li> <li title="橘子汁" alt="123">橘子</li> <li title="菠蘿汁">菠蘿</li> </ul> <script> ... </script> </body> <html>

1.attr(name)//獲取屬性的值

1.1使用attr(name)獲取title值：

1.2使用attr(name)獲取alt值：

2. attr(name,value) //設置屬性的值

2.1使用attr(name,value)修改title值為：不吃橘子 <script> $("ul li:eq(1)").attr("title","不吃橘子"); alert($("ul li:eq(1)").attr("title")); </script>

3. attr(name,fn) //設置屬性的函數值

3.1把alt屬性的值設置為title屬性的值。 <script> $("ul li:eq(1)").attr("title",function(){ return this.alt}); alert($("ul li:eq(1)").attr("title")); </script>

4.attr(properties) //將一個“名/值”形式的對象設置為所有匹配元素的屬性

4.1獲取<ul>里第2個<li>設置title和alt屬性。 <script> $("ul li:eq(1)").attr({title:"不喝橘子汁",alt:"不是123"}); alert($("ul li:eq(1)").attr("title")); alert($("ul li:eq(1)").attr("alt")); </script>

4.2獲取<ul>里第2個<li>設置class。
<script>
$("ul li:eq(1)").attr({className:"lili"});
</script>

4.3獲取<ul>里第2個<li>設置id。
<script>
$("ul li:eq(1)").attr({id:"lili"});
</script>

4.4獲取<ul>里第2個<li>設置style。
<script>
$("ul li:eq(1)").attr({style:"color:red"});
</script>

在li中添加alt是錯誤的，它只能用在img、area和input元素中（包括applet元素）。對於input元素，alt屬性意在用來替換提交按鈕的圖片。在這里為了很詳細說明attr()方法，沒有合適的屬性，所有用了alt進行舉例，只供學習參考attr()方法用法。在此說明下alt和tite的區別。 alt：這是用以描述圖形的文字，當圖片無法顯示時，這些文字會替代圖片而被顯示。當鼠標移至圖片上該些文字亦會顯示。 title：是鼠標放上去之后，會顯示出來的文字。

那么怎么刪除屬性呢?

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

同樣是用法一中的html代碼, 我想刪掉li的title屬性, 那么就這樣:

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

那么是否有跟attr()相似的屬性呢？ jquery中val()與之類似， $(this).val();獲取某個元素節點的value值，相當於$(this).attr("value"); $(this).val(value);設置某個元素節點的value值，相當於$(this).attr("value",value);

jquery1.6中的.prop()和.attr()異同

最近在iteye的新聞中看到jQuery已經更新到了1.6.1。和之前版本的最大變化是增加了.prop方法。但是.prop()方法和.attr()方法，單從字面上很難區分。在漢語中properties和attributes都有表示“屬性”的意思。下面根據這篇博文（javascript:mctmp(0);），簡要翻譯了.prop()和.attr()的用法：

1、從1.5.2升級到1.6.1

通過介紹新方法.prop()以及.attr()方法的改變，jQuery1.6.1引起了一場關於attributes和properties之間有何區別和聯系的激烈討論。同時，1.6.1也解決了一些向后兼容性問題。當從1.5.2升級到1.6.1時，你不必修改任何attribute代碼。

下面是關於jQuery1.6和1.6.1中Attributes模塊變化的描述，以及.attr()方法和.prop()方法的首選使用。然而，正如前面所述，jQuery1.6.1允許你使用.attr()方法就像以前它被使用在所有的情況中一樣。

2、發生了什么變化

Attributes模塊的變化是移除了attributes和properties之間模棱兩可的東西，但是在jQuery社區中引起了一些混亂，因為在1.6之前的所有版本中都使用一個方法(.attr())來處理attributes和properties。但是老的.attr()方法有一些bug，很難維護。jQuery1.6.1對Attributes模塊進行了更新，並且修復了幾個bug。

特別提到的是，boolean attributes，比如：checked,selected,readonly和disabled在1.6.1中和1.6之前的處理相同。這意味着下面的代碼：

Js代碼

$(“:checkbox”).attr(“checked”, true);
$(“option”).attr(“selected”, true);
$(“input”).attr(“readonly”, true);
$(“input”).attr(“disabled”, true);

$(“:checkbox”).attr(“checked”, true);
$(“option”).attr(“selected”, true);
$(“input”).attr(“readonly”, true);
$(“input”).attr(“disabled”, true);

甚至是這樣的代碼：

Js代碼

if ( $(“:checkbox”).attr(“checked”) ) { /* Do something */ }

if ( $(“:checkbox”).attr(“checked”) ) { /* Do something */ }

在1.6.1中沒有必要為了保持之前期望的運行結果而發生任何改變。

為了讓jQuery1.6中的.attr()方法的變化被理解的清楚些，下面是一些使用.attr()的例子，雖然在jQuery之前的版本中能正常工作，但是現在必須使用.prop（）方法代替：

首先，window或document中使用.attr()方法在jQuery1.6中不能正常運行，因為window和document中不能有attributes。它們包含properties(比如：location或readyState)，必須使用.prop()方法操作或簡單地使用javascript原生的方法。在jQuery1.6.1中，window和document中使用.attr()將被自動轉成使用.prop，而不是拋出一個錯誤。

其次，checked,selected和前面提到的其它boolean attributes，因為這些attributes和其相應的properties之間的特殊關系而被特殊對待。基本上，一個attribute就是以下html中你看到的：

Js代碼

<input type=”checkbox” checked=”checked”>

<input type=”checkbox” checked=”checked”>

boolean attributes，比如：checked，僅被設置成默認值或初始值。在一個checkbox的元素中，checked attributes在頁面加載的時候就被設置，而不管checkbox元素是否被選中。

properties就是瀏覽器用來記錄當前值的東西。正常情況下，properties反映它們相應的attributes(如果存在的話)。但這並不是boolean attriubutes的情況。當用戶點擊一個checkbox元素或選中一個select元素的一個option時，boolean properties保持最新。但相應的boolean attributes是不一樣的，正如上面所述，它們僅被瀏覽器用來保存初始值。

Js代碼

$(“:checkbox”).get(0).checked = true;
// Is the same as $(":checkbox:first").prop(“checked”, true);

$(“:checkbox”).get(0).checked = true;
// Is the same as $(":checkbox:first").prop(“checked”, true);

在jQuery1.6中，如果使用下面的方法設置checked：

Js代碼

$(“:checkbox”).attr(“checked”, true);

$(“:checkbox”).attr(“checked”, true);

將不會檢查checkbox元素，因為它是需要被設置的property，但是你所有的設置都是初始值。

然而，曾經jQuery1.6被釋放出來的時候，jQuery團隊明白當瀏覽器僅關心頁面加載時，設置一些值不是特別的有用。所以，為了保持向后兼容性和.attr()方法的有用性，我們可以繼續在jQuery1.6.1中使用.attr()方法取得和設置這些boolean attributes。

最普通的attributes是checked,selected,disabled和readOnly，但下面是jQuery1.6.1支持的使用.attr()動態地取得和設置boolean attributes/properties的完整列表：

Js代碼

autofocus, autoplay, async, checked, controls, defer, disabled,
hidden, loop, multiple, open, readonly, required, scoped, selected

autofocus, autoplay, async, checked, controls, defer, disabled,
hidden, loop, multiple, open, readonly, required, scoped, selected

（譯者注：大部分都是html5新增的屬性）

還是建議使用.prop()方法來設置這些boolean attributes/properties，即使這些用例沒有轉換成使用.prop()方法，但是你的代碼仍然可以在jQuery1.6.1中正常運行。

下面是一些attributes和properties的列表，正常情況下，應該使用其對應的方法(見下面的列表)來取得和設置它們。下面的是首用法，但是.attr()方法可以運行在所有的attributes情況下。

注意：一些DOM元素的properties也被列在下面，但是僅運行在新的.prop()方法中

*例如: window.location
**如果需要在(if needed over) .width()

.attr()和.prop()都不應該被用來取值/設值。使用.val()方法代替(即使使用.attr("value","somevalue") 可以繼續運行，就像1.6之前做的那樣)

3、首選用法的概述

.prop()方法應該被用來處理boolean attributes/properties以及在html(比如：window.location)中不存在的properties。其他所有的attributes(在html中你看到的那些)可以而且應該繼續使用.attr()方法來進行操作。

上面的概述已經描述的夠清楚了，我也沒有必要再總結了。

jQuery中的prop()與attr()的用法區別

attr()方法

一般jQuery中，獲取或設置屬性的值是通過attr()方法。如：

返回文檔中所有圖像的src屬性值：$(“img”).attr(“src”);
為所有圖像設置src和alt屬性：$(“img”).attr({ src: “test.jpg”, alt: “Test Image” });

prop()方法

而jquery的1.6版本中，增加了prop()，方法，有什么用意呢？大家都知道有的瀏覽器只要寫disabled，checked就可以了，而有的要寫成disabled = “disabled”，checked=”checked”，比如用attr(“checked”)獲取checkbox的checked屬性時選中的時候可以取到值,值為”checked”但沒選中獲取值就是undefined。

jq提供新的方法“prop”來獲取這些屬性，就是來解決這個問題的，以前我們使用attr獲取checked屬性時返回”checked”和undefined,現在使用prop方法獲取屬性則統一返回true和false。

那么，我們的結論是 1.添加屬性名稱該屬性就會生效應該使用prop(); 2.是有true,false兩個屬性使用prop();如checked、selected、disabled 3.其他則使用attr();

prop()使用方法

語法：prop(name|properties|key,value|fn) 獲取在匹配的元素集中的第一個元素的屬性值。

隨着一些內置屬性的DOM元素或window對象，如果試圖將刪除該屬性，瀏覽器可能會產生錯誤。jQuery第一次分配undefined值的屬性，而忽略了瀏覽器生成的任何錯誤

選中復選框為true，沒選中為false：

$("input[type='checkbox']").prop("checked");

1	$ ( "input[type='checkbox']" ) . prop ( "checked" ) ;

禁用頁面上的所有復選框：

$("input[type='checkbox']").prop({
  disabled: true
});

$ ( "input[type='checkbox']" ) . prop ( {

disabled : true

} ) ;

禁用和選中所有頁面上的復選框：

$("input[type='checkbox']").prop("disabled", false);
$("input[type='checkbox']").prop("checked", true);

1 2	$ ( "input[type='checkbox']" ) . prop ( "disabled" , false ) ; $ ( "input[type='checkbox']" ) . prop ( "checked" , true ) ;

通過函數來設置所有頁面上的復選框被選中：

$("input[type='checkbox']").prop("checked", function( i, val ) {
  return !val;
});

$ ( "input[type='checkbox']" ) . prop ( "checked" , function ( i , val ) {

return ! val ;

} ) ;

官方建議attr(),prop()的使用表

Attribute/Property	`.attr()`	`.prop()`
accesskey	√
align	√
async	√	√
autofocus	√	√
checked	√	√
class	√
contenteditable	√
draggable	√
href	√
id	√
label	√
location ( i.e. window.location )	√	√
multiple	√	√
readOnly	√	√
rel	√
selected	√	√
src	√
tabindex	√
title	√
type	√
width ( if needed over `.width()` )	√