:text
选择所有类型为文本的元素。
jQuery(":text")
$(':text')
允许我们选择所有<input type="text">
元素。如同其他伪类选择器(那些以“$('*:text')
,所以应该使用$('input:text')
来提升效率。
注意:从jQuery 1.5.2开始,:text
选择没有指定type
属性的input
元素(在这种情况下,type="text"
是隐含的)。
可以通过下面的例子,反映出$(':text')
和$('[type=text]')
之间的区别:
$('<input>').is('[type=text]'); // false $('<input>').is(':text'); // true
注意
- 因为
:text
是一个 jQuery 延伸出来的选择器,并不是的CSS规范的一部分,使用:text
查询不能充分利用原生DOM提供的querySelectorAll()
方法来提高性能。 - 为了当使用
:text
的时候在现代浏览器上获得更佳的性能,首先使用纯CSS选择器选择元素,然后使用[type="text"]
代替.
例子
查找所有的文本框。
<!DOCTYPE html> <html> <head> <style> textarea { height:25px; } </style> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script> </head> <body> <form> <input type="button" value="Input Button"/> <input type="checkbox" /> <input type="file" /> <input type="hidden" /> <input type="image" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <input type="submit" /> <input type="text" /> <select><option>Option</option></select> <textarea></textarea> <button>Button</button> </form> <div> </div> <script>var input = $("form input:text").css({background:"yellow", border:"3px red solid"}); $("div").text("For this type jQuery found " + input.length + ".") .css("color", "red"); $("form").submit(function () {return false; }); // so it won't submit </script> </body> </html>