jquery中arrt 和prop 的區別

2021-10-01 21:30:39 字數 2548 閱讀 9013

本文**

在jquery中,attr()函式和prop()函式都用於設定或獲取指定的屬性,它們的引數和用法也幾乎完全相同。

但不得不說的是,這兩個函式的用處卻並不相同。下面我們來詳細介紹這兩個函式之間的區別。

1、操作物件不同

很明顯,attr和prop分別是單詞attribute和property的縮寫,並且它們均表示"屬性"的意思。

不過,在jquery中,attribute和property卻是兩個不同的概念。attribute表示html文件節點的屬性,property表示js物件的屬性。

在jquery中,prop()函式的設計目標是用於設定或獲取指定dom元素(指的是js物件,element型別)上的屬性(property);attr()函式的設計目標是用於設定或獲取指定dom元素所對應的文件節點上的屬性(attribute)。

2、應用版本不同

attr()是jquery 1.0版本就有的函式,prop()是jquery 1.6版本新增的函式。毫無疑問,在1.6之前,你只能使用attr()函式;1.6及以後版本,你可以根據實際需要選擇對應的函式。

3、用於設定的屬性值型別不同

由於attr()函式操作的是文件節點的屬性,因此設定的屬性值只能是字串型別,如果不是字串型別,也會呼叫其tostring()方法,將其轉為字串型別。

prop()函式操作的是js物件的屬性,因此設定的屬性值可以為包括陣列和物件在內的任意型別。

4、其他細節問題

在jquery 1.6之前,只有attr()函式可用,該函式不僅承擔了attribute的設定和獲取工作,還同時承擔了property的設定和獲取工作。例如:在jquery 1.6之前,attr()也可以設定或獲取tagname、classname、nodename、nodetype等dom元素的property。

直到jquery 1.6新增prop()函式,並用來承擔property的設定或獲取工作之後,attr()才只用來負責attribute的設定和獲取工作。

此外,對於表單元素的checked、selected、disabled等屬性,在jquery 1.6之前,attr()獲取這些屬性的返回值為boolean型別:如果被選中(或禁用)就返回true,否則返回false

但是從1.6開始,使用attr()獲取這些屬性的返回值為string型別,如果被選中(或禁用)就返回checked、selected或disabled,否則(即元素節點沒有該屬性)返回undefined。並且,在某些版本中,這些屬性值表示文件載入時的初始狀態值,即使之後更改了這些元素的選中(或禁用)狀態,對應的屬性值也不會發生改變。

因為jquery認為:attribute的checked、selected、disabled就是表示該屬性初始狀態的值,property的checkedselecteddisabled才表示該屬性實時狀態的值(值為truefalse)。

因此,在jquery 1.6及以後版本中,請使用prop()函式來設定或獲取checkedselecteddisabled等屬性。對於其它能夠用prop()實現的操作,也盡量使用prop()函式。

按鈕

// attr / prop

// attr ==> getattribute() / setattribute()

// 用於操作 自定義的屬性,對於dom物件自身的布林值型別的屬性,只能

// 通過這個兩個方法來設定或者讀取預設值,而不能動態改變值

// // prop ==> dom.checked = true;

// 對於 布林值的屬性(selected/checked/diabled) 都需要通過直接訪問屬性

// 方式來操作(點語法、)

大家都知道原生js可以獲取匹配元素的內部html和外部html,內部是innerhtml,外部是outerhtml,原生js的dom物件是存在這兩個屬性的,

document.getelementbyid("linktype").outerhtml;

如果用jquery如何獲取匹配元素(包括自身元素的html)呢?

既然存在這個屬性,我們就可以用$("#linktype").prop("outerhtml")來獲取;

可以通過$("#linktype").prop("outerhtml",outerhtml)賦值來改變outerhtml的內容;

值得注意的是jquery的attr是獲取不到這個屬性值的。

Qt中的 pro檔案

使用qt嚮導生成的應用程式.pro檔案格式qt core gui 模組的名字 greaterthan qt major version,4 qt widgets target test 應用程式名 原始檔 sources main.cpp mainwindow.cpp 標頭檔案 headers ma...

iQOO5Pro和華為mate40Pro哪個好

iqoo5pro爆降600 這活動太給力了 華為mate40pro 前置 3200萬畫素 攝像頭,一顆景深攝像頭,用於3d結構光人臉識別,後置 5000 萬畫素液態鏡頭,1300萬畫素超廣角電影鏡頭,潛望鏡頭 1300萬,tof 鏡頭 iqoo5pro 前置 1600萬畫素,後置 主攝 5000萬畫...

provide inject應用及和props對比

之前本人寫過幾篇element ui原始碼解析,其中提到provide inject,當時只是匆匆帶過,沒有做深入研究,直到後來一次開發,需要實現孫元件更改父元件的值才想起來,原來這一對屬性有如此大的用途且相當方便,因此這裡做個總結,順便做個簡單的demo。ps 下面提到的父元件,子元件,孫元件只是...