Tìm hiểu jQuery Object và Chained Method

Trong bài viết này, mục đích của tác giả muốn hướng dẫn cách đọc hiểu một trang tài liệu lập trình tiếng Anh và dẫn chứng bằng việc làm rõ hai thuật ngữ rất hay sử dụng trong thư viện jQuery là jQuery Object và Chained Method.
Nào! các bạn hãy mở trang web này để dễ dàng theo dõi bài viết.

Hướng dẫn cơ bản

Để dễ dàng đọc hiểu một tài liệu, ta cần biết rõ về bốc cục trình bày của tài liệu đó. Các bạn có thể vào trang này để tham khảo về bố cục trình bày của một trang tài liệu lập trình thư viện jQuery.

Ngoài ra, chúng ta cần phải có một số kiến thức cơ bản về những thuật ngữ mà tài liệu lập trình hay sử dụng, những thuật ngữ này chắc chắn là sẽ được đề cập một cách chi tiếp trong tài liệu lập trình đó.

Cuối cùng, chúng ta cần làm quen với cách hành văn của tài liệu, điều này sẽ giúp ta đọc hiểu nhanh chóng.

Để được như vậy chúng ta chịu khó mất thời gian ban đầu khi mới tiếp xúc với tài liệu lập trình và cứ kiên trì thì sẽ không lâu chúng ta sẽ làm chủ được nó và lúc đó là ngôn ngữ hay thư viện mà bạn đang tìm hiểu sẽ không làm khó được các bạn.

Đối tượng trong jQuery

Như vậy, chúng ta sẽ hiểu được rằng đối tượng jQuery nắm giữ tập các phần tử theo cấu trúc DOM mà các phần tử này được tạo ra bởi một trong hai cách là “HTML string” hoặc được lấy từ chính trang tài liệu HTML hiện hành.

Đến câu thứ hai của đoạn, ta hiểu thêm một điều là tập những phần tử DOM được lấy từ trang tài liệu hiện hành là do thông qua các CSS selector.

Và những phần tử (elements) được tìm thấy thông qua selector sẽ được gọi là “a set of matched elements” hoặc “a set of selected elements”, các bạn cần lưu ý 2 thuật ngữ matched elements và selected elements vì trong tài liệu lập trình jQuery đều rất hay sử dụng.

Đoạn thứ 2, cho ta biết đối tượng này gần giống như 1 mảng vì chúng ta có thể truy xuất phẩn tử thông qua vị trí (index) của nó với cú pháp như mảng.

Tuy nhiên, bản chất nó không phải là mảng vì có nhiều phương thức của mảng thì đối tượng jQuery không có, ví dụ như phương thức (hàm) join().

Với đoạn mã $("div"), ta sẽ có ngay một đối tượng jQuery sẽ chứa các phần tử DOM như hình 2 ở trên và khi thực hiện hàm css:

($("div").css("color", "red")); 

js Thì kết quả sẽ đổi màu chữ của các text node là “CiOne Learning” và “Học mà thích, nhanh tới đích” sang màu đỏ. Và sau khi thực hiện hàm css(), nó sẽ vẫn trả ra đối tượng jQuery trước đó, chính là đối tượng jQuery chứa cấu trúc DOM như hình 2 (các bạn có thể xem chi tiết hàm css() tại đây).

Vì thế ta vẫn có thể tiếp tục thực hiện hàm find() để tìm thẻ p chứa text node “Học mà thích, nhanh tới đích”

($("div").css("color", "red").find(".special")); 

Tới đây, ta đã thực hiện một dây chuyền phương thức vì đáng lẻ cả đoạn mã:

$("div").css("color", "red").find(".special"); 

sẽ được tách ra thành hai dòng mã như sau:

var div = $("div").css("color", "red");   var special = div.find(".special");   

Chained Method

Bây giờ, chúng ta sẽ cùng tìm hiểu về đối tượng jQuery (jQuery object) thông qua một trang tài liệu hướng dẫn lập trình của thư viện jQuery. Chúng ta phân tích câu đầu tiên của đoạn thứ nhất như sau:

A jQuery object contains a collection of Document Object Model (DOM) elements that have been created from an HTML string or selected from document.

