Viết hàng loạt phương thức chỉ với một câu lệnh trong jQuery

Thông thường, khi bạn muốn một phần tử thực hiện hàng loạt phương thức nào đó thì bạn sẽ viết các phương thức đó dưới dạng từng câu lệnh riêng biệt.

Ví dụ:

Để phần tử <div> thực hiện bốn phương thức animate()

$("div").animate({left:'300px'});
$("div").animate({top:'300px'});
$("div").animate({left:'0px'});
$("div").animate({top:'0px'});

Xem ví dụ

Cú pháp

$(selector).method1().method2().method3()....methodN();

Ví dụ:

Câu lệnh dưới đây sẽ thiết lập background-color là blue cho phần tử <div> sau đó cho nó trượt lên rồi trượt xuống.

$("div").css("background-color","blue").slideUp(3000).slideDown(3000);

Xem ví dụ

Tuy nhiên, trong trường hợp viết quá nhiều phương thức trong một câu lệnh, dẫn đến tình trạng câu lệnh dài lòng thòng khó xem. Khi đó, bạn có thể ngắt các phương thức xuống dòng, và cũng có thể tạo khoảng trắng (điều ảnh KHÔNG gây ra lỗi cú pháp).

Ví dụ:

$("div").css("background-color","blue")
        .animate({left:'300px'},2000)
        .animate({top:'300px'},2000)
        .animate({left:'0px'},2000)
        .animate({top:'0px'},2000);

Xem ví dụ