Bộ Lọc Nội Dung (content Filter) - Trần Ngọc Minh Notes

Trang chủ » Bộ Lọc Css » Bộ Lọc Nội Dung (content Filter) - Trần Ngọc Minh Notes

Có thể bạn quan tâm

Dùng để chọn các phần tử theo nội dung của chúng như một từ cho trước, hay nội dung rỗng. Nội dung không chỉ là các văn bản thuần tuý, còn bao gồm cả các phần tử con.

Danh sách bộ lọc nội dung như bảng dưới đây:

Selector Mô tả
:contains(text) Chọn các phần tử chứa nội dung text xác định (bao hàm cả nội dung của các phần tử con, cháu).
:empty Chọn các phần tử không có con.
:has(selector) Chọn các phần tử chứa ít nhất một con khớp với selector cho trước.
:parent Chọn các phần tử có ít nhất một nút con (nút con có thể là một phần tử hay chỉ là văn bản).

Xét đoạn mã HTML sau:

<h1>Welcome to My Web Page</h1> <table border="1"> <tr> <th>Company</th> <th></th> <th>Country</th> </tr> <tr> <td>Google</td> <td>Larry Page</td> <td></td> </tr> <tr> <td>Apple</td> <td></td> <td>Sweden</td> </tr> <tr> <td>Microsoft</td> <td>Bill Gates</td> <td><span>Mexico</span></td> </tr> </table>

Ví dụ 1: Chọn các phần tử không có phần tử con (gán màu nền vàng), đoạn mã jQuery trong tập tin MyjQuery.js như sau:

$(":empty").css("background-color", "yellow");

Kết quả

Ví dụ 2: Chọn các phần tử th có chứa nội dung Company (lưu ý có sự phân biệt chữ hoa chữ thường)(gán màu nền vàng), đoạn mã jQuery trong tập tin MyjQuery.js như sau:

$("th:contains(Company)").css("background-color", "yellow");

Kết quả

Ví dụ 3: Chọn các phần tử td có chứa phần tử span (gán màu nền vàng), đoạn mã jQuery trong tập tin MyjQuery.js như sau:

$("td:has(span)").css("background-color", "yellow");

Kết quả

Ví dụ 4: Chọn các phần tử td có chứa ít nhất một nút con (gán màu nền vàng), đoạn mã jQuery trong tập tin MyjQuery.js như sau:

$("td:parent").css("background-color", "yellow");

Kết quả

< Học jQuery

Từ khóa » Bộ Lọc Css