Tự học JQuery - Traversing - Bài 5 - Lọc – Filtering

Xem Mục lục lập trình JQuery

Thu hẹp kết quả tìm kiếm phần tử

03 phương thức lọc cơ bản nhất là first(), last() và eq(), cho phép bạn chọn lựa 01 phần tử dựa trên vị trí của nó trong 01 nhóm phần tử.

Những phương thức lọc khác như filter() và not() cho phép bạn chọn phần tử trùng hoặc không trùng điều kiện lọc.

Phương thức jQuery first()

Phương thức first() trả về phần tử đầu tiên trong các phần tử đã chọn.

Ví dụ sau chọn phần tử <p> đầu tiên trong bên trong phần tử <div> đầu tiên:

$(document).ready(function(){
    $("div p").first();
});

Phương thức jQuery last()

Phương thức last() trả về phần tử cuối cùng trong các phần tử đã chọn lựa.

Ví dụ sau chọn phần tử <p> cuối cùng trong thẻ <div> cuối cùng:

$(document).ready(function(){
    $("div p").last();
});

Tự học JQuery - Traversing - Bài 4 - Nhánh bên – Sibling

Xem Mục lục lập trình JQuery

Nhánh bên( nhánh anh em) là các phần tủ có chung cha mẹ.

Với jQuery bạn có thể tra các nhánh bên trong sơ đồ cây DOM để tìm phần tử anh em của 01 phần tử.

---

Duyệt các nhánh trong sơ đồ DOM

Có nhiều phương thức jQuery hữu dụng dùng để duyệt nhánh trong sơ đồ DOM:

• siblings()
• next()
• nextAll()
• nextUntil()
• prev()
• prevAll()
• prevUntil()
  

---

Phương thức jQuery siblings()

Phương thức siblings() trả về tất cả các phần tử anh em của phần tử đã chọn.

Ví dụ sau trả về tất cả phần tử anh em của thẻ <h2>

$(document).ready(function(){
    $("h2").siblings();
});

Bạn cũng có thể sử dụng 01 tham số tùy chọn để lọc kết quả tìm các phần tử anh em.

Ví dụ sau trả về tất cả phần tử anh em của thẻ <h2> là thẻ <p>

$(document).ready(function(){
    $("h2").siblings("p");
});

Tự học JQuery - Traversing - Bài 3 - Nhánh con - Descendant

Xem Mục lục lập trình JQuery

01 nhánh con là 01 con, cháu, chắt...

Với jQuery bạn có thể duyệt từ trên xuống cây DOM để tìm các con của 01 phần tử.

Duyệt từ trên xuống cây DOM Tree

02 phương thức hữu dụng để duyệt từ trên xuống cây DOM là:

• children()
• find()

Phương thức jQuery children()

Phương thức children() trả về tất cả các phần tử con trực tiếp của phần tử đã chọn.

Phương thức này chỉ duyệt xuống 01 cấp trong cây DOM.

Ví dụ sau trả về tất cả phần tử là phần tử con trực tiếp của thẻ <div>

$(document).ready(function(){
    $("div").children();
});

Bạn cũng có thể sử dụng 01 tham số tùy chọn để lọc kết quả tìm kiếm phần tử con.

Ví dụ sau trả về tất cả thẻ <p> với tên lớp là "first", là con trực tiếp của thẻ <div>

Tự học JQuery - Traversing - Bài 2 - Nhánh cha – Ancestor

Xem Mục lục lập trình JQuery

01 nhánh tổ tiên là cha mẹ, ông bà,ông cụ kị...

Với jQuery bạn có thể tra cứu sơ đồ cây DOM để tìm tổ tiên của 01 phần tử.

Duyệt lên cây DOM

03 phương thức jQuery hữu dụng để tra ngược lên cấu trức cây DOM là:

• parent()
• parents()
• parentsUntil()

Phương thức jQuery parent()

Phương thức parent() trả về phần tử cha trực tiếp của phần tử đã chọn lựa.

Phương thức này chỉ tra cứu đơn lẻ 01 phần tử trong cấu trúc cây DOM.

Ví dụ sau trả về phần tử cha mẹ trực tiếp của mỗi phần tử <span>

$(document).ready(function(){
    $("span").parent();
});

Tự học JQuery - Traversing - Bài 1 - 01 số khái niệm

Xem Mục lục lập trình JQuery

Query Traversing là gì?

Nghĩa là "duyệt qua", hoặc "tìm kiếm" (chọn lựa) các phần tử HTML dựa trên mối quan hệ giữa chúng với các phần tử khác.

Bắt đầu từ 01 phần tử đã chọn và duyệt đến khi tìm thấy phần tử bạn muốn.

