- Tham gia
- 28/02/2015
- Bài viết
- 16,828
- Được Like
- 12,687
Tìm hiểu và cách sử dụng 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
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:
Chúng ta sẽ tô các thẻ li chẵn màu xanh như sau:
Kết quả:
http://jsfiddle.net/JU9V6/
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:
Ví dụ:
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.
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ẻ:
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ụ:
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()
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:
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ể
Đ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ụ:
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ó!
Chúc các bạn thành công.
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
Ví dụ minh họa:
Mã:
</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:
Mã:
$( document ).ready(function() {
$( "li:even" ).css( "color", "green" );
});Kết quả:
http://jsfiddle.net/JU9V6/
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:
Mã:
"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.
Mã:
"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ẻ:
Mã:
(h1, h2, h3)+p //không hợp lệ
h1+p, h2+p, h3+p //đúngCá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ụ:
Mã:
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ứ 2Nế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()
Mã:
$("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ùngNgoà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:
Mã:
$(“.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ể
Mã:
$( "#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ụ:
Mã:
$( "div.data .top" ); //chưa tối ưu
$( ".data td.top" ); //tối ưuTrá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ó!
Chúc các bạn thành công.
Nguồn: thachpham.com
Bài viết liên quan
Bài viết mới
