Chủ đề nổi bật
03/08/2018, 10:08

jQuery Selectors - Content Filter

Content Filter là nhóm các Selector dùng để xử lý nội dung chứa bên trong thẻ HTML. Ví dụ bạn muốn tìm thẻ HTML nào có nội dung rỗng thì chỉ cần ...

Content Filter là nhóm các Selector dùng để xử lý nội dung chứa bên trong thẻ HTML. Ví dụ bạn muốn tìm thẻ HTML nào có nội dung rỗng thì chỉ cần sử dụng cú pháp :empty.

Sau đây là danh sách các loại Content Filter.

1. Danh sách các Content Filter trong jQuery

Có tổng cộng 4 loại Content Filter.

Cú pháp Ý nghĩa
$( "selector:contains('value')" ) Lấy thẻ HTML mà nội dung có chứa giá trị value. DEMO
$( "selector:empty" ) Lấy thẻ HTML có nội dung rỗng. DEMO
$( "selector:has(element)" ) Lấy thẻ HTML mà nội dung bên trong có chứa thẻ element. DEMO
$( "selector:parent" ) Lấy thẻ cha đầu tiên của những thẻ không rỗng. DEMO

2. Các ví dụ Content Filter trong jQuery

Sau đây là các ví dụ cách sử dụng Content Filter.

:contains Selector

Thêm class active vào thẻ div có chứa chữ code24h.com.

Demo RUN
$("div:contains('code24h.com')").addClass("active");

:emtpy Selector

Thêm class active vào thẻ div rỗng.

Demo RUN
$("div:empty").addClass("active");

:has Selector

Thêm class active vào thẻ div có chứa thẻ p.

Demo RUN
$("div:has(p)").addClass("active");

:parent Selector

Thêm class active vào thẻ cha của thẻ p có class="delete".

Demo RUN
$("div p.delete:parent").addClass("active");

3. Lời kết

Trên là bốn cách sử dụng Content Filter trong jQuery, bài này mình dừng ở đây, bài tiếp theo chúng ta tìm hiểu về các Filter xử lý với Form.

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

Nguồn: code24h.com

Bài liên quan
Mới nhất

Danh sách tất cả các bộ chọn trong jQuery

Bộ chọn Mô tả * Chọn tất cả các phần tử #id Chọn phần tử dựa theo id .class Chọn phần tử dựa theo class (tên lớp) .class,.class element el1,el2,el3 :first ...

Các phương thức dùng để thao tác với HTML & CSS

Xem theo thứ tự từ điển Xem theo nhóm chức năng Phương thức Mô tả addClass() - Thêm tên lớp vào giá trị thuộc tính class của phần tử after() - Thêm nội dung phía sau phần tử append() - Thêm nội dung vào vị trí cuối cùng bên trong phần nội dung của phần tử appendTo() ...

Danh sách tất cả các sự kiện trong jQuery

Sự kiện Mô tả bind() blur() Xảy ra khi người dùng rời khỏi các phần tử <input> focus() Xảy ra khi người dùng truy cập vào các phần tử <input> change() Xảy ra khi giá trị của các phần tử ...

Danh sách tất cả các phương thức trong jQuery

Phương thức Mô tả hide() Ẩn một phần tử show() Hiện một phần tử đang bị ẩn toggle() Thực hiện luân phiên giữa việc hiện & ẩn một phần tử slideUp() Ẩn một phần tử (kèm theo hiệu ứng trượt) slideDown() ...

Các phương thức thiết lập thuộc tính Class trong jQuery

Các phương thức addClass(), removeClass(), toggleClass() trong jQuery được dùng để thêm/xóa giá trị của thuộc tính class của phần tử HTML. Click vào đây để THÊM/XÓA class cho phần tử bên dưới WEB CƠ BẢN Phương thức addClass() trong jQuery Phương thức addClass() được dùng để thêm giá trị cho ...

Các phương thức lấy nội dung và thuộc tính trong jQuery

Trong jQuery có 4 phương thức chính để lấy nội dung và thuộc tính của một phần tử HTML. text() - lấy nội dung của một phần tử HTML (không bao gồm các thẻ HTML) html() - lấy nội dung của một phần tử HTML (bao gồm các thẻ HTML) val() - lấy giá trị của một trường input attr("tên ...

Cách HIỆN/ẨN phần tử HTML bằng phương thức show()/hide() trong jQuery

Ở bài hướng dẫn này, bạn sẽ được tìm hiểu cách hiện và ẩn một phần tử HTML. Bấm vào đây để HIỆN phần tử bên dưới Bấm vào đây để ẨN phần tử bên dưới Cách hiện và ẩn một phần tử HTML Phương thức show() dùng để hiện một phần tử HTML Phương thức hide() dùng để ẩn một phần tử HTML ...

Cách chọn các phần tử tổ tiên trong jQuery

Trong jQuery, có chủ yếu 3 phương thức dùng để chọn các phần tử tổ tiên. Phương thức parent() - dùng để chọn phần tử cha mẹ. Phương thức parents() - dùng để chọn phần tử cha mẹ, ông bà, tổ tiên,.... (nói chúng là từ cha mẹ trở lên). Phương thức parentsUntil() - dùng để ...

Viết hàng loạt phương thức chỉ với một câu lệnh trong jQuery

Thông thường, khi bạn muốn một phần tử thực hiện hàng loạt phương thức nào đó thì bạn sẽ viết các phương thức đó dưới dạng từng câu lệnh riêng biệt. Ví dụ Để phần tử <div> thực hiện bốn phương thức animate() $("div").animate({left:'300px'}); $("div").animate({top:'300px'}); $ ...

Xóa phần tử HTML trong jQuery

Trong jQuery, chủ yếu có hai phương thức dùng để xóa phần tử HTML. Phương thức remove() - dùng để xóa phần tử HTML. Phương thức empty() - dùng để xóa nội dung của phần tử HTML. Phương thức remove() trong jQuery Phương thức remove() được dùng để xóa phần tử HTML. Cú ...