jQuery basic: Attribute Selectors, Custom Selectors

  • JavaScript
  • 19 tháng 06 2012
  • bởi Văn Khương
  • 0 Comments

Bài viết này sẽ giới thiệu cách chọn phần tử theo thuộc tính và giựa theo các tùy chọn về vị trí của phần tử.

Attribute Selectors

Has Attribute: [foo]

Chọn các phần tử có thuộc tính là foo

Attribute Value Equals: [foo=bar]

Chọn các phần tử có thuộc tính foo với giá trị bằng bar

Attribute Value Does Not Equal: [foo!=bar]

Chọn các phần tử không có thuộc tính foo với giá trị bằng bar

Attribute Value Begins: [@foo^=bar]

Chọn các phần tử có thuộc tính foo với giá trị bắt đầu bằng bar

Attribute Value Ends: [@foo$=bar]

Chọn các phần tử có thuộc tính foo với giá trị cuối bằng bar

Attribute Value Contains: [@foo*=bar]

Chọn các phần tử có thuộc tính foo với giá trị có chứa chuỗi bằng bar

Custom Selectors

Even Element (:even)

Chọn các phần tử chẵn, bạn cũng có thể sử dụng :nth-child(even) với chức năng tương tự

Odd Element (:odd)

Chọn các phần tử lẻ, bạn cũng có thể sử dụng :nth-child(odd) với chức năng tương tự

Nth Element (:eq(n), :nth(n))

Chọn phần tử theo thứ tự chỉ mục, phần tử đầu tiên bắt đầu với chỉ mục bằng 0, cách thức chọn này là khác với nth-child(n)

Greater Than :gt(n)

Chọn các phần tử có chỉ mục lớn hơn n, phần tử đầu tiên bắt đầu với chỉ mục bằng 0

Less Than : lt(n)

Chọn các phần tử có chỉ mục nhỏ hơn n, phần tử đầu tiên bắt đầu với chỉ mục bằng 0

First :first

Chọn phần tử đầu tiên, điều này là tương đương với nth(0), eq(0), còn nếu chọn theo phần tử con thì nó tương đương với nth-child(1)

Last :last

Chọn phần tử cuối cùng

Contains :contains(text)

Chọn các phần tử có chứa nội dung text

Visible :visible

Chọn các phần tử đang được hiển thị

Hidden :hidden

Chọn các phần tử đang được ẩn

Ở trên là những cách thức để bạn chọn phần tử trong jQuery, các bài viết thuộc seri jQuery basic chỉ mang hình thức giới thiệu dành cho những ai mới làm quen với jQuery, hoặc cũng là một bài ôn lại cho những ai đã hiểu về nó.

Tham khảo (jQuery Reference Guide and docs.jquery.com)

Tags: jQuery
  • Chia sẻ
comments powered by Disqus