Tổng hợp một số bộ chọn jQuery Selector khác (phần 2)

views

A+A-

PrintEmail

Bài viết này tiếp tục đề cập đến một số bộ chọn jQuery về thuộc tính attribute như href, title, idv.v.. Cùng tìm hiểu xem thế nào nhé

Để xem tất cả bộ chọn jQuery Selectors. Các bạn truy cập tại đây nhé

jQuery [attribute] Selector

Syntax

Bộ chọn jQuery [attribute] Selector có cú pháp

$("[attribute]")

Bộ chọn jQuery [attribute] Selector dùng để chọn tất cả những phần tử với thuộc tính được chỉ định.

Ví dụ

Chọn tất cả những phần tử có thuộc tính id, chẳng hạn như id="intro",id="title"

$("[id]")

Thử code »

Lưu ý: Tương tự nếu có thuộc tính href thì bạn dùng $("[href]")
Nếu có thuộc tính title thì bạn dùng $("[title]")
Nếu có thuộc tính lang thì bạn dùng $("[lang]")
Và nhiều thuộc tính khác nữa

jQuery [attribute=value] Selector

Syntax

Bộ chọn jQuery [attribute=value] Selector có cú pháp

$("[attribute=value]")

Bộ chọn jQuery [attribute=value] Selector dùng để chọn từng phần tử với thuộc tính kèm theo đó là giá trị được chỉ định.

Ví dụ

Chọn tất cả những phần tử có thuộc tính id có giá trị như sau id="title"

$("[id=title]")

Thử code »

Lưu ý: Đối với thuộc tính id, nếu chúng ta sử dụng bộ chọn jQuery #id Selector $("#title") thì sẽ chỉ chọn được phần tử đầu tiên có id chỉ định. Nhưng khi dùng bộ chọn [attribute=value] thì sẽ chọn hết tất cả những phần tử trùng thuộc tính id luôn nhé.

Tương tự nếu chọn tất cả những phần tử có thuộc tính class="intro" chúng ta sẽ dùng $("[class=intro]"). Hoặc có thể dùng theo bộ chọn jQuery .class Selector $(".intro").

jQuery [attribute!=value] Selector

Syntax

Bộ chọn jQuery [attribute!=value] Selector có cú pháp

$("[attribute!='value']")

Tham số	Mô tả
attribute	Tham số bắt buộc, tìm thuộc tính được chỉ định
value	Tham số bắt buộc, giá trị của thuộc tính được chỉ định

Dấu != trong cú pháp của bộ chọn này được hiểu là khác
Từ đó ta suy luận ra Bộ chọn jQuery [attribute!=value] Selector dùng để chọn những phần tử không có thuộc tính, hoặc có nhưng có giá trị khác với giá trị được chỉ định.
Những phần tử có cùng thuộc tính, nhưng nếu giá trị của thuộc tính khác với giá trị chỉ định thì vẫn sẽ được chọn nhé. Còn nếu khác hoặc không có thuộc tính thì chắc chắn sẽ được chọn rồi.

Ví dụ

Chọn tất cả những phần tử <p> không có thuộc tính class , hoặc có nhưng khác giá trị class="intro"

$("p[class!='intro']")

Thử code »

Lưu ý:Đối với thuộc tính class thì bộ chọn này tương đồng với bộ chọn :not(.class)

 $("p:not(.intro)")

Thử code »

jQuery [attribute$=value] Selector

Syntax

Bộ chọn jQuery [attribute$=value] Selector có cú pháp

$("[attribute$='value']")

Tham số	Mô tả
attribute	Tham số bắt buộc, tìm thuộc tính được chỉ định
value	Tham số bắt buộc, giá trị của thuộc tính được chỉ định

Bộ chọn jQuery [attribute*=value] Selector dùng để chọn những phần tử có thuộc tính được chỉ định mang giá trị có kết thúc là một chuỗi cụ thể.

Ví dụ

Chọn tất cả những phần tử <a> mà thuộc tính href có đuôi .xyz

$("a[href$='.xyz']")

Thử code »

jQuery [attribute|=value] Selector

Syntax

