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

回答

相关问题