Bài học trước, chúng ta đã được tìm hiểu một số selector của jQuery được ứng dụng từ  CSS selector, hôm nay chúng ta sẽ tìm hiểu một số selector riêng của jQuery

Các selector riêng của jQuery khá giống với Pseudo selectors (Ảo) của CSS, các selector riêng của jQuery là những selector được thêm vào sau dấu :

$(‘:input’) //Chọn tất cả các phần từ input 

Hoặc chúng ta cũng có thể kết hợp để chọn các phần tử  rõ ràng hơn như sau sau:

$(‘input:text’) //Chọn tất cả các thành phần input có type=”text”

1, Form selector

jQuery cung cấp những selector để quá trình làm việc với Form trở nên đơn giản hơn. Bảng bên dưới mô tả các jQuery selector khi làm việc với Form:

:first selector cho phép chọn phần tử đầu tiên theo thứ tự xuất hiện của nó trong tài liệu HTML

<div>Row 1</div>
<div>Row 2</div>
<div>Row 3</div>

Chúng ta sẽ sử dụng :first selector để chọn thành phần <div> đầu tiên ở ví dụ trên như sau:

 $(‘div:first’).css{color : “red”);

Kết quả là thành phần <div>Row 1</div> sẽ được chọn và hiện thị với màu đỏ

Xem demo và thực hành

Ngược lại với :first selector, :last selecotor sẽ chọn phần tử cuối cùng theo thứ tự xuất hiện của nó trong tài liệu HTML.

Chúng ta sẽ chọn thành phần <div>Row 3</div> từ ví dụ trên như sau

$(‘div:last).css{color : “red”);

Xem demo và thực hành

4, :first-child selector

first-child selector cho phép chọn thành phần con đầu tiên của một phần tử nào đó trong cấu trúc DOM của tài liệu HTML

<div>
   <span>CSS</span>
   <span>HTML</span>
   <span>Jquery</span>
</div>
<div>
   <span>PHP</span>
   <span>ASP</span>
   <span>ASP.NET</span>
</div>

Chúng ta sử dụng dụng :first-child để chọn thành phần <span>CSS</span> và <span>PHP</span> là con đầu tiên của div trong code HTML bên trên và cho hiện thị với màu đỏ như sau:

$(“div span:first-child”).css({“color” : “red”})

Xem demo và thực hành

5, :last-child selector

Ngược lại với :first-child selector, :last-child chọn thành phần là con cuối cùng của một phần tử nào đó trong cấu trúc DOM

Chúng ta sẽ sử dụng :last-child selector để chọn thành phần <span>Jquery</span> và <span>ASP.NET</span> ở ví dụ trên như sau:

$(“div span:last-child”).css({“color” : “red”})

Xem demo và thực hành

6,Contains selector

$(“:contains(‘Nội dung chỉ định’)”)

Contains selector cho phép chọn tất cả các phần tử mà nội dung của nó có chứa nội dung do chúng ta chỉ định.

Nội dung chỉ định phân biệt chữ hoa và chữ thường ví dụ John khác john

Ở ví dụ sau, chúng ta sẽ chọn tất cả các thành phần div mà nội dung của nó có chứa từ John.

$(‘div:contains(“John”)).css(“color”, “red”);

Xem demo và thực hành

:header selector sẽ chọn toàn bộ các thành phần Heading tags (Các thẻ từ h1 -> h6)

<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>

Chúng ta sẽ sử dụng :header selector để chọn thành phần h1 và h2 ở ví dụ trên và cho hiện thị với màu xanh như sau:

$(‘:header’).css({ color : “green” });

Xem demo và thực hành

:has() selector là cách chọn tất cả các phần từ mà nó có ít nhất một phần tử con được chỉ định

Ví dụ sau sẽ chọn tất cả các thành phần div sao cho nó có chứa ít nhất một thành phần p

<div>
  <p>Thành phần div được chọn do có ít nhất một thành phần con p</p>
</div>
<div>Thành phần div không được chọn do không có thành con p</div>

