jQuery的元素構造不同於使用ATTR

jQuery的1.4加入a shorthand way for constructing new DOM Elements和充填在它們的一些屬性：jQuery的元素構造不同於使用ATTR

jQuery(html, props)

html：定義單個的，獨立的，HTML元素（例如或）的字符串。

props：要調用新創建的元素的屬性，事件和方法的映射。

但是，我只注意到這個陌生（使用jQuery 1.5.1）：

>>> $("<img />", { height: 4 })[0].height 
0 
>>> $("<img />").attr({ height: 4 })[0].height 
4

所以，他們是速記和較長的方式之間存在一些差異..！這是一個錯誤還是故意的？是否還有其他類似的行爲我應該留意？

來源

2011-03-09 nickf

如果將元素添加到DOM中，它將起作用：'$（「」，{height：4}）。appendTo（'body'）[0] .height'。至於*爲什麼*，我不知道。在DOM元素被添加到DOM之前，可能沒有在DOM元素上設置高度。但第二個不應該工作... – 2011-03-09 15:35:31

從docs：

對於jQuery 1.4，第二個參數可以接受地圖由超集的屬性的，可以將傳遞給.attr()方法。此外，任何事件類型可以通過傳入，並且可以調用以下jQuery 方法：val，css，html， text，data，width，height或offset。

所以基本上片段並不等同於$("<img />").attr({ height: 4 })但$("<img />").height(4)和它的計算結果爲HTML是<img style="height: 4px" /> - 因此返回0。

來源

2011-03-09 15:38:56

這可能是正確的答案。 '$（「」）.height（4）[0] .height'也返回'0'，所以它至少解釋了這種行爲。 *編輯：現在完全感覺。*如果可以的話，我會加倍努力:) – 2011-03-09 15:40:56

可能是，但它被記錄在案。 – 2011-03-09 15:43:14

正如我所說，現在是有道理的，因爲高度設置爲CSS多功能。不過，當我將圖像添加到DOM時，'$（「」，{height：4}）。appendTo（'body'）[0] .height'返回'4'。但是這似乎是一個特殊的'HTMLImageElement'屬性，MDC說：*反映HTML屬性的高度，以CSS像素表示圖像的渲染高度。*因此，直到元素真正呈現後纔會設置該值。 – 2011-03-09 15:45:09

短的方式應該是：

$("<img />", { height: 4 }).height();

來源

2011-03-09 15:34:30

這並不能解釋爲什麼兩種方式的行爲不同。它實際上並不針對這個問題。 – 2011-03-09 15:37:15

那麼它表明簡寫方法返回創建的元素，而經典的返回一個數組。但我同意Jakub Hampl的解釋要好得多。 – 2011-03-09 15:48:54

我認爲你理解錯誤的問題。（a）這不是問題的重點，（b）兩種「方法」都返回一個jQuery對象。 @nickf使用數組訪問來直接訪問** DOM **元素。 – 2011-03-09 15:51:12

區別在於設置attr會添加高度屬性，其他形式設置高度樣式屬性。所以簡寫版設定的風格，而不是height屬性：

$("<img />", { height: 4 }); 
    // creates <img style="height:4px;"> 


    $("<img />").height(4); 
    // creates <img style="height:4px;"> 


    $("<img />").attr({height: 4}); 
    // creates <img height="4">

這種情況，你是否元素追加到DOM或沒有（與jQuery 1.4.4和1.5.1）。如果我重申評論中已經包含的內容，請諒解。

來源

2011-03-09 16:23:03 johnhunter

jQuery的元素構造不同於使用ATTR

回答

相關問題