Rõ ràng, câu này đã cho ta một khái niệm về đối tượng jQuery (jQuery object). Đó chính là đối tượng chứa một tập hợp phần tử DOM (tham khảo DOM tại đây), và tập phần tử DOM này được tạo ra bởi “HTML string” hoặc được chọn từ tài liệu (selected from document).

Ở đây có 1 thuật ngữ mới là “HTML string”, đây chính là một đoạn mã được viết bằng HTML, ví dụ như: Tương ứng “HTML string” trên ta sẽ có cấu trúc DOM như sau:

Sau khi đọc đoạn thứ 3, ta sẽ hiểu rằng, việc sử dụng jQuery() hoặc $() để tạo ra một đối tượng jQuery mới (a new jQuery object).

Các bạn không muốn sử dụng cú pháp $() thì có thể dùng hàm jQuery.noConflict() để vô hiệu hoá cách viết tắt này. Nhiều method (hàm) của jQuery trả về giá trị là một đối tượng jQuery (jQuery object) và từ đó ta có thể thực hiện một dây chuyền phương thức (Chained Method).

Tới đây, ta gặp một thuật ngữ mới, chính là “Chained method” thì chúng ta sẽ cố gắng xem ví dụ ngay bên dưới để hiểu rõ về cách sử dụng và mục đích đoạn mã
Chúng ta hãy tưởng tượng có một đoạn mã HTML dành cho ví dụ trên như sau:
Và chúng ta sẽ có cấu trúc DOM cho đoạn mã HTML trên như hình dưới đây.

Và cuối cùng, ta tiếp tục dùng hàm css("color", "green") để thực hiện đổi màu chữ text node “Học mà thích, nhanh tới đích” sang màu xanh lá cây do hàm find(".special") chỉ trả ra một phần tử p có một text node đó.

Như vậy, thông qua ví dụ trên chúng ta thấy rằng việc trả ra là một đối tượng jQuery sẽ giúp ta thực hiện dây chuyền phương thức (Chained Method), cái mà giúp chúng ta rút ngắn khi viết mã jQuery.

Khi hiểu được ví dụ trên, các bạn sẽ dễ dàng hiểu được ý của đoạn thứ 4 và 5. Nghĩa là, có nhiều hàm trong thư viện jQuery sẽ trả ra một đối tượng jQuery không thay đổi khi thực hiện, ví dụ trong ví dụ vừa rồi là hàm css(), sau khi thực hiện hàm này thì nó vẫn trả ra một đối tượng jQuery đang giữ các phần tử DOM không đổi so với lệnh trước đó.

Tuy nhiên, có một số hàm như find(), filter(), not(),… sẽ trả ra đối tượng jQuery mà đối tượng này khác hoàn toàn so với đối tượng jQuery trước đó thực hiện. Xem lại ví dụ trên, các bạn sẽ hiểu được ý nghĩa này.

Đoạn cuối cùng, cho ta biết một đối tượng jQuery có thể bị rỗng, nghĩa là nó không chứa bất kỳ phần tử nào.

Nguyên nhân dẫn tới một đối tượng jQuery rỗng có thể do khi ta thực hiện một Chained Method nó đã lọc hết các phần tử DOM hoặc nó không tìm thấy phần tử nào ứng với selector chúng ta định nghĩa.

Khi một đối tượng jQuery rỗng thực hiện hàm hay phương thức thì nó sẽ không bị lỗi mà chúng ta sẽ không thấy một hiệu ứng gì.

Kết luận

Như vậy, chúng ta đã tìm hiểu được hai khái niệm quan trọng trong thư viện jQuery là jQuery object và Chained Method thông qua việc đọc hiểu một trang tài liệu lập trình tiếng Anh.

Để hiểu được một tài liệu lập trình tiếng Anh, chúng ta cần có nhiều kỹ năng về kiến thức chuyên ngành và rèn luyện thường xuyên cũng như chịu khó tư duy, liên hệ tới những kiến thức nền tảng.

Những khoá học trên website CiOne sẽ luôn hướng tới cho các bạn kỹ năng này để tự làm chủ bất kỳ ngôn ngữ nào và trở thành nhà lập trình chuyên nghiệp.