jQuery中attr()與prop()函數(shù)用法實(shí)例詳解(附用法區(qū)別)
本文實(shí)例講述了jQuery中attr()與prop()函數(shù)用法。分享給大家供大家參考，具體如下：
一、jQuery的attr()方法
jquery中用attr()方法來獲取和設(shè)置元素屬性,attr是attribute（屬性）的縮寫，在jQuery DOM操作中會(huì)經(jīng)常用到attr()，attr()有4個(gè)表達(dá)式。
1. attr(屬性名) //獲取屬性的值（取得第一個(gè)匹配元素的屬性值。通過這個(gè)方法可以方便地從第一個(gè)匹配元素中獲取一個(gè)屬性的值。如果元素沒有相應(yīng)屬性，則返回 undefined ）
2. attr(屬性名, 屬性值) //設(shè)置屬性的值 （為所有匹配的元素設(shè)置一個(gè)屬性值。）
3. attr(屬性名,函數(shù)值) //設(shè)置屬性的函數(shù)值 （為所有匹配的元素設(shè)置一個(gè)計(jì)算的屬性值。不提供值，而是提供一個(gè)函數(shù)，由這個(gè)函數(shù)計(jì)算的值作為屬性值。）
4.attr(properties) //給指定元素設(shè)置多個(gè)屬性值，即：{屬性名一: “屬性值一” , 屬性名二: “屬性值二” , … … }。(這是一種在所有匹配元素中批量設(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把a(bǔ)lt屬性的值設(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) //將一個(gè)“名/值”形式的對象設(shè)置為所有匹配元素的屬性
4.1獲取<ul>里第2個(gè)<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個(gè)<li>設(shè)置class。
<script>
$("ul li:eq(1)").attr({className:"lili"});
</script>
結(jié)果：
4.3獲取<ul>里第2個(gè)<li>設(shè)置id。
<script>
$("ul li:eq(1)").attr({id:"lili"});
</script>
結(jié)果：
4.4獲取<ul>里第2個(gè)<li>設(shè)置style。
<script>
$("ul li:eq(1)").attr({style:"color:red"});
</script>
結(jié)果：
在li中添加alt是錯(cuò)誤的，它只能用在img、area和input元素中（包括applet元素）。對于input元素，alt屬性意在用來替換提交按鈕的圖片。在這里為了很詳細(xì)說明attr()方法，沒有合適的屬性，所有用了alt進(jìn)行舉例，只供學(xué)習(xí)參考attr()方法用法。
在此說明下alt和tite的區(qū)別。
alt：這是用以描述圖形的文字，當(dāng)圖片無法顯示時(shí)，這些文字會(huì)替代圖片而被顯示。當(dāng)鼠標(biāo)移至圖片上該些文字亦會(huì)顯示。
title：是鼠標(biāo)放上去之后，會(huì)顯示出來的文字。
那么怎么刪除屬性呢?
jquery中刪除屬性的關(guān)鍵詞是: removeAttr 注意A是大寫的. 看看怎么用的:
同樣是用法一中的html代碼, 我想刪掉li的title屬性, 那么就這樣:
<script>
$("ul li:eq(1)").removeAttr ("title");
</script>
就這么簡單， attr 其實(shí)就是原生js中 getAttribute 的簡化實(shí)現(xiàn), 而removeAttr 就是 removeAttribute 的簡寫了。
那么是否有跟attr()相似的屬性呢？
jquery中val()與之類似，
$(this).val();獲取某個(gè)元素節(jié)點(diǎn)的value值，相當(dāng)于$(this).attr("value");
$(this).val(value);設(shè)置某個(gè)元素節(jié)點(diǎn)的value值，相當(dāng)于$(this).attr("value",value);
二、jQuery的prop()方法：
prop()函數(shù)用于設(shè)置或返回當(dāng)前jQuery對象所匹配的元素的屬性值。
該函數(shù)屬于jQuery對象(實(shí)例)。如果需要?jiǎng)h除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()還會(huì)為函數(shù)傳入兩個(gè)參數(shù)：第一個(gè)參數(shù)就是該元素在匹配元素中的索引，第二個(gè)參數(shù)就是該元素propertyName屬性當(dāng)前的值。函數(shù)的返回值就是為該元素的propertyName屬性設(shè)置的值。
用法二：
jQueryObject.prop( object )
以對象形式同時(shí)設(shè)置任意多個(gè)屬性的值。對象object的每個(gè)屬性對應(yīng)propertyName，屬性的值對應(yīng)value。
注意：prop()函數(shù)的所有"設(shè)置屬性"操作針對的是當(dāng)前jQuery對象所匹配的每一個(gè)元素；所有"讀取屬性"的操作只針對第一個(gè)匹配的元素。
參數(shù)
請根據(jù)前面語法部分所定義的參數(shù)名稱查找對應(yīng)的參數(shù)。
| 參數(shù) | 描述 |
|---|---|
| propertyName | String類型指定的屬性名稱。 |
| value | 可選/Object/Function類型指定的屬性值，或返回屬性值的函數(shù)。 |
| object | Object類型指定的對象，用于封裝多個(gè)鍵值對，同時(shí)設(shè)置多項(xiàng)屬性。 |
返回值
prop()函數(shù)的返回值是任意類型，返回值的類型取決于當(dāng)前prop()函數(shù)執(zhí)行的是"設(shè)置屬性"操作還是"讀取屬性"操作。
如果prop()函數(shù)執(zhí)行的是"設(shè)置屬性"操作，則返回當(dāng)前jQuery對象本身；如果是"讀取屬性"操作，則返回讀取到的屬性值。
如果當(dāng)前jQuery對象匹配多個(gè)元素，返回屬性值時(shí)，prop()函數(shù)只以其中第一個(gè)匹配的元素為準(zhǔn)。如果該元素沒有指定的屬性，則返回undefined。
prop()和attr()的主要區(qū)別：prop()函數(shù)針對的是DOM元素(JS Element對象)的屬性，attr()函數(shù)針對的是DOM元素所對應(yīng)的文檔節(jié)點(diǎn)的屬性。詳情請查看jQuery函數(shù)attr()和prop()的區(qū)別。
注意事項(xiàng)
1、如果通過prop()函數(shù)更改<input>和<button>元素的type屬性，在多數(shù)瀏覽器上將會(huì)拋出一個(gè)錯(cuò)誤，因?yàn)樵搶傩砸话悴辉试S在后期更改。
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è)置的屬性值不是一個(gè)簡單的原始值(String、Number、Boolean)，并且在對應(yīng)的DOM元素被銷毀之前，該屬性沒有被移除，則可能會(huì)導(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é)點(diǎn)(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è)置多個(gè)屬性，屬性值可以是對象、數(shù)組等任意類型
$n2.prop( {
prop_b: "baike",
prop_c: 18,
site: { name: "CodePlayer", url: "http://chabaoo.cn/" }
} );
document.writeln( $n2[0].prop_c ); // 18
document.writeln( $n2[0].site.url ); // http://chabaoo.cn/
// 反選所有的復(fù)選框(沒選中的改為選中，選中的改為取消選中)
$("input:checkbox").prop("checked", function(index, oldValue){
return !oldValue;
});
附：jquery中attr和prop的區(qū)別
在高版本的jquery引入prop方法后，什么時(shí)候該用prop？什么時(shí)候用attr？它們兩個(gè)之間有什么區(qū)別？這些問題就出現(xiàn)了。
關(guān)于它們兩個(gè)的區(qū)別，網(wǎng)上的答案很多。這里談?wù)勎业男牡?，我的心得很簡單?/p>
對于HTML元素本身就帶有的固有屬性，在處理時(shí)，使用prop方法。
對于HTML元素我們自己自定義的DOM屬性，在處理時(shí)，使用attr方法。
上面的描述也許有點(diǎn)模糊，舉幾個(gè)例子就知道了。
<a target="_self" class="btn">百度</a>
這個(gè)例子里<a>元素的DOM屬性有“href、target和class"，這些屬性就是<a>元素本身就帶有的屬性，也是W3C標(biāo)準(zhǔn)里就包含有這幾個(gè)屬性，或者說在IDE里能夠智能提示出的屬性，這些就叫做固有屬性。處理這些屬性時(shí)，建議使用prop方法。
<a href="#" id="link1" action="delete">刪除</a>
這個(gè)例子里<a>元素的DOM屬性有“href、id和action”，很明顯，前兩個(gè)是固有屬性，而后面一個(gè)“action”屬性是我們自己自定義上去的，<a>元素本身是沒有這個(gè)屬性的。這種就是自定義的DOM屬性。處理這些屬性時(shí)，建議使用attr方法。使用prop方法取值和設(shè)置屬性值時(shí)，都會(huì)返回undefined值。
再舉一個(gè)例子：
<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方法，則會(huì)出現(xiàn)：
$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
- Jquery中attr與prop的區(qū)別詳解
- jQuery獲取attr()與prop()屬性值的方法及區(qū)別介紹
- jquery判斷復(fù)選框選中狀態(tài)以及區(qū)分attr和prop
- jQuery中 prop() attr()使用詳解
- jquery中attr和prop的區(qū)別分析
- jQuery中attr()和prop()在修改checked屬性時(shí)的區(qū)別
- jQuery學(xué)習(xí)之prop和attr的區(qū)別示例介紹
- jquery中prop()方法和attr()方法的區(qū)別淺析
- jquery獲取自定義屬性(attr和prop)實(shí)例介紹
- jquery 獲取自定義屬性(attr和prop)的實(shí)現(xiàn)代碼
- 關(guān)于jquery中attr()和prop()方法的區(qū)別
相關(guān)文章
jQuery創(chuàng)建自定義的選擇器用以選擇高度大于100的超鏈接實(shí)例
這篇文章主要介紹了jQuery創(chuàng)建自定義的選擇器用以選擇高度大于100的超鏈接,實(shí)例分析了jQuery自定義選擇器的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03
jquery中獲得$.ajax()事件返回的值并添加事件的方法
如果想獲得$.ajax()中返回的值，直接用在success:funciton(){return xx} 是不可以的，要想獲得xx的值，要在script中，使用全局變量。利用全局變量引出xx的值。2010-04-04
jquery簡單圖片切換顯示效果實(shí)現(xiàn)方法
這篇文章主要介紹了jquery簡單圖片切換顯示效果實(shí)現(xiàn)方法,可以實(shí)現(xiàn)簡單的圖片切換功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01
jQuery.autocomplete 支持中文輸入(firefox)修正方法
jQuery.autocomplete 是jquery的流行插件，，能夠很好的實(shí)現(xiàn)輸入框的自動(dòng)完成(autocomplete)、建議提示(input suggest)功能，支持ajax數(shù)據(jù)加載。2011-03-03
從重置input file標(biāo)簽中看jQuery的 .val() 和 .attr(“value”) 區(qū)別
這篇文章主要介紹了從重置input file標(biāo)簽中看jQuery的 .val() 和 .attr(“value”) 區(qū)別 的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
jQuery實(shí)現(xiàn)統(tǒng)計(jì)復(fù)選框選中數(shù)量
這里給大家分享一段jQuery實(shí)現(xiàn)的統(tǒng)計(jì)復(fù)選框選中數(shù)量的代碼，非常的實(shí)用，有需要的小伙伴們請帶走！2014-11-11
jQuery:delegate中select()不起作用的解決方法(實(shí)例講解)
本篇文章只要是對jQuery:delegate中select()不起作用的解決方法進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
jQuery 中msgTips 頂部彈窗效果實(shí)現(xiàn)代碼
最近發(fā)現(xiàn)好多網(wǎng)站都采用頂部彈窗，并且不用用戶手動(dòng)去點(diǎn)擊確定。感覺這樣很方便用戶，下面小編把實(shí)現(xiàn)代碼分享給大家，感興趣的的朋友一起看看吧2017-08-08
通過jQuery實(shí)現(xiàn)全選或反選以及單擊行改變背景色，具體代碼如下，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-07
jQuery中的replace字符串替換實(shí)現(xiàn)不同尺寸圖片切換功能
這篇文章主要介紹了jQuery之replace字符串替換實(shí)現(xiàn)不同尺寸圖片切換,使用jQuery的replace()方法可以很方便地實(shí)現(xiàn)不同尺寸圖片的切換，需要的朋友可以參考下2023-06-06