Như các bạn đã biết jQuery là một thư viện của Javascript rất mạnh về Selector (Bộ chọn) và hiệu ứng. Nếu sử dụng Javascript thuần mà muốn Selector thì bạn sẽ phải viết rất dài, nhưng với jQuery thì việc đó rất đơn giản và ngắn.
Trong bài viết này, tôi sẽ chia sẻ danh sách các Selector hay dùng trong jQuery.
Nếu bạn đã học qua CSS thì rất đơn giản bởi vì Selector trong jQuery có cú pháp giống Selector trong CSS. Nếu chưa học thì cũng không sao, hãy đọc hết bài viết này.
Chọn tất cả các thành phần của HTML
Cú pháp:
$('*')
Dùng selector này có thể sẽ gây tốn tài nguyên nếu trang web của bạn có nhiều thẻ HTML
Ví dụ:
$('*').css('color', 'blue');
Chọn theo thẻ HTML
Cú pháp:
$('tagname')
Ví dụ:
$('p').css('color', 'red');
Chọn theo class
Cú pháp:
$('.ten_class')
Ví dụ:
$('.col_item').css('background', 'green');
Chọn theo ID
Cú pháp:
$('#ten_id')
Ví dụ:
$('#header').css('color', 'black');
Chọn nhiều bộ chọn
Cú pháp:
$('selector1, selector2, selector3')
Ví dụ:
$('#header, .container, body').css('color', 'green');
Chọn nhiều bộ chọn trên 1 thẻ HTML
Cú pháp:
Ví dụ:
$('div#header').css('color', 'black');
Chọn thành phần con dựa vào cha
Cú pháp:
Ví dụ:
$('.menu>li>a').css('font-weight', 'bold');
Chọn tất cả các thành phần con
Cú pháp:
Ví dụ:
Chọn thành phần với một vị trí cụ thể
Cú pháp:
Trong đó:
- index là vị trí của thành phần (Bắt đầu từ 0)
- Nếu muốn duyệt từ dưới lên hãy thêm dấu trừ (-) vào trước index (Bắt đầu từ -1)
Ví dụ:
Chọn thành phần lớn hơn vị trí chỉ định
Cú pháp:
$('selector:gt(index)')
Ví dụ:
$('p:gt(2)').css('color', 'red');
Chọn thành phần nhỏ hơn vị trí chỉ định
Cú pháp:
Ví dụ:
$('p:lt(2)').css('color', 'red');Chọn các thành phần ở vị trí lẻ
Cú pháp:
Ví dụ:
Chọn các thành phần ở vị trí chẵn
Cú pháp:
Ví dụ:
$('p:odd').css('color','red');
Chọn thành phần đầu tiên
Cú pháp:
Ví dụ:
Chọn thành phần cuối cùng
Cú pháp:
Ví dụ:
Các thành phần đang chuyển động
Cú pháp:
Ví dụ:
Chọn các thành phần chứa thuộc tính xác định
Cú pháp:
Ví dụ:
Selector trong form
Ngoài cách sử dụng các selector phía trên, trong form sẽ có các selector đặc biệt như sau:
Chọn các thẻ có input type=text
Chọn các thẻ input type=button
Chọn tất cả các thẻ input có type=checkbox
Chọn tất cả các thẻ input đang được checked
Chọn tất cả các thẻ input đang disabled
Chọn tất cả các thẻ input đang enabled
Chọn tất cả các thẻ có type=file
Chọn thẻ input đang được focus