快捷導(dǎo)航

jQuery中attr()與prop()函數(shù)用法實例詳解(附用法區(qū)別)

更新時間：2015年12月29日 12:20:41 作者：nd

這篇文章主要介紹了jQuery中attr()與prop()函數(shù)用法,結(jié)合實例形式詳細分析了attr()與prop()函數(shù)的使用技巧與相關(guān)注意事項,并附帶了attr()與prop()函數(shù)用法的區(qū)別,需要的朋友可以參考下

本文實例講述了jQuery中attr()與prop()函數(shù)用法。分享給大家供大家參考，具體如下：

一、jQuery的attr()方法

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

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

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

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

4.attr(properties) //給指定元素設(shè)置多個屬性值，即：{屬性名一: “屬性值一” , 屬性名二: “屬性值二” , … … }。(這是一種在所有匹配元素中批量設(shè)置很多屬性的最佳方式。注意，如果你要設(shè)置對象的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值：

<script>
alert($("ul li:eq(1)").attr("title"));
</script>

結(jié)果：

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

<script>
alert($("ul li:eq(1)").attr("alt"));
</script>

結(jié)果：

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

2.1使用attr(name,value)修改title值為：不吃橘子

<script>
$("ul li:eq(1)").attr("title","不吃橘子");
alert($("ul li:eq(1)").attr("title"));
</script>

結(jié)果：

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

3.1把alt屬性的值設(shè)置為title屬性的值。

<script>
$("ul li:eq(1)").attr("title",function(){ return this.alt});
alert($("ul li:eq(1)").attr("title"));
</script>

結(jié)果：

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

4.1獲取<ul>里第2個<li>設(shè)置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>

結(jié)果：

4.2獲取<ul>里第2個<li>設(shè)置class。

<script>
$("ul li:eq(1)").attr({className:"lili"});
</script>

結(jié)果：

4.3獲取<ul>里第2個<li>設(shè)置id。

<script>
$("ul li:eq(1)").attr({id:"lili"});
</script>

結(jié)果：

4.4獲取<ul>里第2個<li>設(shè)置style。

<script>
$("ul li:eq(1)").attr({style:"color:red"});
</script>

結(jié)果：

在li中添加alt是錯誤的，它只能用在img、area和input元素中（包括applet元素）。對于input元素，alt屬性意在用來替換提交按鈕的圖片。在這里為了很詳細說明attr()方法，沒有合適的屬性，所有用了alt進行舉例，只供學(xué)習(xí)參考attr()方法用法。

在此說明下alt和tite的區(qū)別。

alt：這是用以描述圖形的文字，當(dāng)圖片無法顯示時，這些文字會替代圖片而被顯示。當(dāng)鼠標(biāo)移至圖片上該些文字亦會顯示。
title：是鼠標(biāo)放上去之后，會顯示出來的文字。

那么怎么刪除屬性呢?

jquery中刪除屬性的關(guān)鍵詞是: removeAttr 注意A是大寫的. 看看怎么用的:
同樣是用法一中的html代碼, 我想刪掉li的title屬性, 那么就這樣:

<script>
$("ul li:eq(1)").removeAttr ("title");
</script>

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

那么是否有跟attr()相似的屬性呢？

jquery中val()與之類似，
$(this).val();獲取某個元素節(jié)點的value值，相當(dāng)于$(this).attr("value");
$(this).val(value);設(shè)置某個元素節(jié)點的value值，相當(dāng)于$(this).attr("value",value);

二、jQuery的prop()方法：

prop()函數(shù)用于設(shè)置或返回當(dāng)前jQuery對象所匹配的元素的屬性值。

該函數(shù)屬于jQuery對象(實例)。如果需要刪除DOM元素的屬性，請使用removeProp()函數(shù)。

語法

jQuery 1.6 新增該函數(shù)。prop()函數(shù)有以下兩種用法：

用法一：

jQueryObject.prop( propertyName [, value ] )
設(shè)置或返回指定屬性propertyName的值。如果指定了value參數(shù)，則表示設(shè)置屬性propertyName的值為value；如果沒有指定value參數(shù)，則表示返回屬性propertyName的值。

參數(shù)value還可以是函數(shù)，prop()將根據(jù)匹配的所有元素遍歷執(zhí)行該函數(shù)，函數(shù)中的this指針將指向?qū)?yīng)的DOM元素。prop()還會為函數(shù)傳入兩個參數(shù)：第一個參數(shù)就是該元素在匹配元素中的索引，第二個參數(shù)就是該元素propertyName屬性當(dāng)前的值。函數(shù)的返回值就是為該元素的propertyName屬性設(shè)置的值。

用法二：

jQueryObject.prop( object )
以對象形式同時設(shè)置任意多個屬性的值。對象object的每個屬性對應(yīng)propertyName，屬性的值對應(yīng)value。

注意：prop()函數(shù)的所有"設(shè)置屬性"操作針對的是當(dāng)前jQuery對象所匹配的每一個元素；所有"讀取屬性"的操作只針對第一個匹配的元素。
參數(shù)

請根據(jù)前面語法部分所定義的參數(shù)名稱查找對應(yīng)的參數(shù)。

參數(shù)	描述
propertyName	String類型指定的屬性名稱。
value	可選/Object/Function類型指定的屬性值，或返回屬性值的函數(shù)。
object	Object類型指定的對象，用于封裝多個鍵值對，同時設(shè)置多項屬性。

參數(shù)value可以是包括對象和數(shù)組在內(nèi)的任意類型。

返回值

