jQuery的attr和prop

概述

做項(xiàng)目過程中关噪,你可可能會(huì)發(fā)現(xiàn)使用attr將checkbox設(shè)置checked并不能生效了慕蔚,這是因?yàn)樵趈Query1.6開始新增了一個(gè)方法 prop()。

概念

prop在官方文檔中的解釋是:獲取匹配的元素集中第一個(gè)元素的屬性(property)值或設(shè)置每一個(gè)匹配元素的一個(gè)或多個(gè)屬性稼虎。

Attributes vs Properties

attributes和properties之間的差異在特定情況下是很重要庐杨。jQuery 1.6之前 选调,.attr()方法在取某些 attribute 的值時(shí),會(huì)返回 property 的值灵份,這就導(dǎo)致了結(jié)果的不一致仁堪。從 jQuery 1.6 開始, .prop()方法 方法返回 property 的值,而 .attr() 方法返回 attributes 的值填渠。

例如, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected 應(yīng)使用.prop()方法進(jìn)行取值或賦值弦聂。 在jQuery1.6之前,這些屬性使用.attr()方法取得氛什,但是這并不是元素的attr屬性莺葫。他們沒有相應(yīng)的屬性(attributes),只有特性(property)枪眉。
例如捺檬,考慮一個(gè)DOM元素的HTML標(biāo)記中定義的 ,并假設(shè)它是一個(gè)JavaScript變量命名的elem :

elem.checked true (Boolean) 將隨著復(fù)選框狀態(tài)的改變而改變
$(elem).prop(“checked”) true (Boolean) 將隨著復(fù)選框狀態(tài)的改變而改變
elem.getAttribute(“checked”) “checked” (String) 復(fù)選框的初始狀態(tài);不會(huì)改變
$(elem).attr(“checked”) (1.6) “checked” (String) 復(fù)選框的初始狀態(tài);不會(huì)改變
$(elem).attr(“checked”) (1.6.1+) “checked” (String) 將隨著復(fù)選框狀態(tài)的改變而改變
$(elem).attr(“checked”) (pre-1.6) true (Boolean) 將隨著復(fù)選框狀態(tài)的改變而改變

prop

.prop()方法設(shè)置屬性值非常方便贸铜,尤其是對(duì)于需要使用一個(gè)函數(shù)設(shè)置多個(gè)屬性值或是一次性設(shè)置多個(gè)屬性值的情況堡纬。當(dāng)設(shè)置selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 或 defaultSelected必須使用這個(gè)方法。從jQuery1.6開始蒿秦,這些屬性可以不再使用.attr()方法來設(shè)置烤镐。他們沒有相應(yīng)的屬性(attributes),只有屬性(property)渤早。

Properties 屬性一般影響 DOM 元素的動(dòng)態(tài)狀態(tài)并不會(huì)改變序列化的 HTML attribute 屬性职车。例如,input 元素的 value 屬性鹊杖,input 和 按鈕 元素的 disabled 屬性, 以及 checkbox 的 checked 屬性悴灵。應(yīng)該使用 .prop() 方法設(shè)置 disabled 和 checked 屬性,而不是使用 .attr() 方法骂蓖。 .val() 方法應(yīng)該用于存取 value 值积瞒。

例子

所以我們?cè)僭O(shè)置checkbox的checked時(shí),使用prop就可以正常設(shè)置了登下。

$(“#chekbox”).prop(“checked”,true);
$(“#chekbox”).prop(“checked”,false);

API文檔鏈接:http://api.jquery.com/prop/

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末茫孔,一起剝皮案震驚了整個(gè)濱河市叮喳,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌缰贝,老刑警劉巖馍悟,帶你破解...
    沈念sama閱讀 217,406評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異剩晴,居然都是意外死亡锣咒,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門赞弥,熙熙樓的掌柜王于貴愁眉苦臉地迎上來毅整,“玉大人,你說我怎么就攤上這事绽左〉考担” “怎么了?”我有些...
    開封第一講書人閱讀 163,711評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵拼窥,是天一觀的道長戏蔑。 經(jīng)常有香客問我,道長鲁纠,這世上最難降的妖魔是什么辛臊? 我笑而不...
    開封第一講書人閱讀 58,380評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮房交,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘伐割。我一直安慰自己候味,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,432評(píng)論 6 392
  • 文/花漫 我一把揭開白布隔心。 她就那樣靜靜地躺著白群,像睡著了一般。 火紅的嫁衣襯著肌膚如雪硬霍。 梳的紋絲不亂的頭發(fā)上帜慢,一...
    開封第一講書人閱讀 51,301評(píng)論 1 301
  • 那天,我揣著相機(jī)與錄音唯卖,去河邊找鬼粱玲。 笑死,一個(gè)胖子當(dāng)著我的面吹牛拜轨,可吹牛的內(nèi)容都是我干的抽减。 我是一名探鬼主播,決...
    沈念sama閱讀 40,145評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼橄碾,長吁一口氣:“原來是場噩夢啊……” “哼卵沉!你這毒婦竟也來了颠锉?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,008評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤史汗,失蹤者是張志新(化名)和其女友劉穎琼掠,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體停撞,經(jīng)...
    沈念sama閱讀 45,443評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡瓷蛙,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,649評(píng)論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了怜森。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片速挑。...
    茶點(diǎn)故事閱讀 39,795評(píng)論 1 347
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖副硅,靈堂內(nèi)的尸體忽然破棺而出姥宝,到底是詐尸還是另有隱情,我是刑警寧澤恐疲,帶...
    沈念sama閱讀 35,501評(píng)論 5 345
  • 正文 年R本政府宣布腊满,位于F島的核電站,受9級(jí)特大地震影響培己,放射性物質(zhì)發(fā)生泄漏碳蛋。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,119評(píng)論 3 328
  • 文/蒙蒙 一省咨、第九天 我趴在偏房一處隱蔽的房頂上張望肃弟。 院中可真熱鬧,春花似錦零蓉、人聲如沸笤受。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,731評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽箩兽。三九已至,卻和暖如春章喉,著一層夾襖步出監(jiān)牢的瞬間汗贫,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,865評(píng)論 1 269
  • 我被黑心中介騙來泰國打工秸脱, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留落包,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,899評(píng)論 2 370
  • 正文 我出身青樓摊唇,卻偏偏與公主長得像妥色,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子遏片,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,724評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容