JQuery to lekka i zabawna biblioteka JavaScript, która pozwala manipulować CSS na wiele różnych sposobów poprzez wykorzystanie różnych metod jQuery. Za pomocą tych metod możesz ustawić właściwości stylu elementów lub dodać lub usunąć określoną nazwę klasy z elementu, a może przełączyć między dodaniem lub usuwaniem klas.

Do manipulowania CSS stosuje się poniżej wspomniane metody jQuery .

1. Metoda CSS ()
2. Metoda addClass ()
3. Metoda HASCLASS ()
4. Metoda remontury ()
5. metoda toggleClass ()

Zbadajmy je szczegółowo.

Metoda CSS ()

Metoda CSS () w jQuery jest stosowana w celu zastosowania lub przyniesienia jednej lub więcej właściwości stylu do elementu HTML.

Składnia

CSS („Propert”, „wartość”); // aby ustawić właściwość CSS
CSS („Własność”); // Aby uzyskać nieruchomość CSS

Przykład 1

Załóżmy, że chcesz ustawić kolor tła elementu za pomocą metody CSS (.

Html

To jest akapit

Ustaw kolor tła Div

W powyższym kodzie trzy elementy HTML są ,

, i są tworzone.

JQuery

$ (dokument).gotowy (funkcja ()
$ (".przycisk").kliknij (funkcja ()
$ („div”).CSS („kolor tła”, „RosyBrown”);
);
);

Za pomocą metody CSS () Zmieniamy kolor tła elementu tylko przy kliknięciu przycisku.

Wyjście

Kolor tła Div został ustawiony.

Przykład 2

Załóżmy, że chcesz wyodrębnić właściwość stylu elementu HTML. Użyj następującego kodu.

Html

Jakiś akapit.

Zwróć wielkości czcionki P

W powyższym kodzie,

, a ponadto utworzono elementy

Element otrzymał rozmiar czcionki 25px.

JQuery

$ (dokument).gotowy (funkcja ()
$ („przycisk”).kliknij (funkcja ()
alert („font size =” + $ („p”).CSS („Font-size”));
);
);

Używamy metody CSS (), aby po prostu pobrać rozmiar czcionki akapitu. Po kliknięciu przycisku pojawi się komunikat ostrzegawczy wyświetlający rozmiar czcionki akapitu.

Wyjście

Przed kliknięciem przycisku.

Po kliknięciu przycisku.

Wyodrębniono rozmiar czcionki akapitu.

Metoda addClass ()

Jak sama nazwa wskazuje, metoda jQuery addClass () służy do dodawania pojedynczych lub wielu nazw klas do elementu HTML.

Składnia

$ (selektor).addClass (klasę, FuncName (indeks, currentClass))

Notatka: Nazwa klasy to wymagany parametr, który wskazuje, że nazwa klasy zostanie dodana i FuncName jest opcjonalnym parametrem, który określa funkcję do dodania nazwy klasy, która ma zostać dodana.

Przykład

Załóżmy, że zdefiniowałeś podobny element więcej niż raz na stronie internetowej i chcesz dodać klasę tylko do jednego z tych elementów. Użyj następującego kodu.

Html

Pierwszy paragraf.

Ostatni akapit.

Dodaj nazwę klasy do ostatniego akapitu

W powyższym kodzie utworzyliśmy dwa

tagi i jeden element.

CSS

.notatka
Rozmiar czcionki: 160%;
kolor niebieski;

Tutaj zdefiniowaliśmy stylistykę dla „notatki”.

JQuery

$ (dokument).gotowy (funkcja ()
$ („przycisk”).kliknij (funkcja ()
$ („p: last”).addClass („notatka”);
);
);

W powyższym kodzie klasa jest dodawana do nazwy „Uwaga” do ostatniego

element. Dlatego po kliknięciu przycisku styl zdefiniowany dla klasy notatek zostanie zastosowany do ostatniego akapitu.

Wyjście

„Uwaga” została pomyślnie dodana do ostatniego akapitu.

Metoda HASCLASS ()

W celu oceny, czy element ma klasę, czy nie, stosowana jest metoda HASCLASS (). Ta metoda wyświetla true, jeśli wykrywa jakąkolwiek klasę lub w inny sposób fałsz.

Składnia

$ (selektor).HASCLASS (nazwa klasy)

Notatka: Nazwa klasy jest wymaganym parametrem używanym do określania nazwy klasy do wyszukiwania.

Przykład

Załóżmy, że chcesz sprawdzić, czy istnieje jakaś klasa zastosowana do określonego zestawu podobnych elementów. Tak to się robi.

Html

Paragraf.

Kolejny akapit.

Czy dowolny element P ma klasę „główną”?

W tym kodzie HTML utworzyliśmy dwa

elementy i jeden element. Poza tym pierwszy

Elementowi przypisano klasę „główną”.

JQuery

$ (dokument).gotowy (funkcja ()
$ („przycisk”).kliknij (funkcja ()
Alert ($ („p”).HASCLASS („Main”));
);
);

W powyższym kodzie zaprojektowano komunikat ostrzegawczy, który zwróci true, gdy metoda HASCLASS () wykryje klasę o nazwie „Main”.

Wyjście

Metoda HASCLASS () działa poprawnie.

Metoda remontury ()

W celu usunięcia pojedynczych lub wielu nazw klas z elementów HTML stosuje się metodę usuwania.

Składnia

$ (selektor).removeClass (ClassName, FuncName (indeks, currentClass))

Notatka: Nazwa klasy parametr określa nazwę klasy do usunięcia, a FuncName Parametr określa funkcję, która pobiera pojedyncze lub wiele nazw klas do usunięcia. Oba są opcjonalnymi parametrami.

Przykład

Załóżmy, że chcesz usunąć klasę z określonego elementu HTML. Użyj poniższego kodu.

Html

Nagłówek 1

Nagłówek 2

Nagłówek 3

Usuń klasę „głowa” z elementu H1.

Stworzyliśmy cztery elementy HTML, które są

,

,

, I . Ponadto zastosowaliśmy klasę „głową” do

element.

CSS

.głowa
Krycie: 0.4;

Głowa klasowa otrzymała pewien styl przez CSS.

JQuery

$ (dokument).gotowy (funkcja ()
$ („przycisk”).kliknij (funkcja ()
$ („h1”).resuseClass („głowa”);
);
);

W powyższym kodzie zastosowano resuseClass (), aby usunąć klasę „głowicy” z

element.

Wyjście

Klasa „głowa” została usunięta z

element.

metoda toggleClass ()

Ta metoda przełącza się między dodawaniem lub usuwaniem pojedynczych lub wielu nazw klas z elementów HTML. Działa w sposób, w jaki dodaje nazwy klas do tych elementów, w których brakuje, i usuwa nazwę klas z tych elementów, w których już został ustawiony.

Składnia

$ (selektor).toggleClass (klasę, FuncName (indeks, currentClass), przełącznik)

W powyższej składni:

• Nazwa klasy to wymagany parametr używany do określania nazwy klasy do dodania lub usunięcia z elementu.
• FuncName Parametr określa funkcję, która pobiera nazwę klasy do dodania lub usunięcia.
• Z drugiej strony przełącznik Parametr to Boolean wartość, która mówi, czy nazwa klasy powinna zostać dodana (true) lub usunięta (false).

Obydwa FuncName i przełącz są opcjonalnymi parametrami.

Przykład

Załóżmy, że chcesz przełączyć nazwę klasy między wieloma elementami HTML. Postępuj zgodnie z poniższym kodem.

Html

Nagłówek 1

Nagłówek 2

Nagłówek 3

Przełącznik

Tworzone są cztery elementy HTML, które są

,

,

, I .

CSS

.głowa
kolor niebieski;
Krycie: 0.3;

Korzystając z CSS, klasa o nazwie „Głowa” otrzymała pewien styl.

JQuery

$ (dokument).gotowy (funkcja ()
$ („przycisk”).kliknij (funkcja ()
$ („H1, H2, H3”).ToggleClass („głowa”);
);
);

W powyższym kodzie klasa „głowa” jest przełączana między

,

, I

elementy.

Wyjście

Musisz kliknąć przycisk wiele razy, aby zobaczyć efekt przełączania.

Klasa przełączania działa poprawnie.

Wniosek

CSS można manipulować poprzez użycie różnych metod jQuery; Metoda css () stosuje lub pobiera jedną lub więcej właściwości stylu elementu, metoda addClass () dodaje nazwy klas do elementów, hASCLASS () wykrywa, czy element ma klasę lub nie, usuń () usuwa nazwy klas z elementy i przełączniki ToggleClass () między dodawaniem lub usuwaniem nazw klas z elementów. Metody te są szczegółowo wyjaśnione za pomocą odpowiednich przykładów.