Tấm hình dưới đây mô tả 01 cây các phần tử HTML.

Với jQuery duyệt cây, bạn có thể dễ dàng di chuyển lên (các nốt cha), xuống (các nốt cháu chẳt) và các nhánh bên cạnh (các nốt anh em) trong cây phần tử, bắt đầu từ phần tử được chọn lựa (hiện hành).

Sự dịch chuyển này gọi là duyệt cây trong cấu trúc DOM.

Giải thích:

Tự học JQuery - HTML - Bài 7 - JQuery Kích thước

Xem Mục lục lập trình JQuery

Với jQuery thật dễ dàng để làm việc với kích thước của các phần tử và cửa sổ trình duyệt.

Các phương thức jQuery Kích Thước

jQuery có nhiều phương thức quan trọng để ta làm việc với các kích thước:

• width()
• height()
• innerWidth()
• innerHeight()
• outerWidth()
• outerHeight()
  

---

jQuery Kích Thước

---

Phương thức jQuery width() và height()

Phương thức width() thiết lập hoặc trả về chiều rộng của 01 phần tử (ngoại trừ padding, border và margin).

Phương thức height() thiết lập hoặc trả về chiều cao của 01 phần tử (ngoại trừ padding, border và margin).

Ví dụ sau trả về chiều rộng và chiều cao của 01 thẻ <div>

$("button").click(function(){
    var txt = "";
    txt += "Width: " + $("#div1").width() + "</br>";
    txt += "Height: " + $("#div1").height();
    $("#div1").html(txt);
});

Tự học JQuery - HTML - Bài 6 - JQuery phương thức CSS

Xem Mục lục lập trình JQuery

Phương thức jQuery css()

Phương thức css() thiết lập hoặc trả về 01 hoặc nhiều thuộc tính cho các đối tượng đã chọn.

---

Trả về 01 thuộc tính CSS

Để trả về giá trị của 01 thuộc tính CSS bạn dùng cú pháp sau:

css("propertyname");

Ví dụ sau sẽ trả về giá trị background-color của phần tử ĐẦU TIÊN KHỚP ĐIỀU KIỆN:

$("p").css("background-color");

Thiết lập 01 thuộc tính CSS

Để thiết lập 01 thuộc tính CSS, ta sử dụng cú pháp sau:

css("propertyname","value");

Ví dụ sau sẽ thiết lập giá trị background-color cho TẤT CẢ PHẦN TỬ KHỚP ĐIỀU KIỆN:

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

Tự học JQuery - HTML - Bài 5 - JQuery Get và Set lớp CSS

Xem Mục lục lập trình JQuery

Dùng jQuery xử lý các phần tử CSS thật dễ dàng.

jQuery xử lý CSS

jQuery có rất nhiều phương thức xử lý CSS:

• addClass() - Thêm 01 hoặc nhiều lớp trong các phần tử đã chọn.
• removeClass() - Xóa 01 hoặc nhiều lớp trong các phần tử đã chọn.
• toggleClass() - Chuyển đổi qua lại giữa thêm/xóa lớp trong các phần tử đã chọn.
• css() - Thiết lập hoặc trả về thuộc tính style.
  

---

Ví dụ Stylesheet


Mẫu stylesheet sau đây sẽ được sử dụng cho tất cả ví dụ trên trang này.

.important {
    font-weight: bold;
    font-size: xx-large;
}

.blue {
    color: blue;
}

---

Phương thức jQuery addClass()

Ví dụ sau cho ta biết cách thêm thuộc tính của lớp trong nhiều phần tử.

Bạn có thể tùy ý chọn nhiều phần tử khi thêm lớp.

$("button").click(function(){
    $("h1, h2, p").addClass("blue");
    $("div").addClass("important");
});

Bạn cũng có thể thêm thuộc tính của nhiều lớp bằng phương thức addClass()

$("button").click(function(){
    $("#div1").addClass("important blue");
});

Phương thức jQuery removeClass()

Ví dụ sau cho ta biết cách xóa 01 thuộc tính của lớp trong nhiều phần tử.

$("button").click(function(){
    $("h1, h2, p").removeClass("blue");
});

Phương thức jQuery toggleClass()

Ví dụ sau sẽ hướng dẫn cách sử dụng phương thức jQuery toggleClass()

Phương thức này chuyển đổi qua lại giữa thêm/xóa các lớp trong các phần tử đã chọn:

$("button").click(function(){
    $("h1, h2, p").toggleClass("blue");
});

Phương thức jQuery css()

Phương thức jQuery css() sẽ được giải thích trong bài tiếp theo.

Nếu vẫn chưa rõ các bạn xem thêm video clip sau:

Xem Mục lục lập trình JQuery

By #drM