jQuery选择器":button"与"button"的区别、性能及使用场景咨询

嘿，这个问题问得挺到位的——很多人刚用jQuery的时候都会疑惑这俩选择器为啥看起来效果差不多，其实背后还是有不少门道的。

核心区别 #

• button 是原生标签选择器，它只会精准匹配页面上所有 <button> 标签元素。
• :button 是jQuery扩展的伪类选择器，它的匹配范围更广：除了所有 <button> 元素，还会匹配所有 type="button" 的 <input> 元素（也就是我们常写的 <input type="button"> 按钮）。

:button 的设计用途 #

当初jQuery推出这个伪类选择器，核心目的就是简化按钮类控件的批量选择。在实际开发中，页面上的按钮可能同时存在 <button> 和 <input type="button"> 两种形式，要是用原生选择器就得写 button, input[type="button"] 这样的组合选择器，而:button可以一步到位，让代码更简洁易读。

性能差异与合理使用场景 #

你提到的性能问题确实存在：button 作为原生选择器，能直接调用浏览器的原生DOM API（比如document.getElementsByTagName()）来获取元素，速度更快；而:button是jQuery自定义的伪类，需要先获取更宽泛的元素集合，再做二次筛选，性能确实略逊一筹。

那有没有值得用:button替代button的场景？当然有：

• 当你需要同时选中<button>和<input type="button">时，:button比写组合选择器更简洁，代码维护性更好。
• 对于遗留项目或已经统一使用:button的代码库，为了保持代码风格一致性，继续使用也完全没问题——毕竟现在浏览器性能都很强，除非是页面存在数千个按钮的极端场景，否则这点性能差异几乎感知不到。

示例代码验证 #

<!-- 测试用DOM结构 -->
<button id="i1">原按钮1</button>
<button id="i2">原按钮2</button>
<input type="button" id="i3" value="原输入按钮">

<script>
// 选中所有按钮（2个<button> + 1个<input type="button">）
$(":button").text("我被:button选中了"); 

// 仅选中<button>标签元素，<input>按钮不会被修改
$("button").text("我是button标签按钮"); 
</script>

内容的提问来源于stack exchange，提问作者Brandon