jQuery - Selector

jQuery selector là gì?

jQuery selector là một cách gọi đến một hoặc nhiều đối tượng có một số đặc tính nhất định.

Ví dụ: gọi theo name, loại element, theo class,...

Các selector căn bản:

1. #element_id: Trả về một đối tượng có thuộc tính id được truyền vào.
2. [name='element_name']: Trả về một nhóm đối tượng có thuộc tính name được truyền vào.
3. element_type: Trả về một nhóm đối tượng cùng một loại. VD:
   • jQuery("div") sẽ trả về toàn bộ các đối tượng là thẻ div.
   • jQuery("form input") sẽ trả về toàn bộ các đối tượng là thẻ input nằm trong thẻ form.
   • jQuery("#form_id input) sẽ trả về toàn bộ các đối tượng là thẻ input nằm trong thẻ form có id là id truyền vào.
4. Kết hợp: cách gọi này gần giống như css sẽ tính từ trái sang phải theo thứ tự cha con.
   • jQuery("#test_table tr") trả ra toàn bộ các thẻ tr của table có id là test_table.
   • jQuery("div span") trả ra toàn bộ các thẻ span là con của thẻ div.
   • jQuery("div p span") trả ra toàn bộ các thẻ span thẻ con của p và p phải là thẻ con của div.

---

Một số phần mở rộng của selector:

1. .class_name : Thường dùng với selector theo name và type. Trả ra một nhóm các đối tượng có class name tương ứng. VD:
   • jQuery("div.test") sẽ trả ra một nhóm các đối tượng là thẻ div có thuộc tính class là test.
   • jQuery("#my_ul li.select") trả ra một nhóm các đối tượng là thẻ li có class là select và thẻ li là con của thẻ ul có id là my_ul.
2. :selected : Dùng để lấy ra các đối tượng có thuộc tính selected là true. VD:
   • jQuery("option:selected") sẽ trả ra một nhóm các option có thuộc tính selected bằng true.
3. :checked : Thường dùng với checkbox và radio để lấy ra những đối tượng được checked. VD:
   • jQuery("[name='checkbox_list_name']:checked") sẽ trả ra một nhóm các checkbox theo tên truyền vào có thuộc tính checked bằng true.
   • jQuery("[name='radio_name']:checked") sẽ trả ra một nhóm các radio theo tên truyền vào có thuộc tính checked bằng true.
4. :disabled :Trả về các thẻ có thuộc tính disabled. VD:
   • jQuery(":disabled") trả về toàn bộ các thẻ có thuộc tính disabled.
   • jQuery("input:disabled") trả về toàn bộ các thẻ input có thuộc tính disabled.
   • jQuery("form input:disabled") trả về toàn bộ các thẻ input nằm trong thẻ form có thuộc tính disabled.
5. :odd : Trả về các thẻ có số thứ tự lẻ của đối tượng được chọn. VD:
   • jQuery("li:odd") trả về toàn bộ các thẻ li trên toàn trang web có thứ tự lẻ(1, 3, 5...).
   • jQuery("#ul_list li:odd") trả về toàn bộ các thẻ li con của đối tượng có id là ul_list có thứ tự lẻ.
   • jQuery("tr:odd") trả về toàn bộ các thẻ tr trên toàn trang web có thứ tự lẻ(1, 3, 5..).
   • jQuery("#mytable tr:odd") trả về toàn bộ các thẻ tr con của đối tượng có id là mytable có thứ tự lẻ.
6. :even : Trả về các thẻ có số thứ tự chẵn của đối tượng được chọn. VD:
   • jQuery("li:even") trả về toàn bộ các thẻ li trên toàn trang web có thứ tự chẵn(2, 4, 6...).
   • jQuery("#ul_list li:even") trả về toàn bộ các thẻ li con của đối tượng có id là ul_list có thứ tự chẵn.
   • jQuery("tr:even") trả về toàn bộ các thẻ tr trên toàn trang web có thứ tự chẵn(2, 4, 6...).
   • jQuery("#mytable tr:even") trả về toàn bộ các thẻ tr con của đối tượng có id là mytable có thứ tự chẵn.