在jQuery中使用选项元素时：checked和：selected之间的区别

Question

当使用元素时，两者:checked和:selected似乎提供了相等的结果<option>。使用一个相对于另一个有什么好处吗？如果:selected与相同:checked，那么将它完全包含在jQuery中的原因是什么？

例：

<p class="p1">Select a value</p>
<p class="p2">Select a value</p>

<select>
    <option value="a">Option one</option>
    <option value="b">Option two</option>
</select>


$('select').on('change', function(){

    $('.p1').text(function() { 
        return $('option:selected').text();
    });

    $('.p2').text(function() { 
        return $('option:checked').text();
    });
});

JS Bin演示

Answer 1

从文档的角度来看，除了只匹配元素外，似乎与之:selected相同。HTMLOptionElement是DOM中唯一具有属性的元素类型（这是用来测试元素的选择性的元素），从而证实了这一点。换句话说，当您只对元素感兴趣时，两个选择器都是相同的-除了非标准选择器。:checkedoptionselected:selectedoption:selected

由于文档本身建议使用标准选择器以最大程度地提高性能（并且因为如果给出选择，您为什么不使用标准选择器而不是非标准选择器？），所以我认为没有理由:selected在任何情况下使用。我想不出任何比这*:selected更好的情况option:checked（严重的是，什么时候您最后一次使用这种没有类型选择器的伪类？）

也许将它包含在jQuery中的原因可能是因为Selectors 3（:checked出现在其中）在jQuery诞生之时尚未标准化，但自2000年以来:checked一直存在于规范中，因此我并不完全相信这是真正的原因。