Jquery $(:text) 和 $(input[type="text"])

Question

$(:text)和$(input[type="text"]) Jquery選擇器之間有什么區別。

Answer 1

從 jQuery 1.5.2 開始， :text 選擇沒有指定類型屬性的輸入元素（在這種情況下 type="text" 是隱含的）。

$( ":text" ) 和 $( "[type=text]" ) 之間的行為差​​異如下所示：

$( "<input>" ).is( "[type=text]" ); // false
$( "<input>" ).is( ":text" ); // true

補充說明：

因為 :text 是 jQuery 擴展而不是 CSS 規范的一部分，所以使用 :text 的查詢無法利用原生 DOM querySelectorAll() 方法提供的性能提升。 為了在現代瀏覽器中獲得更好的性能，請改用 [type="text"]。 https://api.jquery.com/text-selector/

Answer 2

從 Jquery api ：

$( ":text" ) 等價於 $( "*:text" )。

所以相當於$('input[type="text"]')是$("input:text")

Answer 3

$(input[type="text"])將選擇具有指定類型的所有輸入標簽

$(:text)將選擇所有具有指定類型或未定義類型的輸入標簽

<input type="text" name="text1" value="abc" />

<input name="text2" value="xyz" />

$(input[type="text"])將只選擇第一個輸入標簽

$(:text)將選擇兩個輸入標簽

檢查js小提琴演示