Manipulacja CSS za pomocą jQuery

Z jQuery Na poziomie interakcji z użytkownikiem możemy osiągnąć wiele rzeczy, w tym manipulować drzewo DOMJednak jedną z rzeczy, które mogą nie przychodzić na myśl, jest Manipulacja CSS.
Manipulując CSS możemy w bardzo naturalny i płynny sposób uzyskać zmiany w elementach, które widzimy na ekranie, bez uciekania się do skomplikowanych funkcji w JavaScript czyste, tak jak kilka lat temu.
ten SŁOŃCE w jaki sposób zorganizowany jest nasz dokument HTML, pozwala nam nadać przewidywalną i hierarchiczną strukturę temu, co chcemy pokazać na ekranie. Jest to bardzo ważne, ponieważ jest to sposób, w jaki przeglądarka interpretuje dokumenty, jednak jest jeszcze inny aspekt, który możemy wykorzystać na naszą korzyść; chodzi o to, aby móc lokalizować elementy i podejmować na nich działania.
Kiedy więc musimy dokonać zmiany w konkretnym elemencie, dzięki SŁOŃCE Możemy go zlokalizować na różne sposoby, a tym samym manipulować jego zawartością, stylem, a nawet usunąć go z dokumentu w czasie rzeczywistym.
Jest to bardzo praktyczne w momentach, w których musimy wyróżnić element wykonując czynność w dokumencie lub otrzymując odpowiedź, a tym samym nie musimy zmieniać strony lub całkowicie jej odświeżać.
Jedna z najlepszych praktyk przy tworzeniu stylów CSS jest użycie klas, dzięki czemu możemy tworzyć aspekty, które możemy następnie zastosować niezależnie do różnych elementów bez konieczności ciągłego przepisywania kodu.
Atrybut klasyAby element przyjął te style, po prostu musimy umieścić go w jego atrybucie klasa = "" nazwę odpowiedniej klasy i jeśli styl, który w niej piszemy jest odpowiedni dla danego elementu, będzie to odzwierciedlał.
OgraniczenieWszystko brzmi świetnie, ale jest ograniczenie, styl jest ładowany przy podnoszeniu strony i jeśli potrzebujemy dodać nowy styl, normalnie strona musiałaby zostać ponownie załadowana, powodując przerwę w nawigacji dla użytkownika.
jQuery pozwala nam ominąć te ograniczenia, dając nam możliwość włączenia wspomnianych klas w czasie rzeczywistym do dokumentu bez konieczności przeładowywania całej strony, do tego po prostu musimy użyć metody addClass () i przekaż mu nazwę klasy CSS które chcemy dodać do chwili.
Zobaczmy krok po kroku mały praktyczny przykład, a następnie zobaczymy pełny kod tego, co jest opisane:
1- Najpierw tworzymy nasz plik o nazwie add-classes.html i dodamy bibliotekę jQuery, ze względów praktycznych wykonujemy bezpośrednie połączenie z CDN adekwatne, wymaga to połączenia z internetem, jednak możemy zapisać plik i obsłużyć go lokalnie.
2- Potem stworzymy nasze zajęcia CSSAby lepiej widzieć zmianę stworzyliśmy dwie klasy, każda z nich zmienia kolor tła elementu, do którego jest zastosowana, a każda klasa będzie miała inny kolor.
3- W treści naszego dokumentu tworzymy dwa a każdemu z nich przypisujemy identyfikator, za pomocą którego możemy je zidentyfikować w ramach SŁOŃCE łatwo za pomocą selektorów jQuery.
4- Następnie tworzymy element, do którego w zdarzeniu na kliknięcie mówimy mu, aby wywołał funkcję JavaScript.
5- W końcu budujemy naszą funkcję JavaScript, to po prostu wywoła każdy element za pomocą jego selektora i metody addClass () Doda klasę tych, które stworzyliśmy na początku, kiedy to zrobimy, natychmiast zobaczymy zmianę.
Ponieważ opisaliśmy, co powinniśmy zrobić, zobaczymy kod taki, jaki był:

 Dodaj klasyNasz pierwszy blok CSS jQuery
Nasz drugi blok CSS jQuery
Kliknij, aby zmienić zajęcia

Jak widzimy jest to dość proste i gdy wykonamy to w naszej przeglądarce zobaczymy jak przed kliknięciem w przycisk elementy są normalne, a po kliknięciu zmieniają kolor i dodawane są odpowiednie klasy. Zobaczmy na poniższym obrazku, do czego się odnosimy:

POWIĘKSZAĆ

Po kliknięciu przycisku możemy zwizualizować przejście na naszej stronie:

