Селектор text - выбор инпутов с типом text
Селектор :text выбирает инпуты с
типом text. Смотрите тег
input.
Так как :text не относится к CSS спецификации,
то для улучшения производительности в современных
браузерах вместо него лучше применить
[type='text'].
Синтаксис
Так мы выбираем инпуты с типом text:
$(':text');
Как и с другими селекторами псевдо-классами
(начинающимися с ':'), перед ':' лучше
поставить название тега или другого селектора, в
противном случае будет применен селектор '*',
то есть $(':text') будет восприниматься как
$('*:text'), поэтому вместо этого лучше
использовать $('input:text').
Нужно помнить, что :text также выберет
все инпуты, у которых не указан атрибут type,
увидеть различия в поведении можно на следующем
примере:
$('<input>').is('[type=text]'); // вернет false
$('<input>').is(':text'); // вернет true
Пример
Давайте, выберем все инпуты с типом text и
сделаем им зеленый фон и красную рамку с помощью метода
css:
<form>
<input type="button" value="button">
<input type="file">
<input type="checkbox">
<button>button</button>
<input type="reset">
<input type="radio" name="test">
<input type="radio" name="test">
<input type="checkbox">
<input type="text">
</form>
$('form input:text').css({background: 'green', border: '2px red solid'});
$('form').submit(function(event) {
event.preventDefault(); // предотвращает отправку формы
});