JS - Selector là gì ? Basic Filter Selector
by My Love
18/04/2019, 9:37 AM | 18/04/2019, 3:48 PM | 662 | 040
1. jQuery Selector là gì ?
Cũng tương tự như
DOM trong javascript,
Selector trong jQuery giúp ta truy vấn đến một một phần tử nào đó trong tài liệu HTML. Trong tài liệu HTML có rất nhiều phần tử với các tên, thuộc tính khác nhau, selector gồm một bộ các cú pháp giúp tìm kiếm và lấy về đối tượng phù hợp. Selector trong jQuery sử dụng cú pháp của CSS để truy vấn đến các phần tử vậy nên nếu bạn đã học qua
CSS thì rất dễ nắm bắt các cú pháp của selector.
Ví dụ : Lấy tất cả thẻ div trong tài liệu
// sử dụng javascript
var Name = document.getElementsByTagName('div');
// sử dụng jQuery
var Name = $('div');
2. Basic Selector trong jQuery
Bảng dưới đây liệt kê các
Basic Selector cơ bản và thường được sử dụng trong jQuery :
| Cú pháp |
Ý nghĩa |
| $("*") |
Lấy tất cả các thẻ trong tài liện HTML |
| $(".Class-Name") |
Lấy thẻ có class là Class-Name |
| $("Element") |
Lấy theo tên thẻ HTML |
| $("#id") |
Lấy theo id thẻ HTML |
| $("slector1, selector2") |
Đưa vào nhiều selector được cách nhau bởi dấu phẩy |
Một số ví dụ :
- Đổi màu cho thẻ có id=01
$('#01').css('color','blue');
- Đổi màu cho thẻ có class=MyClass
$('.MyClass').css('color','blue');
- Đổi màu cho thẻ có id=01 hoặc class=MyClass
$('.MyClass, #01').css('color','blue');
3. Basic Filter Selector
Sau khi truy vấn đến các phần tử HTML rồi thì thường sẽ trả về một mảng các phần tử, ví dụ bạn dùng cú pháp
$('.MyClass') để lấy các thẻ có class=MyClass nó sẽ trả về một mảng các phần tử vì trong tài liệu HTML có thể có nhiều thẻ có cùng tên class. Bây giờ bạn muốn lấy phần tử đầu tiên hoặc cuối cùng, hay bất kì phần tử nào trong mảng đó thì phải sử dụng thêm bộ lọc để lấy đúng phần tử mong muốn. Bảng dưới đây giới thiệu một số bộ lọc Filter cơ bản :
| Cú pháp |
Mô tả |
| $( "selector:animated" ) |
Tìm thẻ HTML đang có hiệu ứng animate Ví dụ : |
| $( "selector:eq(n)" ) |
Tìm thẻ có số thứ tự là n trong kết quả trả về. Nếu n là số dương sẽ đếm từ trên xuống, nếu là số âm sẽ tính từ dưới lên. |
| $( "selector:even" ) |
Lấy phần tử đứng vị trí lẻ trong kết quả trả về của selector |
| $( "selector:odd" ) |
Lấy phần tử đứng vị trí chẵn trong kết quả trả về của selector |
| $( "selector:first" ) |
Lấy phần tử đứng vị trí đầu tiên trong kết quả trả về của selector |
| $( "selector:last" ) |
Lấy phần tử đứng vị trí cuối cùng trong kết quả trả về của selector |
| $( "selector:focus" ) |
Lấy thẻ mà con trỏ đang thao tác tại đó |
| $( "selector:gt(n)" ) |
Lấy những thẻ có số thứ tự lớn hơn n trong kết quả trả về |
| $( "selector:lt(n)" ) |
Lấy những thẻ có số thứ tự nhỏ hơn n trong kết quả trả về |
| $( "selector:lang( value )" ) |
Lấy những thẻ có thuộc tính lang và giá trị của nó bằng với value |
| $( "selector:header" ) |
Lấy những thẻ là header (h1, h2, h3, h4, h5, h6) |
| $( "selector:not( selector)" ) |
Lấy những thẻ đặc điểm không giống với selector truyền vào trong kết quả trả về. |
| $( "selector:root" ) |
Lấy những thẻ có cấp cao nhất trong kết quả trả về |
Ví dụ :
// đổi màu cho thẻ div đang có hiệu ứng animate
$('div:animated').css('background-color','blue');
// đổi màu cho thẻ div thứ 2 từ trên xuống, vì bắt đầu đếm từ 0
$('div:eq(1)').css('color','blue');
// đổi màu cho thẻ div thứ 2 từ dưới lên
$('div:eq(-2)').css('color','blue');
// đổi màu cho thẻ div ở vị trí lẻ trong kết quả trả về
$('div:even').css('background-color','blue');
// đổi màu cho thẻ div ở vị trí chẵn trong kết quả trả về
$('div:odd').css('background-color','blue');
// đổi màu cho thẻ div ở vị trí đầu tiên trong kết quả trả về
$('div:first').css('background-color','blue');
// đổi màu cho thẻ div ở vị trí cuối cùng trong kết quả trả về
$('div:last').css('background-color','blue');