How jQuery :button Targets Button Tags and Inputs

The jQuery :button pseudo-class is a specialized selector designed to match both standard HTML <button> elements and <input> elements configured as buttons. By abstracting the structural differences between these two tags, jQuery provides developers with a single, unified query to locate interactive button elements across the Document Object Model (DOM).

The Underlying Evaluation Logic

Under the hood, jQuery processes the :button selector using its selector engine (historically Sizzle, now integrated directly into jQuery's core). When querying the DOM, the engine inspects each element's tag name and relevant attributes using a combined boolean condition:

elem.nodeName.toLowerCase() === "button" || (elem.nodeName.toLowerCase() === "input" && elem.type === "button")

Because of this logic, the selector handles the two element types through distinct criteria:

  1. <button> Elements: Any element with the tag name button matches automatically, regardless of its type attribute. This includes <button type="button">, <button type="submit">, <button type="reset">, or a <button> tag with no explicit type attribute (which defaults to submit in standard HTML).
  2. <input> Elements: For an input tag, the engine evaluates the element's type property. It will only match if the attribute is explicitly set to type="button". Elements using <input type="submit"> or <input type="reset"> are intentionally excluded, as jQuery maintains dedicated pseudo-selectors (:submit and :reset) for those specific inputs.

Equivalence to Standard CSS Selectors

Functionally, invoking $(":button") is completely equivalent to executing the compound CSS selector:

$("button, input[type='button']")

Performance Considerations

Because :button is a custom jQuery pseudo-class extension rather than a standard CSS selector, modern browsers cannot parse it directly using the high-performance native document.querySelectorAll() API. When jQuery encounters :button, it must either fall back to its internal JavaScript-based element filtering or rewrite the selector.

To achieve maximum querying performance in performance-critical applications, it is standard practice to use native CSS selectors instead:

// Slower: requires jQuery selector engine filtering
$(":button")

// Faster: leverages the browser's native querySelectorAll implementation
$("button, input[type='button']")