Indledning
HTML, CSS og JavaScript er de tre grundlæggende sprog på nettet. Vi strukturerer vores hjemmesider med HTML, style dem med CSS, og tilføje interaktiv funktionalitet med JavaScript. Faktisk er de fleste animationer og enhver handling, der sker som et resultat af, at en bruger klikker, svæver eller ruller, konstrueret med JavaScript.
j .uery er JavaScript-biblioteket “Skriv mindre, gør mere”. Det er ikke et programmeringssprog, men snarere et værktøj, der bruges til at gøre skrivning af almindelige JavaScript-opgaver mere kortfattede., jQuery har den ekstra fordel af at være cross-browser kompatible, hvilket betyder at du kan være sikker på produktionen af din kode vil gøre som beregnet i enhver moderne browser.
Ved at sammenligne en simpel “Hej, Verden!”program i både JavaScript og J .uery kan vi se forskellen på, hvordan de begge er skrevet.
document.getElementById("demo").innerHTML = "Hello, World!";$("#demo").html("Hello, World!");Denne korte eksempel viser, hvordan jQuery kan opnå det samme slutresultat som almindelig JavaScript i en kortfattet måde.,
Mål
Denne guide forudsætter ikke forudgående kendskab til jQuery, og vil dække følgende emner:
- Sådan installeres jQuery i et web-projekt.
- definitionerne af vigtige conceptsebudviklingskoncepter som API, DOM og CDN.
- fælles j .uery selektorer, begivenheder og effekter.
- eksempler til at teste de begreber, der læres gennem artiklen.
forudsætninger
før du begynder denne vejledning, skal du bruge følgende:
- et grundlæggende kendskab til HTML og CSS., Du skal allerede vide, hvordan du opretter et simpelt websiteebsted og har en forståelse af CSS-vælgere som id ‘ er, klasser og pseudoelementer.
- en forståelse af de grundlæggende elementer i programmeringen. Mens det er muligt at begynde at skrive j .uery uden et avanceret kendskab til JavaScript, kendskab til begreberne variabler og datatyper samt matematik og logik vil hjælpe betydeligt.
opsætning af jQuery
jQuery er et JavaScript-fil, som du vil linke til i din HTML. Der er to måder at inkludere j .uery i et projekt:
- do .nload en lokal kopi.,link til en fil via content Delivery net .ork (CDN).
Bemærk: et Content Delivery Net .ork (CDN) er et system med flere servere, der leverer webebindhold til en bruger baseret på geografisk placering. Når du linker til en hostet j .uery-fil via CDN, kommer den potentielt hurtigere og mere effektivt til brugeren, end hvis du var vært for den på din egen server.
Vi bruger CDN til at henvise til j .uery i vores eksempler. Du kan finde den nyeste version af J .uery i Googles hostede biblioteker., Hvis du i stedet ønsker at do .nloade det, kan du få en kopi af J .uery fra det officielle websiteebsted.
Vi vil begynde denne øvelse ved at oprette et lille projectebprojekt. Det vil bestå af style.css css/ bibliotek, scripts.js js/ bibliotek, og en af de vigtigste index.html i roden af projektet.
project/├── css/| └── style.css├── js/| └── scripts.js└── index.htmlfor at begynde skal du lave et HTML-skelet og gemme det som index.html.
<!doctype html><html lang="en"><head> <title>jQuery Demo</title> <link rel="stylesheet" href="css/style.css"></head><body></body></html>Link til jQuery CDN lige før det afsluttende </body> tag, efterfulgt af dine egne brugerdefinerede JavaScript-fil scripts.js.
din JavaScript-fil (scripts.js) skal inkluderes under J .uery-biblioteket i dokumentet, ellers fungerer det ikke.Bemærk: Hvis du Do .nloadede en lokal kopi af J .uery, skal du gemme den i mappen js/ og linke til den på js/jquery.min.js.,
på dette tidspunkt indlæses J .uery-biblioteket nu på dit siteebsted, og du har fuld adgang til j .uery API.bemærk: en API (Application Programming Interface) er en grænseflade, der gør det muligt for soft .areprogrammer at interagere med hinanden. I dette tilfælde, API for jQuery indeholder al den information og dokumentation, der er nødvendig for at få adgang til jQuery.
brug af J .uery
i sin kerne bruges j .uery til at oprette forbindelse til HTML-elementer i Bro .seren via DOM.,
Dokumentobjektmodellen (DOM) er den metode, hvormed JavaScript (og J .uery) interagerer med HTML ‘ en i en bro .ser. For at se nøjagtigt, hvad DOM er, skal du i din browebbro .ser højreklikke på den aktuelle selectebside vælg Undersøg. Dette åbner udviklerværktøjer. Den HTML-kode, du ser her, er DOM.
hvert HTML – element betragtes som en node i DOM-et objekt, som JavaScript kan røre ved. Disse objekter er arrangeret i en træstruktur, hvor <html> er tættere på roden, og hvert indlejret element er en gren længere langs træet., JavaScript kan tilføje, fjerne og ændre nogen af disse elementer.
Hvis du højreklikker på theebstedet igen og klikker på Vis sidekilde, vil du se den rå HTML-udgang på websiteebstedet. Det er let i starten at forveksle DOM med HTML – kilden, men de er forskellige-sidekilden er præcis, hvad der er skrevet i HTML-filen. Det er statisk og vil ikke ændre sig, og vil ikke blive påvirket af JavaScript. DOM ‘ en er dynamisk og kan ændre sig.
det yderste lag af DOM, det lag, der ombryder hele <html> node, er dokumentobjektet., For at begynde at manipulere siden med J .uery skal vi sikre, at dokumentet er “klar” først.
Opret filen scripts.js i din js/ mappe, og skriv følgende kode:
$(document).ready(function() { // all custom jQuery will go here});Al j .uery-kode, du skriver, vil blive pakket ind i ovenstående kode. j .uery registrerer denne tilstand af beredskab, så kode inkluderet i denne funktion kun kører, når DOM er klar til JavaScript-kode til at udføre., Selv hvis JavaScript i nogle tilfælde ikke indlæses, før elementer gengives, herunder denne blok anses for at være bedste praksis.
i introduktionen af denne artikel så du en simpel “Hej, Verden!” script. At indlede dette script og udskrive tekst til browseren med jQuery, først vil vi oprette en tom blok-niveau, punkt element med ID demo anvendt til det.
...<body><p></p>... j .uery kaldes med og repræsenteret af dollartegnet ($)., Vi får adgang til DOM med J .uery ved hjælp af det meste CSS syntaks, og anvende en handling med en metode. En grundlæggende J .uery eksempel følger dette format.
$("selector").method();Da en ID er repræsenteret af en hash-symbol (#) i CSS, vil vi få adgang til demo-ID med vælgeren #demo. html() er en metode, der ændrer HTML i et element.
Vi vil nu sætte vores brugerdefinerede “Hej, Verden!”program inde i j .uery ready() wrarapper., Tilføj denne linje til din scripts.js fil inden for den eksisterende funktion:
$(document).ready(function() { $("#demo").html("Hello, World!");});Når du har gemt filen, kan du åbne din index.html fil i din browser. Hvis alt fungerede korrekt, vil du se output Hello, World!.
selektorer
selektorer er, hvordan vi fortæller j .uery, hvilke elementer vi vil arbejde på. De fleste j .uery selektorer er de samme som hvad du er bekendt med i CSS, med et par J .uery-specifikke tilføjelser., Du kan se den fulde liste over j .uery selektorer på deres officielle dokumentation sider.
for At få adgang til en selector, skal du bruge jQuery symbol $, efterfulgt af parenteser ().
$("selector")Dobbeltciterede strenge foretrækkes af J .uery-stilguiden, selvom enkeltciterede strenge også ofte bruges.
nedenfor er en kort oversigt over nogle af de mest almindeligt anvendte selektorer.,
generelt er klasser og ID ‘er det, du vil støde på mest — klasser, når du vil vælge flere elementer, og ID’ er, når du kun vil vælge en.
j Eventsuery begivenheder
i “Hej, Verden!”eksempel, koden kørte, så snart siden indlæst og dokumentet var klar, og derfor kræves ingen brugerinteraktion. I dette tilfælde kunne vi have skrevet teksten direkte ind i HTML uden at genere med J .uery. Vi bliver dog nødt til at bruge j .uery, hvis vi vil få tekst til at vises på siden med et klik på en knap.,
gå tilbage til ditindex.htmlfil og tilføj et<button> element. Vi bruger denne knap til at lytte til vores klikbegivenhed.
...<body><button>Click me</button><p></p>Vi vil bruge click() metode til at kalde en funktion, der indeholder vores “Hello, World!” kode.
$(document).ready(function() { $("#trigger").click();});function() { $("#demo").html("Hello, World!");}Her er den endelige kode.
$(document).ready(function() { $("#trigger").click(function() { $("#demo").html("Hello, World!"); });});Gem scripts.js fil, og opdater index.html i browseren., Nu når du klikker på knappen, “Hej, Verden!”tekst vises.
en begivenhed er enhver tid brugeren interagerer med bro .seren. Normalt gøres dette med musen eller tastaturet. Det eksempel, vi lige har oprettet, brugte en klikbegivenhed. Fra den officielle J .uery dokumentation, kan du se en komplet liste over J .uery event metoder. Nedenfor er en kort oversigt over nogle af de mest almindeligt anvendte begivenhedsmetoder.
for at få billeder til at animere eller falme ind, når en bruger ruller ned ad skærmen, skal du bruge scroll() – metoden., Hvis du vil forlade en menu ved hjælp af ESC – tasten, skal du bruge keydown() – metoden. For at lave en dropdo .n-harmonikemenu skal du bruge click() – metoden.forståelse af begivenheder er afgørende for at skabe dynamisk websiteebstedsindhold med J .uery.
jQuery Effekter
jQuery effekter til at arbejde hånd i hånd med begivenheder, som giver dig mulighed for at tilføje animationer og på anden måde manipulere elementer på siden.
Vi vil lave et eksempel, hvor vi åbner og lukker et popup-overlay., Mens vi kunne bruge to ID ‘ er – en til at åbne overlayet og en anden til at lukke det-bruger vi i stedet en klasse til at åbne og lukke overlayet med den samme funktion.
Slet den aktuelle <button>og <p> tags fra i din index.html fil, skal du tilføje følgende til din HTML-dokument:
...<body><button class="trigger">Open</button><section class="overlay"> <button class="trigger">Close</button></section>...I vores style.css – filen, vil vi bruge en minimal mængde af CSS til at skjule overlay med display: none og centrum på det på skærmen.,
.overlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 200px; width: 200px; background: gray;}Tilbage scripts.js fil, vi kommer til at bruge toggle() metode, der vil skifte CSS display ejendom mellem none og block, skjule og vise de overlay, når der klikkes.
$(document).ready(function() { $(".trigger").click(function() { $(".overlay").toggle(); });});Opdater index.html. Du vil nu være i stand til at skifte synligheden af Modalen ved at klikke på knapperne., Du kan ændre toggle() til fadeToggle() eller slideToggle() at se et par andre indbygget i jQuery effekter.
nedenfor er en kort oversigt over nogle af de mest almindeligt anvendte effektmetoder.
-
toggle()– Skift: skifter synligheden af et element eller elementer.show()oghide()er de relaterede envejseffekter. -
fadeToggle()– Fade Toggle: skifter synligheden og animerer opaciteten af et element eller elementer.,fadeIn()ogfadeOut()er de relaterede envejseffekter. -
slideToggle()– Slide Toggle skifter synligheden af et element eller elementer med en glidende effekt.slideDown()ogslideUp()er de relaterede envejseffekter. -
animate()– Animate udfører brugerdefinerede animationseffekter på CSS-egenskaben for et element.,
Vi bruger jQuery begivenheder til at lytte til en bruger interaktion, såsom at klikke på en knap, og vi bruger jQuery effekter til yderligere at manipulere elementer gang, at handlingen finder sted.
konklusion
i denne vejledning lærte vi, hvordan man vælger og manipulerer elementer med J .uery, og hvordan begivenheder og effekter arbejder sammen for at gøre en interaktiv webeboplevelse for brugeren.herfra skal du have en dybere forståelse af J .uery ‘ s evner og være på vej til at skrive din egen kode.