Wprowadzenie
Jeśli orientujesz się w świecie programowania, wiesz, jak ważne są języki programowania. Do jednych z najważniejszych i najczęściej używanych należą HTML, CSS, oraz JavaScript. Podczas gdy HTML i CSS pomagają projektować i nadawać strukturę stronie internetowej, JavaScript pozwala uczynić ją interaktywną. Istnieje wiele bibliotek JavaScript, których możesz użyć, aby dodać unikalne funkcje do swojego projektu internetowego. Wśród nich znajduje się biblioteka jQuery.
jQuery samo w sobie nie jest językiem programowania. Jest to narzędzie, którego można używać do ułatwienia tworzenia stron internetowych w języku JavaScript. Pomaga to uczynić zadania prostszymi i bardziej przejrzystymi. Słynie z opierania się na koncepcji „Pisz mniej, rób więcej” (Write Less, Do More). Oprócz ułatwienia tworzenia stron internetowych, jQuery daje również dodatkową korzyść w postaci kompatybilności międzyprzeglądarkowej. Oznacza to, że kod może renderować się poprawnie niezależnie od tego, jaka przeglądarka jest używana do wyświetlania wyników.
Aby lepiej zobrazować, jak jQuery czyni kod bardziej zwięzłym, rozważmy przykład. Załóżmy, że piszemy program „Hello, World!”. Oto jak wyglądałby odpowiednio w JavaScript i jQuery:
|
1 2 |
JavaScript document.getElementById("demo").innerHTML = "Hello, World!"; |
|
1 2 |
jQuery $("#demo").html("Hello, World!"); |
Obie te linie kodu dadzą ten sam wynik. Jednak, jak widać, jQuery sprawia, że zapis jest bardziej zwięzły i konkretny.
In tym samouczku dowiesz się wszystkiego o podstawach jQuery. Możesz pobrać to narzędzie dla siebie z tej strony internetowej. Będziemy postępować tak, jakbyś był całkowicie początkującym, nieposiadającym żadnej wiedzy na temat jQuery. Ten samouczek nauczy Cię, jak zainstalować jQuery oraz przedstawi niektóre z powiązanych z nim fundamentalnych pojęć. Przyjrzymy się kilku popularnym selektorom, zdarzeniom i efektom w jQuery. Następnie dowiesz się, jak testować koncepcje programistyczne, takie jak API, DOM i CDN, na pomocnych przykładach. Przeczytaj dalszą część, aby zapoznać się ze światem jQuery.
Zanim zaczniemy
Istnieją pewne rzeczy, które zadziałają na Twoją korzyść, jeśli poznasz je wcześniej. Na przykład podstawowa wiedza na temat działania HTML i CSS bardzo Ci pomoże. Nie będziemy tego omawiać w tym samouczku. Będziemy pracować przy założeniu, że potrafisz przynajmniej stworzyć prostą stronę internetową. Powinieneś także mieć podstawowe pojęcie o tym, jak ogólnie działa programowanie. Nie oznacza to koniecznie, że musisz być ekspertem w JavaScript, aby przejść dalej. Wystarczy podstawowa znajomość takich pojęć jak logika, zmienne i typy danych w programowaniu.
Jak skonfigurować jQuery w swoim systemie
Przede wszystkim zobaczmy, jak można skonfigurować jQuery w swoim systemie. jQuery jest dostępne jako plik JavaScript, ponieważ jest to biblioteka JavaScript. Musisz podlinkować ten plik w kodzie HTML naszej strony internetowej. Można to zrobić na dwa sposoby. Jak wspomniałem wcześniej, jednym ze sposobów jest pobranie go z tutaj. Oprócz oficjalnej strony internetowej, jQuery można również znaleźć w Google Hosted Libraries tutaj.
Innym sposobem jest użycie sieci dostarczania treści (Content Delivery Network lub CDN) do podlinkowania pliku. CDN składa się z zestawu serwerów, które pomagają lokalnie dostarczać zawartość internetową. Hostowanie pliku jQuery za pośrednictwem CDN pozwala na znacznie szybsze dostarczenie zawartości do użytkownika. Dlatego od tego momentu w tym samouczku będziemy korzystać z sieci CDN.
W naszym pierwszym przykładzie stworzymy projekt internetowy. Ten mały projekt zawiera style.css w katalogu css/. script.js znajduje się w katalogu js/. Na koniec, index.html znajduje się w katalogu głównym projektu internetowego:
Zgodnie z tym projektem utworzymy szkielet HTML. Następnie zapiszemy go jako index.html:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!doctype html> <html lang="en"> <head> <title>jQuery Demo</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> </html> |
W tym miejscu podlinkujemy plik jQuery. Jak wspomniałem wcześniej, podlinkujemy go za pomocą CDN. Link do jQuery należy wstawić przed </body> znacznikiem. Następnie możesz dodać swój własny plik JavaScript, którym w naszym przykładzie był script.js w naszym przykładzie. Pamiętaj, aby zawsze umieszczać plik JavaScript poniżej biblioteki jQuery, w ten sposób:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!doctype html> <html lang="en"> <head> <title>jQuery Demo</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="js/script.js"></script> </body> </html> |
Co zrobisz, jeśli zamiast tego pobierzesz lokalną kopię biblioteki jQuery? W takim przypadku musisz zapisać plik jQuery w folderze js/. Następnie możesz go podlinkować jako js/jquery.min.js.
jQuery: Podstawy
Zanim przejdziemy do szczegółów, omówmy niektóre z podstaw jQuery. Głównym zadaniem jQuery jest używanie DOM do łączenia elementów HTML w przeglądarce. DOM to skrót od Document Object Model. Jest to metoda, która umożliwia interakcję JavaScript z HTML w przeglądarce. Możesz zwizualizować DOM, klikając prawym przyciskiem myszy na stronie internetowej i wybierając Zbadaj. HTML, który pojawia się w Narzędziach deweloperskich, to właśnie DOM.
Węzeł (node) to pojedynczy element HTML w DOM. JavaScript może modyfikować wszystkie te obiekty lub elementy. Możesz wyobrazić sobie układ tych obiektów jako strukturę przypominającą drzewo. <html> znajduje się w korzeniu, podczas gdy elementy rozgałęziają się dalej.
Kliknięcie prawym przyciskiem myszy i wybranie opcji Wyświetl źródło strony pokaże surowy kod HTML witryny. Pamiętaj, że to nie to samo co DOM. Podczas gdy DOM można zmieniać, źródło HTML jest całkowicie statyczne. Wszelkie zmiany wprowadzane w JavaScript nie wpłyną na ten plik HTML. Cały węzeł <html> jest owinięty w zewnętrzną warstwę zwaną obiektem document.
Następnie zobaczymy, jak można manipulować stroną internetową i jej funkcjami za pomocą jQuery. Zanim jednak to zrobisz, musisz upewnić się, że strona jest gotowa.
Wpisz poniższy kod po utworzeniu pliku script.js w katalogu js/ :
|
1 2 3 4 5 |
$(document).ready(function() { // tutaj znajdzie się cały niestandardowy kod jQuery }); |
Teraz każdy napisany kod będzie opakowany w ten kod. jQuery wykryje gotowość kodu. Kod wewnątrz tej funkcji zostanie uruchomiony dopiero wtedy, gdy DOM będzie gotowy.
Powrócimy do skryptu „Hello, World!”, o którym mówiliśmy na początku samouczka. Załóżmy, że chcemy zainicjować ten skrypt. Aby użyć jQuery do wypisania tego tekstu w przeglądarce, musimy zastosować identyfikator (ID) demo do pustego akapitu blokowego w ten sposób:
|
1 2 3 4 5 6 |
... <body> <p id="demo"></p> ... |
Aby wywołać jQuery, musimy użyć symbolu $ . Możesz stosować składnię i metody CSS, aby uzyskać dostęp do DOM za pomocą jQuery. Prosty przykład wygląda następująco:
|
1 |
$("selektor").metoda(); |
To jest format, którego będziesz używać z jQuery. Wiemy już, że symbol # reprezentuje ID w CSS. Dlatego możesz uzyskać dostęp do ID demo za pomocą selektora #demo.html() . Ta metoda pozwoli Ci zmienić kod HTML znajdujący się w elemencie.
Poniższy kod pokazuje umieszczenie programu „Hello, World” w bloku jQuery ready() pliku script.js:
|
1 2 3 |
$(document).ready(function() { $("#demo").html("Hello, World!"); }); |
Musisz dodać tę linię kodu do pliku script.js . Zapisz ten plik. Następnie możesz otworzyć plik index.html w przeglądarce. Powinieneś zobaczyć wynik Hello, World!. To również dobry moment, aby sprawdzić DOM dla lepszego zrozumienia. Kliknij prawym przyciskiem myszy na tekst „Hello, World!”. Wybierz Zbadaj element. DOM pokaże <p id="demo">Hello, World!</p>. Z drugiej strony, kliknięcie Pokaż źródło strony pokaże tylko czysty HTML. W tym przypadku będzie to <p id="demo"></p>.
Czym są selektory?
Teraz przejdziemy do niektórych kluczowych funkcji w jQuery. Wśród nich są selektory. Selektory jQuery mówią programowi, z którymi elementami chcesz pracować lub które chcesz „wybrać”. Są one bardzo podobne do selektorów, których możesz używać w CSS. Oto podstawowy format dostępu do selektora w jQuery:
|
1 |
$("selector") |
Możesz używać ciągów znaków w pojedynczych lub podwójnych cudzysłowach, chociaż przewodnik po stylu jQuery preferuje ten drugi sposób. Jeśli chcesz, możesz zobaczyć pełną listę selektorów jQuery na tej oficjalnej stronie. Dla Twojej informacji, oto niektóre z najczęściej używanych selektorów:
-
$("*")
To jest selektor uniwersalny (Wildcard). Wybierze każdy element na Twojej stronie.
-
$(this)
To jest selektor bieżący (Current). Wybiera element, na którym obecnie operujesz za pomocą funkcji.
-
$("p")
To jest selektor znacznika (Tag). Wybiera każde wystąpienie znacznika <p> .
-
$(".example")
To jest selektor klasy (Class). Wybierze każdy pojedynczy element z przypisaną klasą example .
-
$("#example")
To jest selektor identyfikatora (Id). Wybiera tylko jedno wystąpienie identyfikatora example .
-
$("[type='text']")
To jest selektor atrybutu (Attribute). Wybierze dowolny element z przypisaną wartością text do atrybutu type .
-
$("p:first-of-type")
To jest selektor pseudoelementu (Pseudo Element). Pomaga wybrać pierwszy <p>.
Czym są zdarzenia?
Niektóre funkcje strony internetowej ładują się natychmiast po załadowaniu strony. Rozważmy przykład „Hello, World”. W tym przypadku moglibyśmy dodać kod bezpośrednio do źródłowego HTML. Ale co się stanie, gdy załadowanie funkcji wymaga interakcji użytkownika? Właśnie wtedy jQuery staje się przydatne.
Załóżmy, że chcemy, aby po kliknięciu przycisku przez użytkownika pojawił się tekst. Aby dodać tę funkcję, musisz dodać element <button> do pliku index.html . Ten przycisk będzie oczekiwał na „zdarzenie” kliknięcia:
|
1 2 3 4 5 6 |
... <body> <button id="trigger">Kliknij mnie</button> <p id="demo"></p> |
Każda interakcja użytkownika z przeglądarką jest uważana za zdarzenie. Interakcja może odbywać się za pomocą wskaźnika myszy lub klawiatury. W powyższym przykładzie kliknięcie przycisku jest naszym zdarzeniem. Dlatego nazywa się je zdarzeniem kliknięcia (click event).
Następnie musimy wywołać funkcję, która zawiera kod „Hello, World”. Aby to zrobić, użyjemy metody click() :
|
1 2 3 |
$(document).ready(function() { $("#trigger").click(); }); |
Jak widać, identyfikator (ID) naszego elementu <button> to trigger . Możemy go wybrać za pomocą $(“#trigger") . Celem dodania metody click() jest sprawienie, aby program nasłuchiwał zdarzenia kliknięcia. Następnie umieścimy funkcję z kodem tekstowym wewnątrz tej metody:
|
1 2 3 |
function() { $("#demo").html("Hello, World!"); } |
Nasz kod na końcu będzie wyglądał mniej więcej tak:
|
1 2 3 4 5 |
$(document).ready(function() { $("#trigger").click(function() { $("#demo").html("Hello, World!"); }); }); |
Teraz możesz zapisać plik script.js . Odśwież plik index.html w przeglądarce, aby zastosować zmiany. Po kliknięciu przycisku pojawi się wynik testu „Hello, World!”.
Istnieją również inne typy zdarzeń jQuery niż kliknięcie. Pełną listę tych metod zdarzeń można zobaczyć w tym oficjalnym dokumencie. Oto niektóre z najczęściej używanych, na które możesz się natknąć od czasu do czasu:
-
click()
Zdarzenie click wykonuje kod po pojedynczym kliknięciu myszą.
-
hover()
Zdarzenie hover wykonuje kod, gdy wskaźnik myszy najeżdża na element. Możesz również określić, czy kod jest wyzwalany przez wejście lub opuszczenie wskaźnika myszy za pomocą mouseenter() i mouseleave(), odpowiednio.
-
submit()
Przesłanie formularza wyzwala kod.
-
scroll()
Przewijanie ekranu w dół będzie zdarzeniem, które wykonuje kod.
-
keydown()
Wciśnięcie klawisza na klawiaturze spowoduje wykonanie kodu.
What are Effects?
Efekty jQuery współpracują ze zdarzeniami jQuery. Głównym celem efektów, jak sama nazwa wskazuje, jest dodanie animacji do strony. Pozwalają one manipulować elementami w celu zastosowania różnego rodzaju efektów. Efekty te mogą być wyzwalane przez określone zdarzenia.
Aby lepiej to zrozumieć, rozważmy przykład. Załóżmy, że chcemy otwierać i zamykać nakładkę popup. Jednym ze sposobów byłoby użycie dwóch różnych identyfikatorów (ID). Jeden otwierałby nakładkę, a drugi ją zamykał. Innym sposobem jest użycie klasy. Zaletą użycia klasy jest to, że ta sama funkcja jest w stanie otworzyć i zamknąć nakładkę.
Otwórz swój plik index.html. Następnie usuń znaczniki <button> i <p> z sekcji body. Teraz dodaj następujące linie kodu do HTML:
|
1 2 3 4 5 6 7 8 9 10 |
... <body> <button class="trigger">Open</button> <section class="overlay"> <button class="trigger">Close</button> </section> ... |
Przyjrzyjmy się teraz naszemu plikowi style.css. Tutaj naszym celem jest użycie minimalnej ilości CSS do ukrycia nakładki. W tym celu użyjemy display: none i wyśrodkujemy ją w ten sposób:
|
1 2 3 4 5 6 7 8 9 10 |
.overlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 200px; width: 200px; background: gray; } |
Następnie użyjemy metody toggle(). Metoda ta pozwoli nam przełączać właściwość display między none a block. Dzięki temu nakładka będzie ukrywana i pokazywana przy każdym kliknięciu. Dodaj ten kod do pliku script.js:
|
1 2 3 4 5 |
$(document).ready(function() { $(".trigger").click(function() { $(".overlay").toggle(); }); }); |
Na koniec odśwież index.html, aby zastosować zmiany. Teraz będziesz mieć możliwość przełączania widoczności okna modalnego. Wszystko, co musisz zrobić, to kliknąć przyciski. Istnieją inne efekty jQuery, których możesz użyć w połączeniu z tym. Na przykład możesz zmienić zwykłe toggle() na slideToggle() lub fadeToggle().
Poniżej znajduje się kilka powszechnie używanych metod efektów w jQuery:
-
toggle()
Ta metoda pozwala na zmianę widoczności elementu. Powiązane z nią efekty jednostronne to show() i hide().
-
fadeToggle()
Ta metoda pozwala na przełączanie widoczności i przezroczystości elementu za pomocą animacji. Efektami jednostronnymi w tym przypadku są fadeIn() i fadeOut().
-
slideToggle()
Ta metoda pozwala na użycie efektów przesuwania do przełączania widoczności elementu. Efektami jednostronnymi w tym przypadku są slideUp() i slideDown().
-
animate()
Ta metoda efektu pozwala na wykonywanie niestandardowych efektów animacji. Używa właściwości CSS danego elementu.
Podsumowanie
Mamy nadzieję, że ten samouczek okazał się pomocny w dokładnym wprowadzeniu do jQuery. Jest to niezwykle przydatne narzędzie, które znacznie ułatwia tworzenie stron internetowych i pisanie kodu. Jest to szczególnie ważne, jeśli jesteś stosunkowo nowym użytkownikiem w świecie programowania.
Przeanalizowaliśmy różne elementy składające się na podstawy jQuery. Dowiedzieliśmy się również, jak wybierać i modyfikować te elementy oraz jak dobrze wykorzystywać zdarzenia i efekty. Opanowanie narzędzi takich jak jQuery może pomóc w tworzeniu stron internetowych pełnych interaktywnych funkcji, które zapewniają angażujące wrażenia użytkownika.
Sprawdź niektóre zasoby z naszego bloga które pomogą Ci podczas pracy z JavaScript:
- Przewodnik po dodawaniu JavaScript do HTML
- Praca z JavaScript: Jak działają klasy
- Praca z JavaScript: Jak działają prototypy i dziedziczenie
Miłego kodowania!
Komentarze
Brak komentarzy. Bądź pierwszy.