Bộ chọn text
Bộ chọn :text chọn các input có
loại text. Xem thẻ
input.
Vì :text không thuộc đặc tả CSS,
nên để cải thiện hiệu suất trong các
trình duyệt hiện đại, thay vào đó nên sử dụng
[type='text'].
Cú pháp
Chúng ta chọn các input có loại text như thế này:
$(':text');
Giống như với các bộ chọn lớp giả khác
(bắt đầu bằng ':'), tốt hơn hết là nên đặt
tên thẻ hoặc bộ chọn khác trước ':', nếu
không thì bộ chọn '*' sẽ được áp dụng,
tức là $(':text') sẽ được hiểu là
$('*:text'), vì vậy thay vào đó nên
sử dụng $('input:text').
Cần nhớ rằng :text cũng sẽ chọn
tất cả các input không có thuộc tính type được chỉ định,
có thể thấy sự khác biệt trong hành vi qua ví dụ
sau đây:
$('<input>').is('[type=text]'); // trả về false
$('<input>').is(':text'); // trả về true
Ví dụ
Hãy chọn tất cả các input có loại text và
đặt cho chúng nền màu xanh lá cây và viền màu đỏ bằng phương thức
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(); // ngăn chặn việc gửi biểu mẫu
});