$(‘div:has(p)’).css({ border: “1px solid #cfcfcf” , width : “150px”});

Xem demo và thực hành

:empty selector sẽ chọn tất cả các thành phần mà nó không chứa các thành phần con, hoặc không có nội dung (empty)

<div></div>
<div>HTML</div>
<div>jQuery</div>

Ở ví dụ trên ta thấy, thành phần div đầu tiên không có dữ liệu, ta sẽ sử dụng jQuery để thêm vào thành phần này một câu thông báo như sau:

$(‘div:empty’).text(‘Thành phần Empty’).css({color : “green”});

Kết quả:

Thành phần Empty

HTML

jQuery

Xem demo và thực hành

:parent selector ngược lại với :empty, nó sẽ chọn tất cả các thành phần tồn tại nội dung bên trong nó hoặc chứa các thành phần con

$(‘div:parent’) //Chọn tất cả các thành phần div đã có dữ liệu

Xem demo và thực hành

Các selector theo chỉ số (index)

:eq() selector cho phép chúng ta chọn phần tự theo chỉ số (index) của nó trong cấu trúc HTML, tương tự như mảng trong javascript, các chỉ số được bắt đầu bằng vị trí 0

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
   <li>Item 5</li>
   <li>Item 6</li>
   <li>Item 7</li>
   <li>Item 8</li>
</ul>

Chúng ta sẽ chọn thành phần <li>Item 3</li> như sau

            $(“li:eq(2)”).css({color : “blue”});

Xem demo và thực hành

:lt(index), lt là viết tắt của less than (nhỏ hơn, ít hơn). lt() selector là cách chọn các phần tử có vị trí nhỏ hơn giá trị index, index được dánh dấu từ vị trị 0

Chúng ta sẽ chọn thành phần <li>Item 1</li> đến <li>Item 4</li> như sau

$(“li:lt(4)”).css({ color : “green”})

Xem demo và thực hành

gt là viết tắt của greater than (lớn hơn). gt() selector cho phép chọn các phần tử có vị trí lớn hơn giá trị index, index được dánh dấu từ vị trị 0

Chúng ta sẽ chọn thành phần <li>Item 4</li> đến <li>Item 8</li> như sau

$(“li:gt(2)”).css({ color : “green”})

Xem demo và thực hành

Trong tiếng anh: Odd (lẻ), even (chẵn). odd selector và :even selector là cách chọn các đối tượng theo vị trí chẵn, lẽ. Thường được sử dụng để định dạng bảng theo kiểu kẻ sọc (giữa các dòng chẵn lẽ)

<table width="400" border="1">
    <tr><td>Row #1</td><td>index 0</td></tr>
    <tr><td>Row #2</td><td>index 1</td></tr>
    <tr><td>Row #3</td><td>index 2</td></tr>
    <tr><td>Row #4</td><td>index 3</td></tr>
</table>

Bây giờ chúng ta sẽ tô màu xanh cho các dòng lẻ Row #1, Row #3 như sau:

            $(“tr:even”).css({background: “green”});

Chúng ta đang định dạng cho các ô lẻ, nhưng lại sử dụng even (chẵn), Bởi vì chỉ số (index) của odd và even được đánh từ 0, do đó dòng Row #1 có chỉ số là 0 (chẵn), Row 3 có chỉ số là 2 (chẵn) và chúng ta sử dụng even để chọn các dòng có chỉ số chẵn này, và trong thực tế đó là các dòng lẻ Row #1 và #3.

Tương tự, chúng ta có thể sử dụng $(“tr:odd”) để định dạng cho các dòng Row #2 và #4

Xem demo và thực hành

:nth-child selector cho phép chọn các phần tử theo vị trí của index, các giá trị của odd và even.  Khác với eq, gt, lt, odd, even, chỉ số của :nth-child được bắt đầu từ số 1, và đây là selector duy nhất của jQuery có chỉ số được bắt đầu từ 1.

Chúng ta sẽ định dạng các dòng Row #1 và Row #3 (các dòng lẻ) bằng odd (lẻ) kết hợp với :nth-child như sau:

$(“tr:nth-child(odd)”).css({background: “green”});

Nếu không sử dụng nth-child, chúng ta phải thay odd bằng even như ví dụ trên.

Xem demo và thực hành

KẾT LUẬN

Trên đây là những selector riêng của jQuery, trong thực tế không phải lúc nào chúng ta cũng sử dụng tất cả các selector riêng, tùy từng trường hợp mà chúng ta sẽ sử dụng những selector khác nhau

Selector được sử dụng nhiều nhất là: type selector (tên phần tử), class selector và id selector.

Tagged as: jQuery, jquery selector

Peter Tran là một Coder, công việc hiện tại của anh ấy là phát triển ứng dụng web với PHP, thời gian rảnh anh ấy thường viết Blog chia sẻ những kiến thức về lập trình và phát triển website. Hãy xem trang cá nhân của anh ấy trên Facebook và Twitter

Bài liên quan

• jQuery selector (Phần 1)
• Làm việc với CSS trong jQuery
• Sửa đổi cấu trúc HTML trong jQuery (Phần cuối)
• Sửa đổi cấu trúc HTML trong jQuery (Phần 3)
• Sửa đổi cấu trúc HTML trong jQuery (Phần 2)