03/08/2018, 10:11

jQuery Selectors - Các Filter khác

Trong bài này mình sẽ giới thiệu các selectors cuối cùng trong jQuery. Có tổng cộng 4 loại selector trong bài này và nó sử dụng các đặc tính của ...

Trong bài này mình sẽ giới thiệu các selectors cuối cùng trong jQuery. Có tổng cộng 4 loại selector trong bài này và nó sử dụng các đặc tính của thẻ HTML như nested, hidden, visible.

1. Danh sách các jQuery Selector còn lại

Sau đây là danh sách các selector còn lại.

Parent > Child Selector

Trong CSS thì đây là cú pháp dùng để chọn tất cả các child là cấp con đầu tiên của parrent. Vậy thì trong jQuery cũng có tác dụng tương tự.

Ví dụ: Thêm class active cho tất cả các thẻ li nằm bên trong thẻ có id là contain, lưu ý là chỉ thêm vào thẻ li cấp con đầu tiên.

Demo RUN
$("#contain > li").addClass('active');

Chạy ví dụ lên bạn sẽ thấy chỉ có thẻ li cấp đầu tiên là có tác dụng.

Nested Selector

Selector trong CSS hoạt động theo nguyên tắc phân cấp (nested), điều này cũng có thể sử dụng trong jQuery.

Ví dụ: Cho đoạn mã HTML sau:

<ul id="contain">
    <li>Item 1</li>
    <li>Item 2
        <ul>
            <li>Nested item 1</li>
            <li>Nested item 2</li>
            <li>Nested item 3</li>
        </ul>
    </li>
    <li>Item 3</li>
</ul>

Hãy thêm class active vào ba thẻ sau:

<li>Nested item 1</li>
<li>Nested item 2</li>
<li>Nested item 3</li>

Để làm được điều này thì ta sử dụng truy vấn selector trong CSS:

Demo RUN
$("#contain li ul li").addClass('active');

:hidden Selector

Chọn tất cả các thẻ HTML đang ở trạng thái hidden.

Ví dụ: Chọn và hiển thị tất cả các the div đang bị ẩn

$("div:hidden").show();

:visible Selector

Chọn tất cả các thẻ HTML đang ở trạng thái hiển thị.

Ví dụ: Chọn và ẩn tất cả các thẻ có chứa class active và đang ở trạng thái visible.

$(".active:visible").hide();

2. Lời kết

Như vậy là mình đã tổng hợp tất cả các loại selector trong jQuery cho các bạn, hy vọng qua bài này sẽ giúp bạn hiểu được một số cách truy vấn đối tượng HTML thông qua các thuộc tính như: nested, visible, hidden, child. Hẹn gặp lại các bạn ở bài tiếp theo.

BÀI KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

Bài liên quan

Các cách khác nhau để khởi tạo một đối tượng trong javascript

Trong bài này chúng ta sẽ học nhiều cách để tạo các đối tượng trong JavaScript như Object Literal, Constructor Function, Object. Tạo method và ES6 Class. Tạo đối tượng trong Javascript với Object Literal Một trong những cách dễ dàng nhất để tạo ra một đối tượng javascript là đối tượng literal, ...

Bùi Văn Nam viết 16:54 ngày 12/08/2018

laptrinhx.com là một trang chuyên ăn cắp bài từ các trang khác !!!

Cảnh báo những user đã đăng bài trong trang Viblo.asia. Tất cả các bài viết của các bạn đã bị tự động lấy cắp sang trang laptrinhX.com Vậy trước khi admin của Viblo có giải pháp để bảo vệ chất xám của chúng ta bị laptrinhX.com ăn cắp, thì các bạn nên tự bảo vệ bài viết của mình bằng cách: ...

Hoàng Hải Đăng viết 15:21 ngày 12/08/2018

Xử lý Đa ngôn ngữ với các country khác nhau

Chào các bạn, sau một tháng làm việc vất vả, hôm nay tôi lại quay trở lại với một chút kiến thức, có thể nó sẽ giúp ích cho bạn đỡ bối rối rất nhiều khi làm việc với đa ngôn ngữ mà gặp phải những loại ngôn ngữ được sử dụng ở nhiều các quốc gia khác nhau. Ví dụ như ngôn ngữ tiếng Trung chẳng hạn. Nó ...

Trịnh Tiến Mạnh viết 11:01 ngày 12/08/2018

jQuery Selectors - Attributes

Ở bài trước chúng ta đã được tìm hiểu về Selector trong jQuery và mình cũng có giới thiệu sơ lược cách truy vấn theo ID và Class rồi, nhưng thực ...

Hoàng Hải Đăng viết 10:12 ngày 03/08/2018

jQuery Selectors - Child Filter

Child Filter Selector cũng có chức năng giống như Basic Filter nhưng jQuery nó chia làm hai nhóm để chúng ta dễ học và dễ tìm kiếm hơn. Nhóm ...

Hoàng Hải Đăng viết 10:12 ngày 03/08/2018
0