JQuery, biblioteka JavaScript, pozwala użytkownikom pisać mniej i robić więcej. Możesz wykonać wiele akcji, pisząc tylko jeden wiersz kodu. Przykładem tego jest metoda łączenia, która pozwala połączyć serię metod jQuery i zastosowanie ich do elementu naraz. Jest to bardzo zabawna technika, która zmniejsza twoją pracę i oszczędza dużo czasu. Ten przewodnik został zaprojektowany w celu oświecenia czytelników na temat łańcucha różnych metod w jQuery.

Metody łączenia w jQuery

Jak już wspomniano, możemy łączyć różne metody jQuery do wykonywania wielu działań na elemencie HTML. Można to zrobić, wybierając element i pisząc wszystkie wymagane metody w jednym wierszu oddzielonym kropką.

Największą zaletą stosowania metody łączenia jest to, że zapobiega jej śledzeniu przeglądarki tego samego elementu. Innymi słowy, absolutnie nie ma potrzeby używania tego samego selektora w kółko, tym samym zmniejszając szanse na spowolnienie kodu.

Przejrzyjmy, jak dalej łączyć metody w jQuery za pomocą przykładów.

Przykład 1

W tym przykładzie łączymy dwie metody jQuery, które są CSS () i Animate ().

Html

Metody łączenia jQuery

Kliknij tutaj

W powyższym kodzie HTML tworzone są dwa elementy, które są

, I . Teraz będziemy połączyć metody CSS () i Animate () na

Element, aby zobaczyć, jak działają metody łączenia w jQuery.

JQuery

$ (dokument).gotowy (funkcja ()
$ (".przycisk").kliknij (funkcja ()
$ („p”).CSS („Kolor”, „zielony”).Animate (szerokość: „100%”)
.animate (fontSize: „46px”).Animate (krycia: "0.4 ");
);
);

W powyższym kodzie zastosowaliśmy kolor do

element za pomocą metody CSS () i ustawiaj szerokość, czcionek i krycie na tym samym elemencie za pomocą metody Animate ().

Wyjście

Po kliknięciu przycisku, oto co się stanie.

Metody CSS () i Animate () są z powodzeniem połączone.

Jak widać w powyższym przykładzie, połączyliśmy metody jQuery w jednym wierszu kodu, kod będzie działał dobrze, nawet jeśli chcesz podzielić kod na wiele linii, aby poprawić czytelność.

JQuery

$ („p”).CSS („Kolor”, „zielony”)
.Animate (szerokość: „100%”)
.animate (fontSize: „46px”)
.Animate (krycia: "0.4 ");

Nie będzie absolutnie żadnego wpływu na wyjście.

Przykład 2

Poniższy przykład ilustruje jednocześnie metody łańcucha slajdów (), slidedown () i fadeout ().

Html

Metody łączenia jQuery

Kliknij tutaj

W powyższym kodzie HTML tworzono dwa elementy, które są

, I . Let's Chain Slideup (), Slidedown () i Fadeout () metody widzenia powstałego efektu.

JQuery

$ (dokument).gotowy (funkcja ()
$ (".przycisk").kliknij (funkcja ()
$ („h1”).slajd (1000).Slidedown (1000).Fadeout (1000);
);
);

W powyższym kodzie każdej z metod przypisano prędkość 1000 milisekund.

Wyjście

Metody Slajdeup (), Slidedown () i Fadeout () są łączone i działają prawidłowo.

Metody łączenia bez przekazywania argumentów

Jeśli nie przekazasz żadnego parametru do metody jQuery, nie zwróci on obiektu jQuery, a nie po prostu zwróci zawartość określonego elementu.

Przykład

W tym przykładzie łączymy metody html (), addClass () i hide ().

Html

Niektóre nagłówek

Jakiś akapit.

Kliknij tutaj

Utworzono trzy elementy HTML, które są

,

, I .

JQuery

$ (dokument).gotowy (funkcja ()
$ („przycisk”).kliknij (funkcja ()
// To zadziała
$ („h1”).HTML („Some Heading”).Addclass („demo”).Fadeout (1000);
// To nie zadziała
$ („p”).html ().addClass („demo”);
);
);

W powyższym kodzie przeszliśmy parametr do metody html () podczas składania wniosku

tylko. Jednak w przypadku metody HTML () nie został przekazany do metody HTML

. Dlatego skutki łączenia będą działać tylko dla

, i nie dla

.

Wyjście

Brak wpływu na akapit.

Wniosek

Łączenie różnych metod jQuery można wykonać, wybierając element i pisząc wszystkie wymagane metody w jednym wierszu oddzielonym kropką, aby wykonywać wiele działań na elemencie HTML. Zaletą tego jest to, że zapobiega to przeglądarce do śledzenia tego samego elementu w kółko, ponadto zmniejszenie szans na spowolnienie kodu. W tym spisie prowadzi Cię o tym, jak łańcuch metod w jQuery za pomocą odpowiednich przykładów.