Stylowanie za pomocą JQuery
Stylowanie za pomocą JQuery
Stylowanie za pomocą JQuery to bezpłatna lekcja jQuery Academy na CoddyKit. To lekcja 1 z 1. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej jQuery Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs jQuery Academy zawiera 1 lekcji w sumie.
Wprowadzenie
Dzień dobry,
We wszystkich dotychczasowych przykładach pracowaliśmy z obiektami HTML DOM.
Za pomocą jQuery możemy również modyfikować style elementów HTML.
JQuery udostępnia do tego kilka metod.
Klasy
W pierwszych przykładach zobaczymy zastosowanie klas w JQuery.
W poniższym przykładzie dołączymy bibliotekę JQuery do HTML i zdefiniujemy dwie klasy o nazwach pink i yellow, które zmieniają kolor tekstu odpowiednio na różowy i żółty.
Zaczynajmy 🚀
Przykład
Pomiędzy znacznikami <p> i <body> dodaliśmy element.
Obecnie ten element nie ma jeszcze przypisanej klasy.
<style>
.pink{
color:pink;
}
.yellow{
color: yellow;
}
</style>
<p>lorem ipsum </p>Przykład 2
Dodajmy teraz klasę pink do elementu akapitu za pomocą metody addClass().
Na ekranie podglądu zobaczymy, że kolor tekstu Lorem ipsum zmieni się na różowy.
<style>
.pink{
color:pink;
}
</style>
<p>lorem ipsum</p>
<script>
/*
This callback runs as soon as
the DOM is Loaded
*/
$(document).ready(function(){
//adding pink class to p element
$('p').addClass('pink');
});
</script>removeClass
Metoda removeClass()
Jeśli chcemy usunąć klasy z elementów HTML, używamy metody removeClass().
Zmieniliśmy poniższy przykład i początkowo przypisaliśmy klasę pink do naszego elementu HTML. Po załadowaniu DOM klasa pink zostanie usunięta z naszego elementu p.
<style>
.pink{color:pink;}
</style>
<p class="pink">lorem ipsum </p>
<script>
/*
This callback runs as soon as
the DOM is Loaded
*/
$(document).ready(function(){
//removing pink class to p element
$('p').removeClass('pink');
});
</script>Przełączanie klasy
Metoda toggleClass()
Jak wskazuje jej nazwa, za pomocą tej metody
usuwamy klasę z elementu docelowego, jeśli już istnieje, lub dodajemy ją, jeśli jej nie ma.
<style>
.pink{color:pink;}
</style>
<p class="pink">lorem ipsum</p>
<script>
/*
This callback runs as soon as
the DOM is Loaded
*/
$(document).ready(function(){
/*
Since p element has pink class,
pink class will be removed.
*/
$('p').toggleClass('pink');
/*
Since p element hasn't pink class,
pink class will be added.
*/
$('p').toggleClass('pink');
/*
Since p element has pink class,
pink class will be removed.
*/
$('p').toggleClass('pink');
});
</script>Metoda CSS
Metoda css()
Poznaliśmy metody dodawania i usuwania klas.
Teraz poznajmy metodę CSS służącą do definiowania stylów inline dla naszych węzłów HTML.
Metoda CSS przyjmuje dwa parametry.
- Pierwszy parametr to nazwa właściwości, która ma zostać przypisana.
- Drugi parametr to wartość przypisywanej właściwości.
Poniższy przykład pokazuje różne zastosowania metody CSS.
<button>My Button</button>
<script>
/*
Below, the button element's color style
has been read and written
to the color variable.
*/
let color = $('button').css('color');
/*
Now let's change the button color by assigning
the red value to the second argument=
*/
$('button').css('color', 'red')
/*
If we want to change more than one style of
an element at the same time, we pass JSON type arguments.
*/
$("button").css({"color": "red", "padding": "20px"});
</script>
API JQuery
Poznaliśmy wiele operacji modyfikowania DOM za pomocą jQuery.
Oprócz poznanych metod JQuery oferuje wiele innych metod modyfikowania elementów.
Całe API można przejrzeć, klikając poniższy link.
Gratulacje
Gratulacje 🎉
Poznaliśmy stylowanie za pomocą jQuery.
W następnej sekcji poznamy obsługę zdarzeń w jQuery.
Często zadawane pytania
Czy lekcja „Stylowanie za pomocą JQuery” jest bezpłatna?
Tak — pełny tekst „Stylowanie za pomocą JQuery” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu jQuery Academy, przejdź na CoddyKit PRO. Kurs jQuery Academy zawiera 1 lekcji w sumie.
Co nauczysz się w „Stylowanie za pomocą JQuery”?
Stylowanie za pomocą JQuery Ćwiczysz jQuery Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć jQuery Academy?
Nie wymagamy żadnego doświadczenia. jQuery Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 1.
Ile czasu zajmuje lekcja „Stylowanie za pomocą JQuery”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji jQuery Academy?
Tak. Każda lekcja jQuery Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.