JQuery căn bản – JQuery Selectors
Có một câu slogan của JQuery được gắn ở bất kỳ đâu là “write less, do more” , hiểu đơn giản chính là viết mã ít mà hiệu quả đạt được lại tối đa. Điều này đúng so với javascript cũng như các thư viện khác của javascirpt. Chính vì lẽ đó mà các JQuery Selector được xây dựng theo hướng đơn giản và dễ dùng. Chúng ta hãy cùng khám phá một số bộ chọn JQuery phổ biến và cách hướng tới các phần tử trong cấu trúc DOM.
Các JQuery Selector đơn giản
| Thành phần Selector | Jquery Selector( ví dụ) | Ý nghĩa | |
| CSS Selector | Thẻ HTML | $(‘p’) | Chọn tất cả các thẻ p của tài liệu html |
| ID | $(‘#myid’), | Chọn tất cả các phần tử có thuộc tính id=’myid’. Một tài liệu html chuẩn thì không bao giờ có nhiều hơn 1 phần tử có cùng id nên bộ chọn này là độc lập | |
| Class | $(‘.myclass’) | Chọn tất cả các phần tử có thuộc tính class =’myclass’. | |
| Form Selector(các bộ chọn của form) | :text, :checkbox, :radio, :image, :file, :hidden, :password, :submit, :reset | Ví dụ $(‘:input’): chọn tất cả các thành phần <input type=’submit’> | Chọn các thành phần input có thuộc tính type trùng với selector. |
| :input | $(‘:input’) | Chọn tất cả các thành phần input của form | |
| :button | $(‘:button’) | Chọn tất cả các thành phần button hoặc các thành phần <input type=”button” /> | |
| :checked | $(‘:checked’) | Các nút radio hoặc ô checkbox được chọn | |
| :selected | $(‘:selected’) | Tất cả các phần tử option của select được chọn | |
| :enable | $(‘:enable’) | Tất cả các thành phần của form được bật | |
| :disable | $(‘disable’) | Tất cả các thành phần của form bị tắt | |
| Attribute Selector( bộ chọn dựa trên thuộc tính của phần tử) | attr = val | $(“input[name=’man’]”) | Chọn tất cả các phần tử input có name=’man’ |
| attr != val | $(“input[name!=’man’]”) | Chọn các phần tử input không có thuộc tính name hoặc có name khác ‘man’ | |
| attr^=val | Chọn các phần tử có thuộc tính mà giá trị của nó bắt đầu là ‘val’ | ||
| attr $= val | Chọn các phần tử có thuộc tính attr mà giá trị kết thúc là ‘val’ | ||
| …………………. | |||
| Selector dành riêng của JQuery | :lt( n ) | $(“li:lt( 3 )”) | Chọn các phần tử có thứ tự chỉ số bé hơn n trong 1 danh sách( tính từ 0) |
| :gt( n ) | $(“td:gt( 2 )”) | Các phần tử có thứ tự trong 1 danh sách lớn hơn n | |
| :odd | $(“tr:odd”) | Các phần tử có thứ tự lẻ( tính từ 0) | |
| :even | $(“ul:even”) | Các phần tử có thứ tự chẵn | |
| :eq( n ) | $(“li:eq( 0 )”) | Chọn các phần tử có chỉ số là n trong cấu trúc DOM. |
Bảng trên chỉ là một số lượng ít các Jquery Selector mà chúng ta hay gặp được phân loại, chi tiết hơn các bạn có thể tìm hiểu thêm tại: http://api.jquery.com/category/selectors/ .
Ví dụ minh họa:
</pre> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ul> <pre>
Chúng ta sẽ tô các thẻ li chẵn màu xanh như sau:
$( document ).ready(function() {
$( “li:even” ).css( “color”, “green” );
}
);
Kết quả:
Kết hợp các JQuery Selector
Các bộ chọn đơn giản có thể kết hợp thông qua các toán tử đặc biệt để đại diện cho mối quan hệ giữa các thành phần trong cây tài liệu của chúng ta. Các kiếu kết hợp này cũng được CSS3 hỗ trợ.
Một số cách kết hợp:
| Cách kết hợp | Ý nghĩa |
| $(“A B”) | Chọn tất cả các phần tử B( Jquery Selector) trong tài liệu là con của phần tử A |
| $(“A > B”) | Chọn tất cả các phần tử B trong tài liệu là con trực tiếp của các phần tử A |
| $(“A ~ B”) | Chọn các phần tử B theo sau phần tử A( anh chị em) |
| $(“A + B”) | Chọn các phần tử B theo sát ngay sau phần tử A( tức là giữa A và B không có phần tử nào khác) |
Ví dụ:
"blockquote i" // chọn phần tử i là con của phần tử <blockquote> "ol > li" // một phần tử li là con trực tiếp của phần tử <ol> "#output + *" // một phần tử bất kỳ ngay sát sau phần tử có id=”output” "div.note > h1 + p" // chọn một thẻ p ngay sát sau thẻ h1 là con của 1 thẻ div có class=”note”
Chú ý là chúng ta có thể kết hợp nhiều Jquery Selector đơn lẻ với nhau chứ không chỉ giới hạn ở 2 bộ chọn. Các kết hợp được duyệt từ trái sang phải.
Nhóm các Jquery Selector
Đây là cách hiệu quả và tiện lợi để nhóm nhiều phần tử rời rạc trong một cây tài liệu vào trong một xử lý duy nhất.
"h1, h2, h3" // tất cả các thẻ h1, h2, h3 đều thỏa mãn "#p1, #p2, #p3" // chọn các phần tử có id là ‘p1’, ‘p2’, hoặc ‘p3’ "body>p, div.note>p" // chọn các thẻ p là con trực tiếp của <body> hoặc của thẻ <div > có class=’note’.
Chú ý rằng CSS và Jquery không cho phép chúng ta đặt các bộ chọn nhóm hoặc các nhóm kết hợp trong dấu ngoặc đơn và sử dụng nó như một bộ chọn đơn lẻ:
(h1, h2, h3)+p //không hợp lệ h1+p, h2+p, h3+p </span > //đúng
Các hàm chọn JQuery Selector
Ngoài việc chọn các phần tử của cây tài liệu( DOM) bằng cách dùng hàm $(), Jquery còn định nghĩa các hàm cho phép chọn được Jquery Selector.
Một số hàm:
first(): trả về một Jquery Object chỉ chứa phần tử được chọn đầu tiên.
last(): trả về 1 Jquery Object chỉ chứa phần tử được chọn cuối cùng.
eq(): hàm này tổng quát 2 hàm trên, trả về một Jquery Object duy nhất bởi chỉ số của nó.
Ví dụ:
var paras = $("p"); paras.first() // chọn thẻ p đầu tiên paras.last() // chọn thẻ p cuối cùng trong tài liệu paras.eq(1) // chọn phần tử <p> thứ 2 trong tài liệu paras.eq(-2) // chọn 2 phần tử <p> cuối cùng paras[1] // thẻ p thứ 2
Nếu bạn muốn chọn 1 dãy các phần tử liên tiếp các bạn có thể dùng hàm slice()
$("p").slice(2,5) // phần tử thứ 3, 4 và 5 được chọn $("div").slice(-3) // chọn 3 phần tử cuối cùng
Ngoài ra còn rất nhiều hàm như not(), has(), add(), find(), next((), prev(), children(), end() …….. các bạn tự tìm hiểu thêm.
Tối ưu hóa bộ chọn
Hầu hết chúng ta đọc văn bản từ trái sang phải, tuy nhiên có một điều mà bạn nên biết đó là trình duyệt đọc và phân tích bộ chọn của Jquery cũng như CSS từ phải qua trái. Điều này có thể làm bạn hơi bất ngờ. Tuy nhiên biết được điều đó có thể giúp trang web của bạn được đọc nhanh hơn.
Ví dụ với bộ chọn sau:
$(“.book p”)
Thông thường với bộ chọn trên bạn nghĩ rằng Jquery sẽ truy vấn tới các phần tử trong DOM có class=’book’ rồi di chuyển để tìm thẻ p là con của phần tử đó, nhưng sự thật là nó làm ngược lại. Các thẻ p được tìm đầu tiên sau đó đi lên các nút cha mẹ để tìm lớp ‘book’.
Do đó sẽ nhanh hơn nếu chúng ta dùng thay thế như sau:
$(“.book”).find(“p”) hoặc $(“.book”).children(“p”)
Một số chú ý sau có thể giúp bạn tối ưu được các Jquery Selector
Chọn các thành phần ID bất kỳ lúc nào có thể
$( "#container div.robot" ); // chậm $( "#container" ).find( "div.robot" ); //nhanh hơn
Điều này có thể giải thích bởi mỗi ID trong tài liệu chuẩn chỉ có thể tìm được duy nhất. Ngoài ra các trình duyệt được xây dựng sẵn hàm document.getElementById() – nó chạy nhanh hơn công cụ chọn riêng của Jquery (Sizzle).
Đặt các phần tử cụ thể nhất của bộ chọn sang bên phải, ví dụ:
$( "div.data .top" ); //chưa tối ưu $( ".data td.top" ); //tối ưu
Tránh dùng các bộ chọn phổ biến, có thể tìm thấy ở bất kỳ đâu, ví dụ:
Sử dụng $( “.buttons” ).children() hơn $( “.buttons > *” );
Hoặc sử dụng $( “.category input:radio” ) thay vì $( “.category *:radio” );
Lời kết
Bài viết chỉ đề cập được những nội dung cơ bản về Jquery Selector. Các bạn có thể tìm hiểu và sẽ phát hiện ra nhiều điều thú vị xung quanh nó, hẹn gặp lại!