Wiele razy rozmawialiśmy teraz o małych akcentach w API jQuery, które są naprawdę całkiem fajne. Wszystko jest przemyślane i dopracowane. Łańcuch zdecydowanie należy do tej kategorii. Kiedy zaczniesz go używać i zrozumiesz, wydaje się to niezwykle naturalne, jakby nie było innego wyjścia.
Główną ideą jest to, że używasz wielu metod z rzędu na jednej kolekcji elementów.
Na przykład, powiedzmy, że po kliknięciu przycisku chcę zmienić klasę, a także zmienić tekst. Ale przycisk ma wewnątrz trochę HTML.
Open
Dzięki jQuery możemy „połączyć” całą serię działań razem.
$(".button") .removeClass("open") .addClass("closed") .find(".text") .text("Closed");
Jest to możliwe, ponieważ większość metod jQuery, gdy są używane jako ustawiające, zwraca zestaw elementów, tak jak ten, na którym została wywołana metoda. Czasami ten zestaw jest dokładnie taki sam, jak w przypadku removeClass
i addClass
tutaj, a czasami ten zestaw jest zmieniany, jak w przypadku tutaj z find
.
W przykładzie, z którym pracowaliśmy w filmie, rozmawialiśmy również o tym, .end()
który „cofa się” o jeden poziom w łańcuchu.
$(".button") .removeClass("open") // .button .addClass("closed") // .button .find(".text") // .button .text .text("Closed") // .button .text .end(); // .button .data("thing"); // GETTER on .button
Być może to lepiej to wyjaśnia. Kiedy zestaw elementów się zmienił, wciąłem pierwszy wiersz i zanotowałem zmianę w komentarzu. Potem, kiedy .end()
cofamy się o jeden poziom. Działa to niezależnie od tego, ile razy zmienisz wybór. Wszystko kończy się, gdy używasz metody, która zwraca coś innego niż zestaw elementów.