Chúng ta đã nói nhiều lần về những điểm nhỏ trong API jQuery thực sự khá hay. Mọi thứ đều được cân nhắc và tinh chỉnh. Chuỗi chắc chắn thuộc loại đó. Một khi bạn bắt đầu sử dụng nó và hiểu nó, nó cảm thấy vô cùng tự nhiên, giống như không có cách nào khác.
Ý tưởng chính là bạn sử dụng nhiều phương pháp liên tiếp trên một tập hợp các phần tử.
Ví dụ, giả sử sau khi tôi nhấp vào một nút, tôi muốn thay đổi một lớp cũng như thay đổi một số văn bản. Nhưng nút có một số HTML bên trong.
Open
Với jQuery, chúng ta có thể "xâu chuỗi" toàn bộ chuỗi hành động lại với nhau.
$(".button") .removeClass("open") .addClass("closed") .find(".text") .text("Closed");
Điều này có thể thực hiện được vì hầu hết các phương thức của jQuery, trong khi được sử dụng như một bộ thiết lập, trả về một tập hợp phần tử giống như tập hợp mà phương thức được gọi. Đôi khi tập hợp đó hoàn toàn giống nhau, giống như trường hợp với removeClass
và addClass
ở đây, và đôi khi tập hợp đó bị thay đổi như trường hợp ở đây với find
.
Trong ví dụ mà chúng tôi đã làm việc trong video, chúng tôi cũng đã nói về việc .end()
“lùi lại” một cấp độ nào trong chuỗi.
$(".button") .removeClass("open") // .button .addClass("closed") // .button .find(".text") // .button .text .text("Closed") // .button .text .end(); // .button .data("thing"); // GETTER on .button
Có lẽ điều đó giải thích nó tốt hơn. Khi tập hợp các phần tử thay đổi, tôi thụt lề dòng một và ghi nhận sự thay đổi trong nhận xét. Sau đó, khi chúng tôi .end()
nó lùi lại một cấp. Điều này hoạt động cho dù bạn thay đổi lựa chọn bao nhiêu lần. Tất cả kết thúc khi bạn sử dụng một phương thức trả về một thứ gì đó khác với một tập hợp các phần tử.