Jquery Selector

10/09/2019

Bài sau » « Bài trước

jQuery selector là một trong những phần quan trọng nhất của thư viện jQuery.

jQuery selector cho phép bạn chọn và thao tác với các phần tử HTML.

Các jQuery selector được sử dụng để "tìm" (hoặc chọn) các phần tử HTML dựa theo tên thẻ HTML, id, class, types, attributes, giá trị của các attributes và nhiều hơn nữa. Nó dựa trên các CSS selector hiện có và ngoài ra, nó có một số bộ chọn tùy chỉnh riêng.

Tất cả các bộ chọn trong jQuery bắt đầu bằng dấu $ và dấu ngoặc đơn: $()

HTML Selector

jQuery selector chọn các phần tử dựa theo tên phần tử HTML.

Ví dụ: chọn tất cả các thẻ <p>

$("p")

Khi user click vào button thì tất cả thẻ <p> sẽ ẩn:

$(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); });

#id Selector

jQuery selector #id cho phép chọn thẻ HTML có thuộc tính id chỉ định.

Một #id phải là duy nhất trong một trang, vì vậy bạn nên sử dụng bộ chọn #id khi bạn muốn tìm một yếu tố duy nhất.

Để tìm một phần tử có id cụ thể, hãy viết một ký tự #, theo sau là id của phần tử HTML:

$("#test")

Khi user click vào button thì thẻ HTML có id="test" sẽ ẩn.

$(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); });

Class Selector

jQuery selector .class cho phép chọn thẻ HTML có thuộc tính class chỉ định.

Để tìm các phần tử với một class cụ thể, hãy viết một ký tự dấu chấm . , theo sau là tên của lớp:

$(".test")

Khi user click vào button thì thẻ HTML có class="test" sẽ ẩn.

$(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); });

Danh sách các selector

SelectorCú phápMô tả
*$("*")Chọn tất cả phần tử
#id$("#lastname")Chọn phần tử có id="lastname"
.class$(".intro")Chọn tất cả phần tử có class="intro"
.class,.class$(".intro,.demo")Tất cả phần tử có class="intro" hoặc class="demo"
element$("p")Tất cả thẻ <p>
el1,el2,el3$("h1,div,p")Tất cả thẻ <h1>, <div> hoặc <p>
   
:first$("p:first")Chọn thẻ <p> đầu tiên
:last$("p:last")Chọn thẻ <p> cuối cùng
:even$("tr:even")Chọn tất cả <tr> vị trí chẵn (0,2,4,...)
:odd$("tr:odd")Chọn tất cả <tr> vị trí lẻ (1,3,5,...)
   
:first-child$("p:first-child")Chọn thẻ <p> vị trí đầu tiên của cha nó
:first-of-type$("p:first-of-type")Chọn thẻ <p> đầu tiên trong các thẻ <p> của cha nó
:last-child$("p:last-child")Chọn thẻ <p> vị trí cuối cùng của cha nó
:last-of-type$("p:last-of-type")Chọn thẻ <p> cuối cùng trong các thẻ <p> của cha nó
:nth-child(n)$("p:nth-child(2)")Chọn thẻ <p> ở vị trí thứ 2
:nth-last-child(n)$("p:nth-last-child(2)")Chọn thẻ <p> ở vị trí thứ 2 đếm từ cuối lên
:nth-of-type(n)$("p:nth-of-type(2)")Chọn thẻ <p> vị trí thứ 2 trong các thẻ <p> của cha nó
:nth-last-of-type(n)$("p:nth-last-of-type(2)")Chọn thẻ <p> vị trí thứ 2 trong các thẻ <p>, đếm từ cuối lên của cha nó
:only-child$("p:only-child")Chọn thẻ <p> là phần tử con duy nhất của cha nó
:only-of-type$("p:only-of-type")Chọn thẻ <p> là phần tử con duy nhất  của thẻ <p> của cha nó
   
parent > child$("div > p")Chọn thẻ <p> là con trực tiếp của thẻ <div>
parent descendant$("div p")Chọn thẻ <p> là con, cháu của thẻ <div>
element + next$("div + p")Chọn thẻ <p> là phần tử tiếp theo sau thẻ <div>
element ~ siblings$("div ~ p")Chọn thẻ <p> là anh, em cùng cấp với thẻ <div>
   
:eq(index)$("ul li:eq(3)")Chọn phần tử li ở vị trí thứ 4 (index đếm từ 0)
:gt(no)$("ul li:gt(3)")Danh sách phần tử li có index lớn hơn 3
:lt(no)$("ul li:lt(3)")Danh sách phần tử li có index nhỏ hơn 3
:not(selector)$("input:not(:empty)")Tất cả input không trống
   
:header$(":header")Tất cả phần tử header <h1>, <h2> ...
:animated$(":animated")Tất cả phần tử chuyển động
:focus$(":focus")Phần tử vừa được focus
:contains(text)$(":contains('Hello')")Tất cả phần tử có chứa text "Hello"
:has(selector)$("div:has(p)")Tất cả thẻ <div> có chứa thẻ <p>
:empty$(":empty")Tất cả phần tử đang rỗng
:parent$(":parent")Tất cả phần tử là cha của phần tử khác
:hidden$("p:hidden")Tất cả thẻ <p> đang ẩn
:visible$("table:visible")Tất cả table đang hiển thị
:root$(":root")Phần tử document's root
:lang(language)$("p:lang(en)")Tất cả thẻ <p> có thuộc tính lang có giá trị bắt đầu là "en"
   
[attribute]$("[href]")Tất cả phần tử có thuộc tính href
[attribute=value]$("[href='default.htm']")Tất cả phần tử có thuộc tính href bằng "default.htm"
[attribute!=value]$("[href!='default.htm']")Tất cả phần tử có thuộc tính href không bằng "default.htm"
[attribute$=value]$("[href$='.jpg']")Tất cả phần tử có thuộc tính href kết thúc bằng ".jpg"
[attribute|=value]$("[title|='Tomorrow']")Tất cả phần tử có thuộc tính title bằng 'Tomorrow', hoặc bắt đầu là 'Tomorrow' theo sau là dấu gạch
[attribute^=value]$("[title^='Tom']")Tất cả phần tử có thuộc tính title bắt đầu bằng "Tom"
[attribute~=value]$("[title~='hello']")Tất cả phần tử có thuộc tính title chứa chính xác chữ "hello"
[attribute*=value]$("[title*='hello']")Tất cả phần tử có thuộc tính title chứa từ "hello"
   
:input$(":input")Tất cả thẻ input
:text$(":text")Tất cả thẻ input có type="text"
:password$(":password")Tất cả thẻ input có type="password"
:radio$(":radio")Tất cả thẻ input có type="radio"
:checkbox$(":checkbox")Tất cả thẻ input có type="checkbox"
:submit$(":submit")Tất cả thẻ input có type="submit"
:reset$(":reset")Tất cả thẻ input có type="reset"
:button$(":button")Tất cả thẻ input có type="button"
:image$(":image")Tất cả thẻ input có type="image"
:file$(":file")Tất cả thẻ input có type="file"
:enabled$(":enabled")Tất cả thẻ input enabled 
:disabled$(":disabled")Tất cả thẻ input disabled
:selected$(":selected")Tất cả thẻ input selected
:checked$(":checked")Tất cả thẻ input checked
Bài sau » « Bài trước
Back to top