Pierwsze kroki z jQuery
Pierwsze kroki z jQuery
Pierwsze kroki z 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,
Aby korzystać z biblioteki JQuery, musimy najpierw dodać ją do dokumentu HTML.
W poniższym przykładzie adres biblioteki jQuery został dodany jako wartość atrybutu src pomiędzy znacznikami head.
Biblioteka jQuery jest teraz gotowa do użycia w naszym projekcie.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.slim.js"></script>
</head>
<body>
</body>
</html>Wybieranie w jQuery
Aby wykonywać operacje na elementach HTML (które od tej pory będziemy nazywać DOM), musimy najpierw wybrać element.
W jQuery do wyboru elementu używa się metody $() lub jQuery().
Metoda $() jest częściej wybierana przez programistów.
Za pomocą parametru przekazywanego do tej metody określamy, który element chcemy wybrać.
XPath
Wyrażenie przekazywane do metody $ jest selektorem XPath, który znamy również z CSS.
Innymi słowy, elementy HTML wybieramy w JQuery w taki sam sposób jak w CSS.
Przykłady XPath
Załóżmy, że nasz kod HTML wygląda następująco.
<div id="my-box" class="my-box">
<p class="my-p">
<span class="my-text">Hello jQuery</span>
</p>
</div>
Wybierzmy elementy HTML za pomocą jQuery
// Dummy $ to demonstrate jQuery selectors in Node.js
function $(selector) {
console.log("Selector:", selector);
return [];
}
// Selects the element with the id of my-box.
$('#my-box')
// Selects the element with the my-box class.
$('.my-box')
// Selects all p elements that are descendants of the element with my-box id
$('#my-box p')
// Select the element with the .my-p class that is the child of the element with my-box class.
$('.my-box > .my-p')jQuery pozwala pisać bardziej zwięzły kod
Gdybyśmy chcieli osiągnąć to samo za pomocą Vanilla (czystego) JavaScriptu, musielibyśmy napisać więcej linii kodu.
jQuery pozwala pisać bardziej zwięzły kod dzięki własnym metodom.
Ostrzeżenie
JQuery jest tylko biblioteką, która w praktyce ułatwia tworzenie stron internetowych w porównaniu z Vanilla JavaScript.
Informacja
Kolejną zaletą jQuery jest to, że wszystkie nowoczesne przeglądarki obsługują napisany przez nas kod.
Niektóry kod napisany za pomocą VanillaJS może powodować skutki uboczne w wybranych przeglądarkach, natomiast jQuery dzięki zapewnianej abstrakcji gwarantuje takie samo działanie w każdej przeglądarce.
JQuery zwalnia nas z konieczności uwzględniania specyfiki przeglądarek podczas pisania kodu.
$(document).ready
Zanim przejdziemy do podstaw jQuery, poznajmy metodę $(document).ready.
Jak pamiętamy z omawiania HTML, skrypty JavaScript można umieszczać w dowolnym miejscu pomiędzy znacznikami head lub body w dokumencie HTML.
$(document).ready 2
Załóżmy, że mamy kod HTML taki jak poniżej.
Przeglądarka będzie interpretować nasz kod od znacznika <!DOCTYPE html> aż do zamykającego znacznika </html>.
Instrukcja <script src = "https://code.jquery.com/jquery-3.5.1.slim.js"> </script> rozpocznie pobieranie biblioteki za pośrednictwem code.jquery.com.
W następnym wierszu za pomocą metody $ biblioteki jQuery wybrano DOM. Występuje tu jednak problem. Jeśli dokument HTML nie zostanie w pełni załadowany w momencie wywołania metody $ ('# test'), nasz kod JS nie zadziała.
W takiej sytuacji używa się metody $(document).ready, aby mieć pewność, że dokument został w pełni załadowany.
<div id="test">Hello Coddy</div>
<script>
$('#test').text('Hello Coddy')
</script>
$(document).ready 3
Po powyższej definicji
wystarczy użyć metody $(document).ready(). Metoda ta zaczeka na załadowanie całej zawartości, a następnie wykona kod.
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<div id="test">Hello Coddy</div>
<script>
$(document).ready(function(){
$('#test').text('Hello Coddy')
})
</script>
</body>
</html>Pytanie
Proszę odpowiedzieć na pytanie!
Gratulacje
Gratulacje 🎉
W tej sekcji rozpoczęliśmy naukę biblioteki jQuery oraz jej metody $(document).ready().
W następnej sekcji poznamy selektory biblioteki jQuery.
Często zadawane pytania
Czy lekcja „Pierwsze kroki z jQuery” jest bezpłatna?
Tak — pełny tekst „Pierwsze kroki z 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 „Pierwsze kroki z jQuery”?
Pierwsze kroki z 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 „Pierwsze kroki z 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.