jQuery dla początkujących
jQuery dla początkujących
jQuery dla początkujących 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,
Witamy na kursie jQuery dla początkujących .
W tej sekcji zaczniemy poznawać szczegółowe informacje na temat jQuery.
Wprowadzenie 2
Przed rozpoczęciem tego kursu
należy ukończyć wcześniej następujące kursy.
- Podstawy HTML
- Podstawy CSS
- Podstawy JavaScript
- Jeśli znają już Państwo te zagadnienia, mogą Państwo kontynuować kurs.
Zaczynajmy
Zaczynajmy.
Przede wszystkim odpowiedzmy na pytanie, do czego służy JQuery.
Zanim odpowiemy na pytanie, powtórzmy podstawy
Zanim odpowiemy na pytanie, powtórzmy podstawy.
Język HTML jest językiem znaczników. Jest więc językiem znaczników tekstu, a nie językiem programowania. Nie opiera się na pojęciach takich jak programowanie obiektowe. Innymi słowy, w jego strukturze nie występują obiekty; znamy natomiast znaczniki HTML, atrybuty itp.
JavaScript wykonuje operacje na DOM
Często musimy wykonywać operacje na elementach HTML znajdujących się na stronach internetowych. Aby to umożliwić i zapewnić dostęp do elementów HTML z poziomu JS, opisujemy stronę za pomocą modelu o nazwie DOM (Document Object Model).
JavaScript wykonuje operacje na DOM, który jest obiektowym odpowiednikiem strony internetowej. Nazywamy to manipulowaniem DOM.
Przykład
Podajmy przykład.
Mamy element button, jak w poniższym przykładzie, zawierający tekst 'Not Clicked' . Po kliknięciu przycisku zmienimy jego tekst na 'Clicked'.
Aby to osiągnąć, musimy wykonać manipulację DOM za pomocą języka JavaScript.
W naszym kursie Wprowadzenie do JavaScriptu nauczyliśmy się zarządzać dokumentem internetowym za pomocą JavaScriptu. JQuery to biblioteka, która pozwala zwięźlej wykonywać manipulacje DOM niż przy użyciu samego JavaScriptu.
<!--Initial Element -->
<button id="my-button">Not Clicked</button>
<!---Desired Element after clicking the button-->
<button id="my-button">Clicked</button>Pytanie
Mamy dla Państwa pytanie!
Przykład 2
W poniższym przykładzie zdefiniowaliśmy przycisk o identyfikatorze my-button.
Teraz uzyskajmy dostęp do tego elementu za pomocą JavaScriptu i DOM.
Po kliknięciu przycisku za pomocą kodu JS uzyskamy dostęp do DOM i zmienimy właściwość innerHTML elementu o identyfikatorze my-button na click.
<button id="my-button">
Not Clicked
</button>
<script>
let myButton = document.getElementById('my-button');
myButton.addEventListener("click",
function(){
myButton.innerHTML = "Clicked"
})
</script>Ostrzeżenie
JQuery to po prostu biblioteka, która powstała, aby uprościć korzystanie z funkcji i metod dostępnych w JS Core.
Innymi słowy, pozwala łatwiej i czytelniej wykonywać wiele operacji możliwych w VanillaJS.
Wyjaśnienie przykładu
Wyjaśnijmy ten kod.
let myButton = document.getElementById('my-button');
Przypisujemy obiekt document języka JavaScript do zmiennej o nazwie myButton za pomocą metody getElementById.
myButton.addEventListener("click", function(){
myButton.innerHTML = "Clicked"
})
Następnie nasłuchiwaliśmy zdarzenia kliknięcia przycisku i wprowadziliśmy w nim zmiany.
Wykonaliśmy manipulację DOM, korzystając z podstawowych funkcji języka bez użycia biblioteki ani frameworka, co określa się jako native lub vanilla.
Napiszmy ten sam kod z użyciem jQuery i skorzystajmy z funkcji oferowanych przez bibliotekę jQuery.
Ostrzeżenie
Pojęcie określane w wielu miejscach jako VanillaJS oznacza w rzeczywistości czysty, podstawowy Javascript — wyłącznie jego obiekty, metody i funkcje — oraz korzystanie z funkcji oferowanych przez przeglądarkę.
Przykład jQuery
Poniżej przedstawiliśmy nasz poprzedni przykład z użyciem JQuery.
Należy tylko uważać, aby nie skracać kodu zbyt mocno kosztem pomijania składni.
<script>
$('#my-button').on('click', function(){
$(this).text('Clicked');
})
</script>
<button id="my-button">Not Clicked</button>Gratulacje
Gratulacje 🎉
W tej sekcji rozpoczęliśmy naukę jQuery i zrozumieliśmy, jak bardzo jQuery może ułatwić nam pracę.
Do zobaczenia w następnej sekcji!
Często zadawane pytania
Czy lekcja „jQuery dla początkujących” jest bezpłatna?
Tak — pełny tekst „jQuery dla początkujących” 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 „jQuery dla początkujących”?
jQuery dla początkujących Ć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 „jQuery dla początkujących”?
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.