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

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

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

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

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

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

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

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");

Thiết lập nhiều thuộc tính CSS

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

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

Tự học JQuery - HTML - Bài 4 - JQuery Xóa phần tử

Xóa Phần tử/Nội dung

Để xóa những phần tử và nội dung, có 02 phương thức jQuery:
  • remove() - Xóa phần tử đã chọn (và các phần tử con)
  • empty() - Xóa những phần tử con trong phần tử đã chọn.

Phương thức jQuery remove()

$("#div1").remove();

Phương thức jQuery empty()

$("#div1").empty();

Lọc những phần tử đã xóa

Phương thức jQuery remove() cũng có 01 tham số cho phép bạn lọc những phần tử đã bị xóa.
Tham số có thể là bất kỳ tham số jQuery selector nào.
Ví dụ sau xóa tất cả thẻ <p> với class="test"

Tự học JQuery - HTML - Bài 3 - jQuery – Thêm phần tử

Với jQuery, thật dễ dàng thêm mới các phần tử/ nội dung.

Thêm mới nội dung HTML

Chúng ta sẽ xem qua 04 phương thức jQuery được sử dụng để thêm mới nội dung:
  • append() - Chèn nội dung vào cuối của phần tử đã chọn.
  • prepend() - Chèn nội dung vào đầu của phần tử đã chọn.
  • after() - Chèn nội dung sau phần tử đã chọn.
  • before() - Chèn nội dung trước phần tử đã chọn.

Phương thức jQuery append()

Phương thức jQuery append() chèn nội dung VÀO PHẦN CUỐI phần tử HTML đã chọn.

Ví dụ:

$("p").append("Some appended text.");

Phương thức jQuery prepend()

Phương thức jQuery prepend() chèn nội dung VÀO PHẦN ĐẦU của phần tử được chọn lựa.

Ví dụ:

Tự học JQuery - HTML - Bài 2 -jQuery – Thiết lập nội dung và các thuộc tính

Thiết lập nội dung với các hàm - text(), html(), và val()

Chúng ta sẽ sử dụng 03 phương thức trong bài 1 để thiết lập nội dung:
  • text() - Thiết lập hoặc trả về nội dung văn bản của các phần tử đã chọn.
  • html() - Thiết lập hoặc trả về nội dung của các phần tử đã chọn( bao gồm cả thẻ html)
  • val() - Thiết lập hoặc trả về giá trị của các phần tử trong form.
Ví dụ sau mô tả cách thiết lập nội dung sử dụng 03 hàm: text(), html(), và val()
$("#btn1").click(function(){
    $(
"#test1").text("Hello world!");
});
$(
"#btn2").click(function(){
    $(
"#test2").html("<b>Hello world!</b>");
});
$(
"#btn3").click(function(){
    $(
"#test3").val("Dolly Duck");
});

01 hàm Callback cho text(), html(), và val()

Cả 03 phương thức jQuery sau: text(), html(), và val(), đều có hàm callback. Hàm callback có 02 tham số: vị trí của phần tử hiện hành trong danh sách các phần tử đã chọn và giá trị gốc (cũ) . Sau đó hàm sẽ return về 01 chuỗi string.
Ví dụ sau mô tả hàm text() và html() với 01 hàm callback:

Tự học JQuery - HTML - Bài 1 - jQuery – Phương thức lấy nội dung và thuộc tính

jQuery có rất nhiều phương thức mạnh mẽ để thay đổi và xử lý các đối tượng HTML và các thuộc tính.

Jquery xử lý DOM

01 phần rất quan trọng của jQuery là khả năng xử lý DOM.
jQuery có các phương thức liên quan đến DOM làm cho nó dễ dàng truy cập và xử lý các phần tử cũng như thuộc tính.
DOM = Document Object Model

Chuẩn DOM xác định 01 tiêu chuẩn truy cập HTML và tài liệu XML :
"W3C Document Object Model (DOM) là 01 mẫu và 01 ngôn ngữ trung gian cho phép các chương trình và các đoạn mã truy cập và cập nhật nội dung , cấu trúc, và kiểu của 01 tài liệu HTML."

