javascript - jQuery 的属性操作不一致

Question

$('<option selected="selected">something</option>')
.removeAttr('selected')
.wrap('<p></p>').parent().html();

结果

<option>something</option>

这是预期的。但是，如果我在删除“selected”属性后将其放回原处(或放回不带“selected”属性的 <option> 标签)，我会得到相同的输出。

$('<option selected="selected">something</option>')
.removeAttr('selected')
.attr('selected', 'selected')
.wrap('<p></p>').parent().html();

为什么会这样？

Answer 1

有两个selected，selected属性和selected属性。

HTML selected="selected" 属性设置 JavaScript selected bool 属性的初始状态，但在那之后，就像所有表单字段状态一样，它们是独立的。

如果您通过在选择框中单击它来选择该选项，它不会将 HTML selected="selected" 属性添加到 HTMLOptionElement DOM 节点，因此您不会看到它体现在元素的innerHTML/html()中。相反，它只是设置基础表单内容，如 option.selected 属性所反射(reflect)的那样。

版本 8 之前的 IE 甚至不允许您设置 HTML selected 属性，因为 setAttribute 在那里被破坏了。如果您尝试，它实际上会设置 selected bool 属性。

jQuery 中的

attr() 是一种属性和属性访问的混合体，它试图掩盖这些问题。但结果是调用 attr('selected') 实际上与使用 bool 值 selected 属性相同。