wprowadzenie
HTML, CSS i JavaScript to trzy podstawowe języki w sieci. Tworzymy strony internetowe za pomocą HTML, stylizujemy je za pomocą CSS i dodajemy interaktywną funkcjonalność za pomocą JavaScript. W rzeczywistości większość animacji i każda akcja, która dzieje się w wyniku kliknięcia przez użytkownika, najechania kursorem lub przewijania, są zbudowane z JavaScript.
jQuery jest biblioteką JavaScript „Write Less, Do More”. Nie jest to język programowania, ale raczej narzędzie używane do pisania wspólnych zadań JavaScript bardziej zwięzłe., jQuery ma dodatkową zaletę, że jest kompatybilny z wieloma przeglądarkami, co oznacza, że możesz być pewien, że wynik twojego kodu będzie renderowany zgodnie z przeznaczeniem w każdej nowoczesnej przeglądarce.
porównując proste „Hello, World!”program zarówno w JavaScript, jak i jQuery, widzimy różnicę w sposobie ich napisania.
document.getElementById("demo").innerHTML = "Hello, World!";$("#demo").html("Hello, World!");Ten krótki przykład pokazuje, w jaki sposób jQuery może osiągnąć ten sam efekt końcowy, co zwykły JavaScript w zwięzły sposób.,
cele
Ten poradnik nie zakłada wcześniejszej znajomości jQuery i obejmie następujące tematy:
- Jak zainstalować jQuery w projekcie www.
- definicje ważnych pojęć tworzenia stron internetowych, takich jak API, DOM i CDN.
- wspólne selektory jQuery, zdarzenia i efekty.
- przykłady do przetestowania pojęć poznanych w całym artykule.
wymagania wstępne
zanim zaczniesz ten poradnik, musisz:
- podstawowa znajomość HTML i CSS., Powinieneś już wiedzieć, jak skonfigurować prostą stronę internetową, i mieć zrozumienie selektorów CSS, takich jak identyfikatory, klasy i pseudo elementy.
- Zrozumienie podstaw programowania. Chociaż możliwe jest rozpoczęcie pisania jQuery bez zaawansowanej znajomości JavaScript, znajomość pojęć zmiennych i typów danych, a także matematyki i logiki znacznie pomoże.
Konfiguracja jQuery
jQuery jest plikiem JavaScript, do którego będziesz linkował w swoim HTML. Istnieją dwa sposoby włączenia jQuery do projektu:
- Pobierz lokalną kopię.,
- łącze do pliku za pośrednictwem sieci dostarczania treści (CDN).
Uwaga: sieć dostarczania treści (CDN) to system wielu serwerów, które dostarczają treści internetowe do użytkownika w oparciu o lokalizację geograficzną. Gdy połączysz się z hostowanym plikiem jQuery za pośrednictwem CDN, potencjalnie dotrze on do użytkownika szybciej i sprawniej niż w przypadku hostowania go na własnym serwerze.
będziemy używać CDN do odwoływania się do jQuery w naszych przykładach. Najnowszą wersję jQuery znajdziesz w hostowanych bibliotekach Google., Jeśli zamiast tego chcesz go pobrać, możesz uzyskać kopię jQuery z oficjalnej strony internetowej.
zaczniemy to ćwiczenie od stworzenia małego projektu www. Składa się z style.css w css/ katalogu, scripts.js w js/ katalogu i głównego index.html w korzeniu projektu.
project/├── css/| └── style.css├── js/| └── scripts.js└── index.htmlaby rozpocząć, Utwórz szkielet HTML i zapisz go jakoindex.html.
<!doctype html><html lang="en"><head> <title>jQuery Demo</title> <link rel="stylesheet" href="css/style.css"></head><body></body></html>Link do jQuery CDN tuż przed zamknięciem </body> tag, a następnie własny plik JavaScript, scripts.js.
Twój plik JavaScript (scripts.js) musi być umieszczony pod biblioteką jQuery w dokumencie, inaczej nie będzie działać.
Uwaga: jeśli pobrałeś lokalną kopię jQuery, zapisz ją w folderzejs/ I link do niej pod adresemjs/jquery.min.js.,
w tym momencie biblioteka jQuery jest ładowana do twojej witryny i masz pełny dostęp do jQuery API.
Uwaga: interfejs programowania aplikacji (API) to interfejs, który pozwala programom na interakcję ze sobą. W takim przypadku API dla jQuery zawiera wszystkie informacje i dokumentację potrzebne do uzyskania dostępu do jQuery.
używając jQuery
, jQuery jest używany do łączenia się z elementami HTML w przeglądarce poprzez DOM.,
Document Object Model (DOM) jest metodą, za pomocą której JavaScript (i jQuery) oddziałują z HTML w przeglądarce. Aby dokładnie zobaczyć, czym jest DOM, w przeglądarce internetowej kliknij prawym przyciskiem myszy na bieżącej stronie internetowej wybierz opcję Inspect. Otworzy to narzędzia programistyczne. Kod HTML, który tutaj widzisz, to DOM.
każdy element HTML jest uważany za węzeł w DOM – obiekt, którego JavaScript może dotknąć. Obiekty te są rozmieszczone w strukturze drzewa, przy czym <html> są bliżej korzenia, a każdy zagnieżdżony element jest gałęzią dalej wzdłuż drzewa., JavaScript może dodawać, usuwać i zmieniać dowolny z tych elementów.
Jeśli ponownie klikniesz prawym przyciskiem myszy na stronie i klikniesz Wyświetl źródło strony, zobaczysz surowy wynik HTML witryny. Na początku łatwo jest pomylić DOM ze źródłem HTML, ale są one inne – źródło strony jest dokładnie tym, co jest napisane w pliku HTML. Jest statyczny i nie zmieni się, i nie będzie miał wpływu na JavaScript. DOM jest dynamiczny i może się zmieniać.
najbardziej zewnętrzna warstwa DOM, warstwa, która otacza cały węzeł<html>, jest obiektem document., Aby zacząć manipulować stroną za pomocą jQuery, musimy najpierw upewnić się, że dokument jest „gotowy”.
Utwórz plikscripts.js w katalogujs/ I wpisz następujący kod:
$(document).ready(function() { // all custom jQuery will go here});cały kod jQuery zostanie zapakowany w powyższy kod. jQuery wykryje ten stan gotowości tak, że kod zawarty w tej funkcji będzie uruchamiany tylko wtedy, gdy DOM jest gotowy do wykonania kodu JavaScript., Nawet jeśli w niektórych przypadkach JavaScript nie zostanie załadowany do czasu renderowania elementów, włączenie tego bloku jest uważane za najlepszą praktykę.
we wstępie do tego artykułu zobaczyłeś proste „Hello, World!”scenariusz. Aby zainicjować ten skrypt i wydrukować tekst do przeglądarki za pomocą jQuery, najpierw utworzymy pusty element akapitu na poziomie bloku z zastosowanym do niego identyfikatorem demo.
...<body><p></p>...jQuery jest wywoływany i reprezentowany przez znak dolara ($)., Uzyskujemy dostęp do DOM za pomocą jQuery używając głównie składni CSS, i zastosujemy akcję z metodą. Podstawowy przykład jQuery jest następujący po tym formacie.
$("selector").method();ponieważ identyfikator jest reprezentowany przez symbol hash (#) w CSS, uzyskamy dostęp do identyfikatora demo za pomocą selektora#demo. html() jest metodą, która zmienia HTML wewnątrz elementu.
mamy teraz zamiar umieścić nasz zwyczaj „Hello, World!”program wewnątrz jQuery ready() wrapper., Dodaj tę linię do pliku scripts.js w istniejącej funkcji:
$(document).ready(function() { $("#demo").html("Hello, World!");});Po zapisaniu pliku możesz otworzyć plikindex.html w swojej przeglądarce. Jeśli wszystko działało poprawnie, zobaczysz wyjście Hello, World!.
selektory
selektory to sposób w jaki mówimy jQuery, na których elementach chcemy pracować. Większość selektorów jQuery jest taka sama jak to, co znasz w CSS, z kilkoma dodatkami specyficznymi dla jQuery., Możesz wyświetlić pełną listę selektorów jQuery na ich oficjalnych stronach dokumentacji.
aby uzyskać dostęp do selektora, użyj symbolu jQuery$, a następnie nawiasów ().
$("selector")podwójnie cytowane ciągi są preferowane przez przewodnik po stylach jQuery, choć często używane są również pojedyncze cytowane ciągi.
Poniżej znajduje się krótki przegląd niektórych z najczęściej używanych selektorów.,
ogólnie rzecz biorąc, klasy i identyfikatory są tym, co napotkasz najczęściej — klasami, gdy chcesz wybrać wiele elementów, i identyfikatorami, gdy chcesz wybrać tylko jeden.
jQuery Events
w „Hello, World!”przykład: kod uruchamiany był natychmiast po załadowaniu strony i przygotowaniu dokumentu, dlatego nie wymagał interakcji z użytkownikiem. W tym przypadku mogliśmy napisać tekst bezpośrednio do HTML bez zawracania sobie głowy jQuery. Jednak będziemy musieli użyć jQuery, jeśli chcemy, aby tekst pojawiał się na stronie za pomocą kliknięcia przycisku.,
wróć do swojego plikuindex.html I Dodaj element<button>. Użyjemy tego przycisku, aby nasłuchać naszego wydarzenia kliknięcia.
...<body><button>Click me</button><p></p>użyjemy metody click() do wywołania funkcji zawierającej nasz „Hello, World!”kod.
$(document).ready(function() { $("#trigger").click();});function() { $("#demo").html("Hello, World!");}Oto ostateczny kod.
$(document).ready(function() { $("#trigger").click(function() { $("#demo").html("Hello, World!"); });});Zapisz plik scripts.js i odśwież index.html w przeglądarce., Teraz po kliknięciu przycisku, ” Hello, World!”pojawi się tekst.
zdarzenie to zawsze, gdy użytkownik wchodzi w interakcję z przeglądarką. Zwykle odbywa się to za pomocą myszy lub klawiatury. W utworzonym przez nas przykładzie wykorzystano Zdarzenie click. Z oficjalnej dokumentacji jQuery można wyświetlić pełną listę metod zdarzeń jQuery. Poniżej znajduje się krótki przegląd niektórych z najczęściej używanych metod zdarzeń.
aby animować lub blaknąć obrazy, gdy użytkownik przewija Ekran w dół, użyj metodyscroll()., Aby wyjść z menu za pomocą kluczaESC, użyj metodykeydown(). Aby utworzyć rozwijane menu, użyj metody click().
zrozumienie zdarzeń jest niezbędne do tworzenia dynamicznych treści strony internetowej za pomocą jQuery.
efekty jQuery
efekty jQuery działają ramię w ramię ze zdarzeniami, umożliwiając dodawanie animacji i innych elementów na stronie.
zrobimy przykład, w którym otwieramy i zamykamy popup overlay., Chociaż możemy użyć dwóch identyfikatorów-jednego do otwarcia nakładki, a drugiego do jej zamknięcia – zamiast tego użyjemy klasy do otwarcia i zamknięcia nakładki za pomocą tej samej funkcji.
Usuń bieżące znaczniki<button>I<p> z Treści plikuindex.html I dodaj następujące elementy do dokumentu HTML:
...<body><button class="trigger">Open</button><section class="overlay"> <button class="trigger">Close</button></section>...w naszym pliku style.css użyjemy minimalnej ilości CSS, aby ukryć overlay z display: none I wyśrodkować go na ekranie.,
.overlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 200px; width: 200px; background: gray;}z powrotem w pliku scripts.js użyjemy metody toggle(), która przełączy właściwość CSS display pomiędzy none I block, ukrywanie i wyświetlanie nakładki po kliknięciu.
Refresh index.html. Będziesz mógł teraz przełączać widoczność modalnego klikając na przyciski., Możesz zmienić toggle()na fadeToggle()lub slideToggle() aby zobaczyć kilka innych wbudowanych efektów jQuery.
Poniżej znajduje się krótki przegląd niektórych z najczęściej stosowanych metod efektów.
-
toggle()– Przełącznik: przełącza widoczność elementu lub elementów.show()Ihide()są powiązanymi efektami jednokierunkowymi. -
fadeToggle()– Fade Toggle: przełącza widoczność i animuje krycie elementu lub elementów.,fadeIn()IfadeOut()są powiązanymi efektami jednokierunkowymi. -
slideToggle()– Slide Toggle włącza widoczność elementu lub elementów z efektem przesuwania.slideDown()IslideUp()są powiązanymi efektami jednokierunkowymi. -
animate()– program Animate wykonuje własne efekty animacji na właściwościach CSS elementu.,
używamy zdarzeń jQuery do nasłuchiwania interakcji użytkownika, takich jak kliknięcie przycisku, i używamy efektów jQuery do dalszego manipulowania elementami po wykonaniu tej akcji.
podsumowanie
w tym przewodniku dowiedzieliśmy się, jak wybierać i manipulować elementami za pomocą jQuery oraz jak zdarzenia i efekty współpracują ze sobą, aby stworzyć interaktywną stronę internetową dla użytkownika.
stąd powinieneś mieć głębsze zrozumienie możliwości jQuery i być na drodze do pisania własnego kodu.