jquery - :checked and :selected when working with option elements in jQuery 之间的区别

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 demo

Answer 1

根据 documentation 判断，似乎 :selected 与 :checked 相同，但它只匹配 option 元素。 HTMLOptionElement 是 DOM 中唯一具有 selected 属性(这是 :selected 用于测试元素的选定性)的元素类型，这证实了这一点。换句话说，当您只对 option 元素感兴趣时，两个选择器是相同的 - 除了 :selected 是非标准的。

由于文档本身建议使用标准选择器来最大限度地提高性能(并且因为如果可以选择，为什么您不使用标准选择器而不是非标准选择器？)，我不认为在任何情况下都有理由使用 :selected 。我想不出在任何情况下 *:selected 会比 option:checked 更可取(说真的，你最后一次使用这个伪类是什么时候没有类型选择器的种类？)。

也许它被包含在 jQuery 中的原因是因为 Selectors 3(其中出现 :checked)在 jQuery 诞生时尚未标准化，但是 :checked 已在规范中 since 2000 ，所以我并不完全相信这就是原因。