Bộ chọn jQuery [attribute|=value] Selector có cú pháp

$("[attribute|='value']")

Tham số	Mô tả
attribute	Tham số bắt buộc, tìm thuộc tính được chỉ định
value	Tham số bắt buộc, giá trị của thuộc tính được chỉ định

Bộ chọn jQuery [attribute|=value] Selector dùng để chọn những phần tử có thuộc tính được chỉ định mang giá trị là một chuỗi hoặc được bắt đầu là một chuỗi cụ thể và theo sau là dấu gạch ngang -, chẳng hạn như phần tử <p> có thuộc tính lang='en' hoặc lang='en-us' thì bạn dùng cú pháp là $("p[lang|='en']")

Ví dụ

Chọn tất cả những phần tử <p> mà thuộc tính title là Tomorrow hoặc bắt đầu bằng Tomorrow

$("p[title|='Tomorrow']")

Thử code »

jQuery [attribute^=value] Selector

Syntax

Bộ chọn jQuery [attribute^=value] Selector có cú pháp

$("[attribute^='value']")

Tham số	Mô tả
attribute	Tham số bắt buộc, tìm thuộc tính được chỉ định
value	Tham số bắt buộc, giá trị của thuộc tính được chỉ định

Bộ chọn jQuery [attribute^=value] Selector dùng để chọn những phần tử có thuộc tính được chỉ định mang giá trị là một chuỗi hoặc được bắt đầu là một chuỗi cụ thể (không cần thiết theo sau là dấu gạch ngang -), chẳng hạn như phần tử <p> có thuộc tính title='Hôm nay' hoặc title='Hôm nay là thứ hai' thì bạn dùng cú pháp là $("p[title^='Hôm nay']")

Ví dụ

Chọn tất cả những phần tử <p> mà thuộc tính title là Hôm nay hoặc bắt đầu bằng Hôm nay

 $("p[title^='Hôm nay']")

Thử code »

jQuery [attribute~=value] Selector

Syntax

Bộ chọn jQuery [attribute~=value] Selector có cú pháp

$("[attribute~='value']")

Tham số	Mô tả
attribute	Tham số bắt buộc, tìm thuộc tính được chỉ định
value	Tham số bắt buộc, giá trị của thuộc tính được chỉ định, khác với những bộ chọn trên thì giá trị ở đây là một từ

Bộ chọn jQuery [attribute~=value] Selector dùng để chọn những phần tử có thuộc tính được chỉ định mang giá trị là một chuỗi hoặc chứa một chuỗi cụ thể (chuối ở đây chỉ là 1 từ thôi nhé), chẳng hạn như phần tử <p> có thuộc tính title='thứ hai' hoặc title='Hôm nay là thứ hai' thì bạn dùng cú pháp là $("p[title~='thứ']")
Nếu bạn sử dụng $("p[title~='thứ hai']") thì sẽ không cho ra kết quả nhé.

Ví dụ

Chọn tất cả những phần tử <p> mà thuộc tính title là thứ hoặc chứa chuỗi thứ

 $("p[title~='thứ']")

Thử code »

jQuery [attribute*=value] Selector

Syntax

Bộ chọn jQuery [attribute*=value] Selector có cú pháp

$("[attribute*='value']")

Tham số	Mô tả
attribute	Tham số bắt buộc, tìm thuộc tính được chỉ định
value	Tham số bắt buộc, giá trị của thuộc tính được chỉ định

Bộ chọn jQuery [attribute*=value] Selector dùng để chọn những phần tử có thuộc tính được chỉ định mang giá trị là một chuỗi hoặc chứa một chuỗi cụ thể, chẳng hạn như phần tử <p> có thuộc tính title='thứ hai',title='111thứ hai', title='Mai thứ hai2222' hoặc title='Hôm nay là thứ hai' thì bạn dùng cú pháp là $("p[title*='thứ hai']")

Ví dụ

Chọn tất cả những phần tử <p> mà thuộc tính title là thứ hai hoặc chứa chuỗi thứ hai

 $("p[title*='thứ hai']")

Thử code »

Chuyên Mục : Bộ chọn jQuery Học jQuery jQuery Selectors