使用jQuery创建元素并添加样式属性

Question

我有以下脚本。我没有显示它，但我后来进一步操纵DOM。我在测试1和测试2上获得了相同的结果，但使用测试3得到不同的结果。与测试3有什么不同？请确认测试1和测试2的影响是相同的。如果您觉得测试3必须提供相同的结果，我会将我的完整代码发布到小提琴上以证明它不是。

var thead_cells=$('#myTable').children('thead').find('tr').eq(0).find('th'), 

var shimRow=$('<tr />',{height:0,padding:0,margin:0}); 

for (var i = 0; i < thead_cells.length; i++) { 

    //test 1 
    shimRow 
    .append($('<td />',{height:0,outerWidth:thead_cells.eq(i).outerWidth(true)}) 
     .css('padding',0) 
     .css('margin',0) 
     .html('')); 

    //test 2 
    shimRow 
    .append($('<td />',{height:0,outerWidth:thead_cells.eq(i).outerWidth(true), css:{padding:0, margin:0}}) 
     .html('')); 

    //test 3 
    shimRow 
    .append($('<td />',{height:0,outerWidth:thead_cells.eq(i).outerWidth(true), padding:0, margin:0}) 
     .html('')); 

} 

Answer 1

无论测试1和测试2是相同的将完全取决于你已经由样式表指定给td元件的样式。在测试2中，您将覆盖任何样式表分配的填充和边距;在测试1中，你不是。

测试3不起作用，因为padding和margin不是您可以直接指定给td元素的属性;这就是为什么前面两个部分是css，它调用jQuery的css函数（在jQuery 1.8和更高版本中）。

通过the jQuery(html, attributes) documentation可以很好地理解测试2的工作原理。