Giới thiệu sơ lược về jQuery Selectors

Như các bạn đã biết, CSS3 giới thiệu những tính năng selectors cho phép chúng ta lựa chọn nhiều phần tử cụ thể trong HTML, tuy nhiên CSS selectors lại không được hỗ trợ nhiều trên các trình duyệt khác nhau. jQuery cũng có bộ selectors riêng và bộ này sẽ là cách thay thế cho những gì mà CSS3 không làm được.

Để có thể hiểu rõ hơn, chúng ta cùng tìm hiểu một vài ví dụ sau:

Index Selectors

Trong CSS3 các lựa chọn như first-child() và last-child() , những lựa chọn này cho phép chúng ta lọc lấy phần tử đầu và cuối. Trong jQuery, có các hàm như :eq(), :lt(),:gt(), :even(), và : odd() cũng làm công việc tương tự nhưng có khả năng lựa chọn tốt hơn.
Giả sử chúng ta có danh sách như sau :

    <ul>
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        <li>List 4</li>
        <li>List 5</li>
    </ul>

Nếu chúng ta muốn chọn lựa <li> ở vị trí thứ 3, và chèn một class vào ngay tại thẻ này, thì các bạn có thể sử dụng :eq()

    $('td:eq(2)').addClass('selected');

Vì trong javascript đánh dấu chỉ mục bắt đầu từ 0 , nên vị trí thứ 3 sẽ là eq(2).

Visibility Selectors

Vào thời điểm hiện tại thì CSS3 vẫn chưa có thuộc tính nào cho phép chúng ta lựa chọn những phần tử ẩn . Nhưng trong jQuery, các bạn có thể làm được điều đó.

Như trong ví dụ sau đây, phần tử <div> được ẩn đi với display:none;

    <div style="display:none;">
        This is hidden
    </div>

Để chọn riêng thẻ <div> này, các bạn dùng :hidden selector.

    $('div:hidden').removeAttr('style');

Tuy nhiên lựa chọn :hidden không chọn được các phần tử ẩn bằng cách sử dụng visibility:hidden. Nó chỉ lựa chọn được các phần tử ẩn bẳng cách dùng display:none hoặc khi phần tử đó được ấn định awidth và height có giá trị là 0.
Ngược lại để có thể chọn lựa các phần tử  đang hiển thị , thì các bạn sử dụng :visible.

Element-Containing Selectors

Sử dụng jQuery các bạn có thể lựa chọn được cả những phần tử chỉ định khi chúng đang chứa trong những phần tử khác. Giả sử chúng ta có 2 thẻ <section> , 1 thẻ chứa thẻ <h2> bên trong, thẻ còn lại thì không chứa gì. Để lựa chọn <section> đang chứa thẻ <h2> thì các bạn làm như sau :

    $('section:has(h2)').addClass('selected');

CSS3 tại thời điểm hiện tại, chưa hỗ trợ tính năng lựa chọn này.

Text Containing Selectors

Chúng ta cũng có thể lựa chọn phần tử đang chứa những đoạn chữ cụ thể. Giả sử  chúng ta có đoạn html như sau :

<p>Hello</p>
<p>World</p>

Để chọn ra thẻ <p> chứa đoạn text : “World” các bạn sử dụng :contains() như sau :

$('div:contains('World')').addClass('world');

Có một điều lưu ý ở đây là khi các bạn chọn lựa như trên thì dòng chữ phải ghi chính xác, vì chúng phân biệt chữ thường và chữ hoa.

Animated Selector

jQuery cung cấp cho chúng ta các hàm để thực hiện hiệu ứng động như .slideToggle(), .slideUp(), .slideDown(), .show() và .hide(). Và chúng ta có thể chọn lựa những phần tử đang sử dụng các hàm này bằng cách dùng :animated như sau :

$('li:animated').addClass('animation');

Mình hy vọng với bài viết ngắn ngủi này sẽ giúp cho các bạn có thêm kiến thức về jQuery nói chung và jQuery Selectors nói riêng, có thể trong từng câu chữ có điều hơi khó hiểu, nếu bạn nào có thắc mắc gì thì gửi lại tin nhắn dưới dạng comment nhé.

Chúc các bạn thành công !

Chuyên Mục: Javascript

Bài viết được đăng bởi webmaster