Skoro możemy dodać klasę, to musimy też móc zrobić coś przeciwnego, czyli usunąć ją w tym celu jQuery dostarcza nam metody usuńKlasę (), a to działa na zasadzie bardzo podobnej do poprzedniego przykładu, po prostu umieszczamy element i mówimy mu poprzez metodę, że musi usunąć wskazaną klasę, jeśli ją ma, to zostanie usunięty, w przeciwnym razie nic się nie dzieje.
Aby było trochę ciekawiej, dodamy użycie innej metody i jest to metoda sprawdzania klasy, to jest maKlasa () to pozwala nam zweryfikować, czy element ma konkretną klasę, dzięki temu możemy używać warunków i przeprowadzać różne eksperymenty, które dyktuje nasza logika.
W tym celu zrobimy małą stronę na której będziemy mieli kilka funkcji, funkcja zweryfikuje czy element ma konkretną klasę, jeśli tak zostanie usunięta, ale jeśli odpowiedź będzie negatywna to dodamy .
Daje nam to możliwość dynamicznej zabawy stylami, ponieważ możemy zobaczyć w czasie rzeczywistym, czy dodamy lub usuniemy określone wartości.
1- Na podstawie poprzedniego przykładu skoncentrujemy się tylko na części, w której napisaliśmy funkcję JavaScript.
2- Wewnątrz funkcji stworzymy dwa warunki warunkowe, w pierwszym będziemy pracować z pierwszym elementem, najpierw zapytamy blokiem warunkowym Jeśli () jeśli masz klasę o nazwie pierwsza klasaJeśli odpowiedź jest pozytywna, zastosujemy metodę remove class, jednak jeśli nie mamy klasy to dodamy ją, da nam to efekt przełącznik.
3- Powtarzamy poprzedni krok dla drugiego elementu i dzięki temu osiągamy, że zachowuje się on w ten sam sposób.
Zobaczmy nowy kod, który stworzyliśmy poniżej:

 Dodaj klasyNasz pierwszy blok CSS jQuery
Nasz drugi blok CSS jQuery
Kliknij, aby zmienić zajęcia

Zobaczmy teraz jak wygląda wykonanie naszego programu, na tym pierwszym obrazku zobaczymy jak wygląda nasz dokument HTML W stanie początkowym dołączyliśmy konsolę Chrom abyśmy zauważyli, jak zmieniają się elementy:

POWIĘKSZAĆ

Zobaczmy teraz, co się stanie, gdy klikniemy przycisk i nastąpi przejście:

POWIĘKSZAĆ

Na pierwszy rzut oka może się wydawać, że ten dokument działa dokładnie tak samo, jak ten, który stworzyliśmy w tym samouczku, jednak jeśli klikniemy ponownie, zobaczymy, jak zadziała metoda. usuńKlasę ().
Sprawdziliśmy również, jak metoda maKlasa () działa, może nie robi nic, co widzi użytkownik, ale daje nam możliwość uruchamiania warunkowych na naszym HTML.
Jest coś, co nam pozwala jQuery a to jest przełączanie między klasami, do tego używamy metody toggleClass (), za jego pomocą możemy określić naszemu elementowi, że gdy wywołamy zdarzenie, przyjmie klasę, jeśli ma już zaaplikowaną inną z listy.
PożytekJest to bardzo przydatne, gdy chcemy pracować nad zmianami stanu, jest to rodzaj skrótu, który pozwala uniknąć konieczności pisania struktury warunkowej metodą hasClass (). Jego zastosowanie jest bardzo podobne do metod, które widzieliśmy do tej pory, jedyną różnicą jest to, że zamiast klasy przekażemy dwie oddzielone spacją.
Zobaczmy jak zmienimy tylko funkcję JavaScript naszego dokumentu testowego, aby uwzględnić tę nową metodę:
1- Dodamy klasę początkową do naszych elementów, w ten sposób będziemy mieli punkt wyjścia do zmian.
2- Następnie w ramach naszej funkcji JavaScript po prostu zastosujemy tę metodę toggleClass () do każdego z elementów za pomocą jego selektora.
Zobaczmy, jak wygląda nasz kod po zastosowanych zmianach:

 Dodaj klasyNasz pierwszy blok CSS jQuery
Nasz drugi blok CSS jQuery
Kliknij, aby zmienić zajęcia

Zobaczmy teraz, co się dzieje, gdy ładujemy dokument po raz pierwszy:

Zobaczmy teraz, co się stanie, gdy ponownie klikniemy przycisk:

POWIĘKSZAĆ

Jeśli będziemy kontynuować klikanie przycisku, zajęcia będą się zmieniać bez ograniczeń.
Na tym kończymy ten samouczek, dowiedzieliśmy się, jak możemy manipulować CSS bezpośrednio z jQueryDzięki temu możemy zacząć mieć lepsze pomysły, aby nasze interfejsy użytkownika były bogatsze w funkcjonalności.