Lấy nội dung - text(), html(), và val()

03 hàm đơn giản nhưng hữu dụng của jQuery để xử lý DOM:

Tự học JQuery - Hiệu Ứng - Bài 7 - Sự kết hợp các hàm

Với jQuery, bạn có thể kết hợp các hàm/phương thức lại với nhau.
Việc kết hợp cho phép chúng ta chạy nhiều hàm jQuery(trên cùng 01 phần tử) trong 01 dòng lệnh duy nhất.

Kết hợp các phương thức jQuery

Cho tới thời điểm này chúng ta đang viết các dòng lệnh jQuery từng dòng 1 theo từng thời điểm (cái này hoàn thành xong đến cái sau).
Tuy vậy, có 01 kỹ thuật gọi là kết hợp, cho phép chúng ta chạy nhiều lệnh jQuery, trên 01 hay nhiều phần tử.
Mẹo: bằng cách này, trình duyệt không phải tìm cùng 01 phần tử nhiều lần.
Để kết hợp thêm 01 hàm, bạn đơn giản thêm 01 hành động sau 01 hành động khác.
Ví dụ sau kết hợp phương thức css(), slideUp(), và slideDown() . Thẻ có id "p1" đầu tiên chuyển chữ sang màu đỏ, sau đó dịch chuyển lên, rồi dịch chuyển xuống:

Ví dụ:

$("#p1").css("color""red").slideUp(2000).slideDown(2000);

Tự học JQuery - Hiệu Ứng - Bài 6 – Hàm CallBack

01 hàm callback được thực thi sau khi hiệu ứng hiện tại hoàn thành 100%.

Các hàm Callback

Các đoạn mã JavaScript được thực thi tuần tự theo từng dòng. Tuy vậy, với những hiệu ứng, những dòng mã kế tiếp có thể chạy ngay cả khi hiệu ứng chưa hoàn thành. Điều này có thể phát sinh lỗi.
Để ngăn điều này, bạn có thể tạo 01 hàm callback (gọi sau).
01 hàm callback được thực thi sau khi hiệu ứng hiện tại hoàn thành.
Cú pháp: $(selector).hide(speed,callback);
Ví dụ sau có 01 tham số callback ,đó là hàm sẽ được thực thi sau khi hiệu ứng hide hoàn thành:



$("button").click(function(){
    $(
"p").hide("slow"function(){
        alert(
"The paragraph is now hidden");
    });
});
P/S: có n thẻ <p> thì sẽ có n+1 lần xuất hiện câu alert.
Ví dụ sau không có tham số callback, cho nên hộp thoại alert sẽ đưuọc hiển thị trước khi hiệu ứng hide hòan thành:

Ví dụ: không có hàm Callback

Tự học JQuery - Hiệu Ứng - Bài 5 - Ngừng hiệu ứng

Phương thức stop()

Phương thức stop() được dùng để dừng 01 hiệu ứng động hoặc hiệu ứng trước khi nó hoàn thành.
Phương thức stop() hoạt động trên tất cả hàm hiệu ứng của JQuery, bao gồm trượt, nhạt dần và hiệu ứng động tùy biến.
Cú pháp:
$(selector).stop(stopAll,goToEnd);
Tham số stopAll xác định hàng đợi các hiệu ứng có bị xóa sạch chưa. Mặc định là sai, điều đó nghĩa là chỉ có hiệu ứng hiện thời sẽ bị dừng, và các hiệu ứng tiếp theo sẽ được thực thi tuần tự sau đó.
Tham số tùy chọn goToEnd parameter specifies whether or not to complete the current animation immediately. Mặc định là false.
Vì vậy mặc định, phương thức stop() ngưng hiệu ứng hiện hành thực thi trên phần tử đang được chọn.
Ví dụ sau mô tả phương thức stop() , không có tham số:

Ví dụ:


$("#stop").click(function(){
    $(
"#panel").stop();
});