prop()函數(shù)的返回值是任意類型，返回值的類型取決于當(dāng)前prop()函數(shù)執(zhí)行的是"設(shè)置屬性"操作還是"讀取屬性"操作。

如果prop()函數(shù)執(zhí)行的是"設(shè)置屬性"操作，則返回當(dāng)前jQuery對象本身；如果是"讀取屬性"操作，則返回讀取到的屬性值。

如果當(dāng)前jQuery對象匹配多個元素，返回屬性值時，prop()函數(shù)只以其中第一個匹配的元素為準。如果該元素沒有指定的屬性，則返回undefined。

prop()和attr()的主要區(qū)別：prop()函數(shù)針對的是DOM元素(JS Element對象)的屬性，attr()函數(shù)針對的是DOM元素所對應(yīng)的文檔節(jié)點的屬性。詳情請查看jQuery函數(shù)attr()和prop()的區(qū)別。

注意事項

1、如果通過prop()函數(shù)更改<input>和<button>元素的type屬性，在多數(shù)瀏覽器上將會拋出一個錯誤，因為該屬性一般不允許在后期更改。

2、如果使用prop()函數(shù)操作表單元素的checked、selected、disabled等屬性，如果該元素被選中(或禁用)，則返回true，否則(意即HTML中沒有該屬性)返回false。

3、prop()函數(shù)還可以設(shè)置或返回DOM元素的Element對象上的某些屬性，例如：tagName、selectedIndex、nodeName、nodeType、ownerDocument、defaultChecked和defaultSelected等屬性。

4、在IE9及更早版本中，如果使用prop()函數(shù)設(shè)置的屬性值不是一個簡單的原始值(String、Number、Boolean)，并且在對應(yīng)的DOM元素被銷毀之前，該屬性沒有被移除，則可能會導(dǎo)致內(nèi)存泄漏問題。如果你只是為了存儲數(shù)據(jù)，建議你使用data()函數(shù)，以避免內(nèi)存泄漏問題。

示例&說明

以下面這段HTML代碼為例：

<div id="n1">
  <p id="n2" class="demo test" data-key="UUID" data_value="1235456465">CodePlayer</p>
  <input id="n3" name="order_id" type="checkbox" value="1">
  <input id="n4" name="order_id" type="checkbox" checked="checked" value="2">
</div>

我們編寫如下jQuery代碼：

var $n2 = $("#n2");
// prop()操作針對的是元素(Element對象)的屬性，而不是元素節(jié)點(HTML文檔)的屬性
document.writeln( $n2.prop("data-key") ); // undefined
document.writeln( $n2.prop("data_value") ); // undefined
document.writeln( $n2.prop("id") ); // n2
document.writeln( $n2.prop("tagName") ); // P
document.writeln( $n2.prop("className") ); // demo test
document.writeln( $n2.prop("innerHTML") ); // CodePlayer
document.writeln( typeof $n2.prop("getAttribute") ); // function
// prop()設(shè)置的屬性也是針對元素(Element對象)，因此也可以通過元素本身直接訪問
$n2.prop("prop_a", "CodePlayer");
document.writeln( $n2[0].prop_a ); // CodePlayer
var n2 = document.getElementById("n2");
document.writeln( n2.prop_a ); // CodePlayer
// 以對象形式同時設(shè)置多個屬性，屬性值可以是對象、數(shù)組等任意類型
$n2.prop( { 
  prop_b: "baike",
  prop_c: 18,
  site: { name: "CodePlayer", url: "http://www.dbjr.com.cn/" }
} );
document.writeln( $n2[0].prop_c ); // 18
document.writeln( $n2[0].site.url ); // http://www.dbjr.com.cn/
// 反選所有的復(fù)選框(沒選中的改為選中，選中的改為取消選中)
$("input:checkbox").prop("checked", function(index, oldValue){
  return !oldValue;
});

附：jquery中attr和prop的區(qū)別

在高版本的jquery引入prop方法后，什么時候該用prop？什么時候用attr？它們兩個之間有什么區(qū)別？這些問題就出現(xiàn)了。

關(guān)于它們兩個的區(qū)別，網(wǎng)上的答案很多。這里談?wù)勎业男牡茫业男牡煤芎唵危?/p>

對于HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。
對于HTML元素我們自己自定義的DOM屬性，在處理時，使用attr方法。

上面的描述也許有點模糊，舉幾個例子就知道了。

這個例子里<a>元素的DOM屬性有“href、target和class"，這些屬性就是<a>元素本身就帶有的屬性，也是W3C標(biāo)準里就包含有這幾個屬性，或者說在IDE里能夠智能提示出的屬性，這些就叫做固有屬性。處理這些屬性時，建議使用prop方法。

這個例子里<a>元素的DOM屬性有“href、id和action”，很明顯，前兩個是固有屬性，而后面一個“action”屬性是我們自己自定義上去的，<a>元素本身是沒有這個屬性的。這種就是自定義的DOM屬性。處理這些屬性時，建議使用attr方法。使用prop方法取值和設(shè)置屬性值時，都會返回undefined值。

再舉一個例子：

<input id="chk1" type="checkbox" />是否可見
<input id="chk2" type="checkbox" checked="checked" />是否可見

像checkbox，radio和select這樣的元素，選中屬性對應(yīng)“checked”和“selected”，這些也屬于固有屬性，因此需要使用prop方法去操作才能獲得正確的結(jié)果。

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

如果上面使用attr方法，則會出現(xiàn)：

$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫

CMS

常用工具

jQuery中attr()與prop()函數(shù)用法實例詳解(附用法區(qū)別)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具