NTM Solutions

Thứ Tư, 25 tháng 1, 2017

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


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

03 phương thc lc cơ bn nht là first(), last() và eq(), cho phép bn chn la 01 phn t da trên v trí ca nó trong 01 nhóm phn t.

Những phương thc lc khác như filter() và not() cho phép bn chn phn t trùng hoc không trùng điu kin lc.


Phương thức jQuery first()

Phương thc first() tr v phn t đầu tiên trong các phn 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 thc last() tr v phn t cui cùng trong các phn 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 thc hu dng để duyt t trên xung cây DOM là:
  • children()
  • find()

Phương thức jQuery children()

Phương thc children() tr v tt c các phn t con trc tiếp ca phn t đã chọn.

Phương thc này ch duyt xung 01 cp 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 để lc 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 thc jQuery hu dng để tra ngược lên cu trc cây DOM là:
  • parent()
  • parents()
  • parentsUntil()

Phương thức jQuery parent()

Phương thc parent() tr v phn t cha trc tiếp ca phn t đã chọn lựa.

Phương thc này ch tra cu đơn l 01 phn t trong cu 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.

jQuery Dimensions

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

jQuery Dimensions


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, bordermargin).

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 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


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

Facebook Youtube RSS