jQuery collection là gì?
Trong các phần trước chúng ta luôn làm việc với tập jQuery, ví dụ chúng ta chọn phần tử p bằng lệnh $(‘p‘) thì thực chất là chúng ta chọn một tập hợp các phần tử p (trừ khi chúng ta dùng một vài cách như phương thức hay bộ lọc để xác định một phần tử nào đó cụ thể). jQuery collection là tập hợp các phần tử được chọn để xử lý. Khái niệm này gần giống khái niệm mảng (array).
Phát sinh mã HTML mới
Trong nhiều trường hợp, chúng ta muốn phát sinh đoạn mã HTML mới để thêm vào trang. Trường hợp phổ biến là thêm dữ liệu JSON hay XML dùng kĩ thuật Ajax. Chúng ta có thể tạo ra các phần tử HTML mới bằng cách tạo một đối tượng jQuery mới với phương thức $() (hay jQuery()) và tham số là chuỗi chứa phần tử HTML. Ví dụ thêm phần tử div như sau:
$('<div>Hello</div>');
Nếu chúng ta muốn thêm phần tử div rỗng (không có nội dung), chúng ta có thể thực hiện theo một trong 3 cách sau:
$('<div>');
Hay
$('<div></div>');
Hay
$('<div />');
Chúng ta có thể so sánh khả năng thực thi của 3 cách trên tại http://jsperf.com/jquery-create-markup/4.
Việc tạo ra các phần tử HTML phức tạp hơn cũng thực hiện tương đối dễ dàng trong jQuery bằng cách tận dụng kĩ thuật dây chuyền hay dùng context cho tham số. Xét ví dụ thêm một phần tử img với các thuộc tính như src, alt, và title như sau:
$("<img />").attr("src", "https://cldup.com/ZaWPTCqRCt.jpg")
.attr("alt", "Karl Marx")
.attr("title", "Triết gia Karl Marx")
.appendTo("body");
Ở ví dụ trên, chúng ta áp dụng kĩ thuật dây chuyền cho các phương thức attr (thêm thuộc tính đến một phần tử) và appendTo (chèn một phần tử vào sau một phần tử khác). Ví dụ trên cũng có thể được viết lại bằng cách dùng context – một dạng tham số kiểu đối tượng cho phương thức $() như sau:
$("<img />",
{src:"https://cldup.com/ZaWPTCqRCt.jpg",
alt:"Karl Marx",
title:"Triết gia Karl Marx"}
).appendTo("body");
Quản lý jQuery collection
Chúng ta đã tìm hiểu cách chọn hay thêm các phần tử từ một tập jQuery (jQuery collection); trong phần này, chúng ta sẽ tìm hiểu thêm các cách thức để thay đổi, mở rộng, hay lọc tập jQuery để được những kết quả bạn mong muốn.
Xác định kích cỡ một tập
Khi chúng ta chọn một tập các phần tử bằng phương thức $(), gọi là jQuery collection, thì tập này ứng xử gần giống đối tượng mảng (array). Với đối tượng mảng, chúng ta có thể xác định kích thước bằng thuộc tính length, và tập jQuery cũng vậy. Ví dụ thuộc tính length sẽ trả về số phần tử p có trong trang qua lệnh sau:
$('p').length;
Truy cập các phần tử từ tập
Giống mảng, chúng ta có thể truy cập trực tiếp đến các phần tử từ một tập jQuery. Ví dụ chọn phần tử p đầu tiên trong tập các phần tử p như sau:
$('p')[0];
Hoặc chúng ta có thể dùng phương thức get():
| Phương thức | Chức năng |
|---|---|
| get (index) | Trả về một hay nhiều phần tử từ một tập jQuery. Index là chỉ số của phần tử, nếu bỏ qua tham số này thì get sẽ trả tập các phần tử. Nếu index vượt quá kích thước tập ( bé hơn, lớn hơn, hay bằng), get sẽ trả về undefined. Index có thể nhận giá trị âm và thứ tự tính từ phần tử cuối cùng trở lên của cây DOM. |
Ví dụ trên tương đương:
$('p').get(0);
Ở phần bộ lọc vị trí , chúng ta đã làm quen với bộ lọc :eq() dùng để chọn phần tử cụ thể nào đó theo vị trí. jQuery cũng cung cấp một phương thức có chức năng tương tự bộ lọc này là eq():
| Phương thức | Chức năng |
|---|---|
| eq (index) | Chọn một phần tử từ một tập jQuery. Index là chỉ số của phần tử. Index có thể nhận giá trị âm và thứ tự tính từ phần tử cuối cùng trở lên của cây DOM. |
Ví dụ chọn phần tử p đầu tiên dùng bộ lọc:
$('p:eq(0)');
Dùng phương thức:
$('p').eq(0);
Về hiệu quả, các chuyên gia khuyên chúng ta nên dùng phương thức thay vì dùng bộ lọc.
Chúng ta cũng có thể lấy phần tử đầu tiên hay cuối cùng trong tập jQuery bằng các phương thức first() hay last(). Cú pháp của first(), last() như sau:
| Phương thức | Chức năng |
|---|---|
| first () | Trả về phần tử đầu tiên trong tập. Nếu tập rỗng thì kết quả trả về là chính tập đó. |
| last () | Trả về phần tử cuối cùng trong tập. Nếu tập rỗng thì kết quả trả về là chính tập đó. |
Cùng với hai phương thức first() và last(), chúng ta cũng có hai bộ lọc tương tứng là :first và last và các chuyên gia vẫn khuyên chúng ta nên ưu tiên dùng phương thức. Ví dụ lấy phần tử p đầu tiên và cuối cùng:
$('p').first();// lấy phần tử p đầu tiên
$('p').last(); // lấy phần tử p cuối cùng
Nếu muốn tập hợp các phần tử trong một cấu trúc giống kiểu mảng (array), jQuery cung cấp phương thức toArray():
| Phương thức | Chức năng |
|---|---|
| toArray() | Trả về một cấu trúc mảng chứa các phần tử. |
Ví dụ xét đoạn HTML sau:
<p> Đoạn văn bản 1 </p> <p> Đoạn văn bản 2 </p> <p> Đoạn văn bản 3 </p>
Tập hợp các phần tử p trong một mảng x và hiển thị nội dung từng phần tử, đoạn mã jQuery như sau:
var i;
var x = $("p").toArray()
for (i = 0; i< x.length; i++) {
alert(x[i].innerHTML);
}
Để lấy chỉ số của một phần tử, jQuery cung cấp phương thức index():
| Phương thức | Chức năng |
|---|---|
| index([element]) | Tìm kiếm và trả về chỉ số thứ tự của một phần tử trong một tập, hay tìm chỉ số thứ tự của phần tử đầu tiên trong tập gồm các anh em của nó. Nếu không tìm thấy phần tử, giá trị -1 được trả về. Tham số element có thể là một chuỗi chứa một selector, một tham chiếu đến phần tử, hoặc một đối tượng jQuery. Trong trường hợp element là một đối tượng jQuery, phần tử đầu tiên của tập sẽ được tìm. Nếu không có element, chỉ số của phần tử đầu tiên trong tập các anh em của nó được trả về. |
Để hiểu cách hoạt động của phương thức index(), chúng ta xét đoạn mã HTML sau:
<h3> Tiêu đề </h3> <p> Đoạn văn bản 1 </p> <p> Đoạn văn bản 2 </p> <p id="doan3"> Đoạn văn bản 3 </p>
Trả về chỉ số của phần tử p có id = “doan3”, đoạn mã jQuery như sau:
alert($("p").index($("#doan3"))); // 3 (tính luôn cả h3)
Nếu index() không chứa tham số thì chỉ số phần tử p đầu tiên được trả về:
alert($("p").index()); // 1
Nhận các tập hợp nhờ các quan hệ
jQuery cho phép chúng ta tạo các tập phần tử mới từ một tập các phần tử đã cho thông qua mối quan hệ giữa các phần tử trên cây DOM. Để làm điều này, jQuery cung cấp các phương thức được mô tả như bảng dưới đây:
| Phương thức | Chức năng |
|---|---|
| children(filter) | Trả về một tập chứa các phần tử con trực tiếp của phần tử được chọn. filter (tuỳ chọn) là biểu thức selector để thu hẹp việc tìm kiếm phần tử con. (Xem ví dụ) |
| closest(filter, context) | Trả về một tập chứa phần tử tổ tiên (ancestor) gần nhất cho mỗi phần tử, bắt đầu từ chính bản thân phần tử, khớp với một selector cụ thể trong tập cho trước. filter có thể là một biểu thức selector, một phần tử, hay một đối tượng jQuery dùng để thu hẹp phạm vi tìm kiếm phần tử ancestor. context (tuỳ chọn) là một phần tử DOM trong đó một phần tử khớp với nó có thể được tìm thấy. (Xem ví dụ) |
| contents() | Trả về tập các nội dung của các phần tử trong một tập cho trước. (Xem ví dụ) |
| find(filter) | Trả về tập chứa các hậu duệ của mỗi phần tử trong tập cho trước. filter có thể là một selector cho trước, một đối tượng jQuery, hay một phần tử. (Xem ví dụ) |
| next(filter) | Trả về tập chứa phần tử anh em kế tiếp của phần tử được chọn. filter (tuỳ chọn) là biểu thức selector để thu hẹp việc tìm kiếm phần tử anh em kế tiếp. (Xem ví dụ) |
| nextAll(filter) | Trả về tập chứa tất cả các phần tử anh em kế tiếp của phần tử được chọn. filter (tuỳ chọn) là biểu thức selector để thu hẹp việc tìm kiếm phần tử anh em kế tiếp. |
| nextUntil(stop, filter) | Trả về tập chứa tất cả các phần tử anh em kế tiếp giữa phần tử được chọn và stop. stop(tuỳ chọn) là một biểu thức selector, một đối tượng jQuery, hay một phần tử để xác định nơi dừng tìm kiếm các phần tử anh em kế tiếp; filter (tuỳ chọn) là biểu thức selector để thu hẹp việc tìm kiếm phần tử anh em kế tiếp. (Xem ví dụ) |
| parent(filter) | Trả về tập chứa phần tử cha trực tiếp của phần tử được chọn. filter (tuỳ chọn) là biểu thức selector để thu hẹp việc tìm kiếm phần tử cha. (Xem ví dụ) |
| parents(filter) | Trả về tập chứa tất cả các phần tử tổ tiên của phần tử được chọn. filter (tuỳ chọn) là biểu thức selector để thu hẹp việc tìm kiếm các phần tử tổ tiên. (Xem ví dụ) |
| parentsUntil(stop, filter) | Trả về tập chứa tất cả các phần tử tổ tiên giữa phần tử được chọn và stop. stop(tuỳ chọn) là một biểu thức selector, một đối tượng jQuery, hay một phần tử để xác định nơi dừng tìm kiếm các phần tử tổ tiên; filter (tuỳ chọn) là biểu thức selector để thu hẹp việc tìm kiếm các phần tử tổ tiên giữa phần tử được chọn và stop. (Xem ví dụ) |
| prev(filter) | Trả về tập chứa phần tử anh em kề trước của phần tử được chọn. filter (tuỳ chọn) là biểu thức selector để thu hẹp việc tìm kiếm phần tử anh em kề trước. (Xem ví dụ) |
| prevAll(filter) | Trả về tập chứa tất cả phần tử anh em kề trước của phần tử được chọn. filter (tuỳ chọn) là biểu thức selector để thu hẹp việc tìm kiếm phần tử anh em kề trước. (Xem ví dụ) |
| prevUntil(stop, filter) | Trả về tập chứa tất cả các phần tử anh em kề trước giữa phần tử được chọn và stop. stop(tuỳ chọn) là một biểu thức selector, một đối tượng jQuery, hay một phần tử để xác định nơi dừng tìm kiếm các phần tử anh em kề trước; filter (tuỳ chọn) là biểu thức selector để thu hẹp việc tìm kiếm các phần tử anh em kề trước giữa phần tử được chọn và stop. (Xem ví dụ) |
| siblings(filter) | Trả về tập chứa tất cả các phần tử anh em của phần tử được chọn. filter (tuỳ chọn) là biểu thức selector để thu hẹp việc tìm kiếm phần tử anh em. (Xem ví dụ) |
| offsetParent() | Trả về tập chứa phần tử cha được định vị (tương đối, tuyệt đối, hay cố định) của các phần tử trong một tập cho trước. (Xem ví dụ) |
Các thao tác trên một tập phần tử
jQuery cung cấp một tập các phương thức dùng để tăng hay giảm một tập phần tử cho trước.
Thêm các phần tử đến tập cho trước
Để thêm các phần tử vào một tập, có thể dùng phương thức add:
| Phương thức | Chức năng |
|---|---|
| add(element, context) | Trả về một tập mới chứa các phần tử được thêm đến tập ban đầu. element xác định những gì được thêm đến tập, có thể là một phần tử, một selector, một đối tượng jQuery, hay một mảng; context có thể là một selector, một phần tử, hay một đối tượng jQuery, dùng để hạn chế việc tìm kiếm phần tử khớp với element. |
Xoá phần tử khỏi tập cho trước
Thêm phần tử đến tập dùng phương thức add(), nếu muốn xoá phần tử khỏi tập chúng ta có thể dùng phương thức not():
| Phương thức | Chức năng |
|---|---|
| not(criteria, function(index)) | Trả về một tập mới, là tập ban đầu không chứa các phần tử khớp với criteria. criteria(tuỳ chọn) xác định phần tử bị xoá từ tập, có thể là một phần tử, một biểu thức selector, hay một đối tượng jQuery; function(index) xác định hàm duyệt qua mỗi phần tử trong tập, nếu trả về true thì phần tử bị xoá (index là chỉ số phần tử). |
Đối lập với phương thức not() là phương thức filter():
| Phương thức | Chức năng |
|---|---|
| filter(criteria, function(index)) | Trả về một tập mới chứa các phần tử khớp với criteria. criteria(tuỳ chọn) xác định phần tử được trả về, có thể là một phần tử, một biểu thức selector, hay một đối tượng jQuery; function(index) xác định hàm duyệt qua mỗi phần tử trong tập, nếu trả về true thì phần tử được trả về (index là chỉ số phần tử). |
Lấy tập con từ một tập cho trước
Để lấy một tập con các phần tử từ một tập cho trước chúng ta dùng phương thức slice() hay phương thức has():
| Phương thức | Chức năng |
|---|---|
| slice(start, stop) | Trả về một tập con các phần tử từ một tập cho trước dựa theo chỉ số phần tử. start xác định nơi bắt đầu chọn phần tử (chỉ số bắt đầu là 0); stop (tuỳ chọn) xác định nơi kết thúc chọn phần tử (chỉ số bắt đầu là 0), nếu chỉ số này bỏ qua thì sẽ chọn phần tử cho đến khi kết thúc tập. |
| has(element) | Trả về một tập chứa các phần tử có một hay nhiều phần tử bên trong (hậu duệ) khớp với phần tử được chọn. element là phần tử hay biểu thức selector, xác định hậu duệ của phần tử được chọn. |
Một vài phương thức khác
| Phương thức | Chức năng |
|---|---|
| map(callback) | Gọi hàm callback cho mỗi phần tử trong tập và tập hợp các giá trị trả về trong một đối tượng jQuery. |
| each(function(index, element)) | Gọi hàm function duyệt qua từng phần tử trong tập. index là chỉ số phần tử được chọn, element là phần tử hiện tại đang áp dụng hàm function trong tập. |
| addBack(filter) | Thêm tập các phần tử trước (theo thứ tự trong ngăn xếp) đến tập hiện tại và trả về là tập mới là sự kết hợp hai tập. filter (tuỳ chọn) dùng để lọc các phần tử. |
| is(selectorElement, function(index,element)) | Trả về true nếu có ít nhất một phần tử được chọn khớp với selectorElement, ngược lại là false. selectorElement có thể là một biểu thức selector, một phần tử, hay một đối tượng jQuery. function (tuỳ chọn) là hàm được gọi cho mỗi phần tử với index là chỉ số phần tử được chọn, element là phần tử hiện tại đang áp dụng hàm function trong tập. |
| end() | Dùng với dây chuyền các phương thức; kết thúc thao tác lọc gần nhất trong dây chuyền hiện tại và trả về tập các phần tử tương ứng đến trạng thái trước của nó. |
Ví dụ về các phương thức map(), addBack() và end() có thể tham khảo thêm tại https://api.jquery.com/.
Trần Ngọc Minh Notes 
Ý kiến bài viết