jQuery中attr()與prop()函數(shù)用法實(shí)例詳解(附用法區(qū)別)
本文實(shí)例講述了jQuery中attr()與prop()函數(shù)用法。分享給大家供大家參考，具體如下：
一、jQuery的attr()方法
jquery中用attr()方法來(lái)獲取和設(shè)置元素屬性,attr是attribute（屬性）的縮寫，在jQuery DOM操作中會(huì)經(jīng)常用到attr()，attr()有4個(gè)表達(dá)式。
1. attr(屬性名) //獲取屬性的值（取得第一個(gè)匹配元素的屬性值。通過(guò)這個(gè)方法可以方便地從第一個(gè)匹配元素中獲取一個(gè)屬性的值。如果元素沒(méi)有相應(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è)置對(duì)象的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è)“名/值”形式的對(duì)象設(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元素）。對(duì)于input元素，alt屬性意在用來(lái)替換提交按鈕的圖片。在這里為了很詳細(xì)說(shuō)明attr()方法，沒(méi)有合適的屬性，所有用了alt進(jìn)行舉例，只供學(xué)習(xí)參考attr()方法用法。
在此說(shuō)明下alt和tite的區(qū)別。
alt：這是用以描述圖形的文字，當(dāng)圖片無(wú)法顯示時(shí)，這些文字會(huì)替代圖片而被顯示。當(dāng)鼠標(biāo)移至圖片上該些文字亦會(huì)顯示。
title：是鼠標(biāo)放上去之后，會(huì)顯示出來(lái)的文字。
那么怎么刪除屬性呢?
jquery中刪除屬性的關(guān)鍵詞是: removeAttr 注意A是大寫的. 看看怎么用的:
同樣是用法一中的html代碼, 我想刪掉li的title屬性, 那么就這樣:
<script>
$("ul li:eq(1)").removeAttr ("title");
</script>
就這么簡(jiǎn)單， attr 其實(shí)就是原生js中 getAttribute 的簡(jiǎn)化實(shí)現(xiàn), 而removeAttr 就是 removeAttribute 的簡(jiǎn)寫了。
那么是否有跟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對(duì)象所匹配的元素的屬性值。
該函數(shù)屬于jQuery對(duì)象(實(shí)例)。如果需要?jiǎng)h除DOM元素的屬性，請(qǐng)使用removeProp()函數(shù)。
語(yǔ)法
jQuery 1.6 新增該函數(shù)。prop()函數(shù)有以下兩種用法：
用法一：
jQueryObject.prop( propertyName [, value ] )
設(shè)置或返回指定屬性propertyName的值。如果指定了value參數(shù)，則表示設(shè)置屬性propertyName的值為value；如果沒(méi)有指定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 )
以對(duì)象形式同時(shí)設(shè)置任意多個(gè)屬性的值。對(duì)象object的每個(gè)屬性對(duì)應(yīng)propertyName，屬性的值對(duì)應(yīng)value。
注意：prop()函數(shù)的所有"設(shè)置屬性"操作針對(duì)的是當(dāng)前jQuery對(duì)象所匹配的每一個(gè)元素；所有"讀取屬性"的操作只針對(duì)第一個(gè)匹配的元素。
參數(shù)
請(qǐng)根據(jù)前面語(yǔ)法部分所定義的參數(shù)名稱查找對(duì)應(yīng)的參數(shù)。
| 參數(shù) | 描述 |
|---|---|
| propertyName | String類型指定的屬性名稱。 |
| value | 可選/Object/Function類型指定的屬性值，或返回屬性值的函數(shù)。 |
| object | Object類型指定的對(duì)象，用于封裝多個(gè)鍵值對(duì)，同時(shí)設(shè)置多項(xiàng)屬性。 |
返回值
prop()函數(shù)的返回值是任意類型，返回值的類型取決于當(dāng)前prop()函數(shù)執(zhí)行的是"設(shè)置屬性"操作還是"讀取屬性"操作。
如果prop()函數(shù)執(zhí)行的是"設(shè)置屬性"操作，則返回當(dāng)前jQuery對(duì)象本身；如果是"讀取屬性"操作，則返回讀取到的屬性值。
如果當(dāng)前jQuery對(duì)象匹配多個(gè)元素，返回屬性值時(shí)，prop()函數(shù)只以其中第一個(gè)匹配的元素為準(zhǔn)。如果該元素沒(méi)有指定的屬性，則返回undefined。
prop()和attr()的主要區(qū)別：prop()函數(shù)針對(duì)的是DOM元素(JS Element對(duì)象)的屬性，attr()函數(shù)針對(duì)的是DOM元素所對(duì)應(yīng)的文檔節(jié)點(diǎn)的屬性。詳情請(qǐng)查看jQuery函數(shù)attr()和prop()的區(qū)別。
注意事項(xiàng)
1、如果通過(guò)prop()函數(shù)更改<input>和<button>元素的type屬性，在多數(shù)瀏覽器上將會(huì)拋出一個(gè)錯(cuò)誤，因?yàn)樵搶傩砸话悴辉试S在后期更改。
2、如果使用prop()函數(shù)操作表單元素的checked、selected、disabled等屬性，如果該元素被選中(或禁用)，則返回true，否則(意即HTML中沒(méi)有該屬性)返回false。
3、prop()函數(shù)還可以設(shè)置或返回DOM元素的Element對(duì)象上的某些屬性，例如：tagName、selectedIndex、nodeName、nodeType、ownerDocument、defaultChecked和defaultSelected等屬性。
4、在IE9及更早版本中，如果使用prop()函數(shù)設(shè)置的屬性值不是一個(gè)簡(jiǎn)單的原始值(String、Number、Boolean)，并且在對(duì)應(yīng)的DOM元素被銷毀之前，該屬性沒(méi)有被移除，則可能會(huì)導(dǎo)致內(nèi)存泄漏問(wèn)題。如果你只是為了存儲(chǔ)數(shù)據(jù)，建議你使用data()函數(shù)，以避免內(nèi)存泄漏問(wèn)題。
示例&說(shuō)明
以下面這段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()操作針對(duì)的是元素(Element對(duì)象)的屬性，而不是元素節(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è)置的屬性也是針對(duì)元素(Element對(duì)象)，因此也可以通過(guò)元素本身直接訪問(wèn)
$n2.prop("prop_a", "CodePlayer");
document.writeln( $n2[0].prop_a ); // CodePlayer
var n2 = document.getElementById("n2");
document.writeln( n2.prop_a ); // CodePlayer
// 以對(duì)象形式同時(shí)設(shè)置多個(gè)屬性，屬性值可以是對(duì)象、數(shù)組等任意類型
$n2.prop( {
prop_b: "baike",
prop_c: 18,
site: { name: "CodePlayer", url: "http://www.dhdzp.com/" }
} );
document.writeln( $n2[0].prop_c ); // 18
document.writeln( $n2[0].site.url ); // http://www.dhdzp.com/
// 反選所有的復(fù)選框(沒(méi)選中的改為選中，選中的改為取消選中)
$("input:checkbox").prop("checked", function(index, oldValue){
return !oldValue;
});
附：jquery中attr和prop的區(qū)別
在高版本的jquery引入prop方法后，什么時(shí)候該用prop？什么時(shí)候用attr？它們兩個(gè)之間有什么區(qū)別？這些問(wèn)題就出現(xiàn)了。
關(guān)于它們兩個(gè)的區(qū)別，網(wǎng)上的答案很多。這里談?wù)勎业男牡茫业男牡煤芎?jiǎn)單：
對(duì)于HTML元素本身就帶有的固有屬性，在處理時(shí)，使用prop方法。
對(duì)于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è)屬性，或者說(shuō)在IDE里能夠智能提示出的屬性，這些就叫做固有屬性。處理這些屬性時(shí)，建議使用prop方法。
<a href="#" id="link1" action="delete">刪除</a>
這個(gè)例子里<a>元素的DOM屬性有“href、id和action”，很明顯，前兩個(gè)是固有屬性，而后面一個(gè)“action”屬性是我們自己自定義上去的，<a>元素本身是沒(méi)有這個(gè)屬性的。這種就是自定義的DOM屬性。處理這些屬性時(shí)，建議使用attr方法。使用prop方法取值和設(shè)置屬性值時(shí)，都會(huì)返回undefined值。
再舉一個(gè)例子：
<input id="chk1" type="checkbox" />是否可見(jiàn)
<input id="chk2" type="checkbox" checked="checked" />是否可見(jiàn)
像checkbox，radio和select這樣的元素，選中屬性對(duì)應(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"
希望本文所述對(duì)大家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』.html(),.text()和.val()的概述及使用
如何使用jQuery中的.html(),.text()和.val()三種方法，用于讀取，修改元素的html結(jié)構(gòu)，元素的文本內(nèi)容，以及表單元素的value值的方法2013-04-04
Jquery1.9.1源碼分析系列（六）延時(shí)對(duì)象應(yīng)用之jQuery.ready
這篇文章主要介紹了Jquery1.9.1源碼分析系列（六）延時(shí)對(duì)象應(yīng)用之jQuery.ready的相關(guān)資料,需要的朋友可以參考下2015-11-11
jQuery插件EnPlaceholder實(shí)現(xiàn)輸入框提示文字
EnPlaceholder插件支持密碼框哦！實(shí)際對(duì)比同類的placeholder插件在ie等瀏覽器下效果要好很多！下面我們來(lái)具體探討下此插件的使用方法吧。2015-06-06
顯示、隱藏元素我們可以通過(guò)css來(lái)實(shí)現(xiàn)；添加刪除樣式我們可以通過(guò)js或jquery來(lái)實(shí)現(xiàn)，下面為大家講解的是使用jquery實(shí)現(xiàn)元素的顯示隱藏及樣式的添加與刪除2013-08-08
jQuery+ajax實(shí)現(xiàn)動(dòng)態(tài)添加表格tr td功能示例
這篇文章主要介紹了jQuery+ajax實(shí)現(xiàn)動(dòng)態(tài)添加表格tr td功能,結(jié)合實(shí)例形式分析了jQuery基于ajax動(dòng)態(tài)創(chuàng)建頁(yè)面table元素相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
jquery animate圖片模向滑動(dòng)示例代碼
jquery animate() 用于創(chuàng)建自定義動(dòng)畫的函數(shù)。這個(gè)函數(shù)的關(guān)鍵在于指定動(dòng)畫形式及結(jié)果樣式屬性對(duì)象。2011-01-01
想必關(guān)注jQuery的同學(xué)們對(duì)jQuery EasyUI已經(jīng)有所耳聞了，目前已經(jīng)更新到1.0.5版本，風(fēng)格與EXTJS有點(diǎn)相似，可以很好的滿足開(kāi)發(fā)人員對(duì)UI的需求。2010-04-04
jQuery實(shí)現(xiàn)contains方法不區(qū)分大小寫的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)contains方法不區(qū)分大小寫的方法,實(shí)例分析了針對(duì)contains方法的重寫技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
jquery next nextAll nextUntil siblings的區(qū)別介紹
在本文為大家詳細(xì)介紹下jquery next nextAll nextUntil siblings的區(qū)別，感興趣的朋友可以參考下2013-10-10
jQuery實(shí)現(xiàn)簡(jiǎn)單三級(jí)聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單三級(jí)聯(lián)動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09