Jquery屬性獲取 attr 與prop

2022-02-11 08:40:36 字數 1670 閱讀 4545

今天在專案中使用下拉列表時,使用juery操作,使頁面載入完選單預設選中的值為2,我一開始的操作如下:

12

3/**js部分**/

$("#second").attr("selected","selected");

咋一看好完美,木問題,但是我發現在safari瀏覽器中,根本不起作用!!仔細檢視一番發現,在safari瀏覽器中,屬性確實是設定成功了,既value=2的那一項確實是2。那問題出在哪呢?冷靜,不要方,萬能的stack說只要把attr改成prop就行了,臥槽還真行了,這是啥詭異事件。好吧,我們需要來研究研究了,不用想,肯定是需要祭出官方文件了。

attr() : 獲取匹配的元素集合中的第乙個元素的屬性的值 或 設定每乙個匹配元素的乙個或多個屬性。

.attr( attributename, value )

prop() : 獲取匹配的元素集中第乙個元素的屬性(property)值或設定每乙個匹配元素的乙個或多個屬性。

.prop( propertyname, value )

看出區別了嗎,沒錯,是引數有區別,attr()傳入的是attributename,而prop()傳入的是propertyname,現在我們的問題轉移了,我們需要研究的是attributenamepropertyname之間的區別了。

在這裡,我們可以將attribute理解為「特性」,property理解為「屬性」從而來區分倆者的差異。

如果把dom元素看成是乙個普通的object物件,這個物件在其定義時就具有一些屬性(property),比如把select的option當做乙個物件:

var option =
現在,我們一目了然了,attribute是乙個特性節點,每個dom元素都有乙個對應的attributes屬性來存放所有的attribute節點,它是乙個叫做namenodemap的物件。attributes的每個數字索引以名值對(name=」value」)的形式存放了乙個attribute節點。而property就是乙個屬性,是乙個以名值對(name=」value」)的形式存放在object中的屬性。

上例中2property

回到一開始的問題,根據w3c的表單規範 ,在selected屬性(property)是乙個布林屬性, 這意味著,如果這個特性(attribute)存在, 即使該特性沒有對應的值,或者被設定為空字串值,或甚至是"false",相應的屬性(property)都還是為true。 selected特性(attribute)值不會因為核取方塊的狀態而改變,而selected屬性(property)會因為核取方塊的狀態而改變。因此,跨瀏覽器相容的檢索和更改dom屬性,比如元素的checked, selected, 或 disabled狀態,請使用.prop()方法。

之所以attribute和property容易混倄在一起的原因是,很多attribute節點還有乙個相對應的property屬性,比如dom元素的id和class既是attribute,也有對應的property,不管使用哪種方法都可以訪問和修改。

jQuery屬性操作 attr

attr 方法設定或返回被選元素的屬性值。如果元素沒有相應屬性,則返回 undefined attr 有4個表示式 attr 屬性名 獲取屬性的值 attr 屬性名,屬性值 設定屬性的值 為所有匹配的元素設定乙個屬性值。attr 屬性名,函式值 設定屬性的函式值 為所有匹配的元素設定乙個計算的屬性值...

jquery屬性操作 attr 方法

attr 方法設定或返回被選元素的屬性值。根據該方法不同的引數,其工作方式也有所差異。返回被選元素的屬性值。selector attr attribute 引數 描述attribute 規定要獲取其值的屬性。檢視影象寬度 效果圖 設定被選元素的屬性和值。selector attr attribute...

jQuery 屬性操作 attr 方法

attr 方法設定或返回被選元素的屬性值。根據該方法不同的引數,其工作方式也有所差異。返回被選元素的屬性值。selector attr attribute 設定被選元素的屬性和值。selector attr attribute,value 引數 描述attribute 規定屬性的名稱。value 規...