Innledning
HTML, CSS og JavaScript er de tre grunnleggende språk på nettet. Vi strukturen våre nettsteder med HTML, style dem med CSS, og legge til interaktiv funksjonalitet med JavaScript. Faktisk, de fleste animasjoner og enhver handling som skjer som et resultat av en bruker klikker, svever, eller rulle er konstruert med JavaScript.
jQuery er «Skrive Mindre, Gjør Mer» JavaScript-bibliotek. Det er ikke et programmeringsspråk, men snarere et verktøy som brukes til å lage vanlig å skrive JavaScript-oppgaver mer konsis., jQuery har den ekstra fordelen av å være cross-browser kompatibel, noe som betyr at du kan være sikker på resultatet av koden vil gjøre som forutsatt i hvilken som helst moderne nettleser.
Ved å sammenligne en enkel «Hei, Verden!»programmet i både JavaScript og jQuery, kan vi se forskjellen på hvordan de er begge skrevet.
document.getElementById("demo").innerHTML = "Hello, World!";$("#demo").html("Hello, World!");Denne korte eksemplet viser hvordan jQuery kan oppnå det samme resultatet som vanlig JavaScript i en konsis måte.,
Mål
Denne håndboken forutsetter ingen forkunnskaper av jQuery, og vil dekke følgende emner:
- Hvordan å installere jQuery i et web-prosjekt.
- definisjoner av viktige web-utvikling begreper som API, DOM, og CDN.
- Vanlige jQuery-velgere, hendelser og effekter.
- Eksempler for å teste konsepter lært gjennom hele artikkelen.
Forutsetninger
Før du begynner denne veiledningen du trenger følgende:
- En grunnleggende kunnskap om HTML og CSS., Du burde allerede vet hvordan å sette opp en enkel nettside, og har en forståelse av CSS-velgere, for eksempel id-ene, klasser og pseudo-elementer.
- En forståelse av de grunnleggende programmering. Mens det er mulig å begynne å skrive jQuery uten et avansert kunnskap om JavaScript, kjennskap til begrepene variabler og datatyper, så vel som matematikk og logikk vil bidra betydelig.
Sette Opp jQuery
jQuery er en JavaScript-fil som du vil lenke til i HTML-koden. Det er to måter å inkludere jQuery i et prosjekt:
- Last ned en lokal kopi.,
- Lenke til en fil via Content Delivery Network (CDN).
Merk: Et Innhold Levering Nettverk (CDN) er et system av flere servere som leverer web-innhold til en bruker basert på geografisk plassering. Når du kobler til en vert for jQuery-fil via CDN, vil det potensielt kan komme raskere og mer effektivt for brukeren enn hvis du vert det på din egen server.
Vi vil bruke den CDN å referere til jQuery i våre eksempler. Du kan finne den nyeste versjonen av jQuery i Google er Vert for Bibliotekene., Hvis du i stedet ønsker å laste den ned, kan du få en kopi av jQuery fra den offisielle nettsiden.
Vi vil begynne denne øvelsen ved å lage en liten web-prosjektet. Det vil bestå av style.css i css/ – katalogen scripts.js i js/ – katalogen, og en main index.html i roten av prosjektet.
project/├── css/| └── style.css├── js/| └── scripts.js└── index.htmlfor Å begynne, må en HTML-skjelett og lagre 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 rett før den avsluttende </body> – tag-en, etterfulgt av dine egne JavaScript-fil scripts.js.
JavaScript-fil (scripts.js) må være inkludert under jQuery bibliotek i dokumentet eller det vil ikke fungere.
Merk: Hvis du har lastet ned en lokal kopi av jQuery, lagre det i din js/ mappe og lenke til den på js/jquery.min.js.,
På dette punktet, jQuery bibliotek er nå blir lagt inn på nettstedet ditt, og du har full tilgang til jQuery API.
Merk: En Application Programming Interface (API) er et grensesnitt som gjør at programmer for å samhandle med hverandre. I dette tilfellet, API for jQuery inneholder all den informasjon og dokumentasjon som er nødvendig for å få tilgang til jQuery.
ved Hjelp av jQuery
I sin kjerne, jQuery brukes til å koble med HTML-elementer i nettleseren via DOM.,
Document Object Model (DOM) er metoden som JavaScript (og jQuery) arbeide med HTML-kode i en nettleser. For å vise nøyaktig hva DOM er, i webleseren, klikker du på gjeldende webside, velger du Inspisere. Dette vil åpne opp utviklerverktøy. HTML-koden du ser her er DOM.
Hver HTML-element er ansett som en node i DOM – et objekt som JavaScript kan berøre. Disse objektene er ordnet i en trestruktur, med <html> å være nærmere roten, og hver nestet element blir en gren videre langs treet., JavaScript kan legge til, fjerne og endre noen av disse elementene.
Hvis du høyre klikker på nettstedet igjen, og klikk på Vis Kilde, vil du se den rå HTML-utdata av nettstedet. Det er enkelt på første til å forvirre DOM med HTML-kilden, men de er forskjellige – siden source er akkurat hva som er skrevet i HTML-filen. Den er statisk og vil ikke endre seg, og vil ikke bli påvirket av JavaScript. DOM er dynamisk, og kan endre seg.
Det ytterste laget av DOM, laget som omslutter hele <html> node, er document object., For å begynne å manipulere side med jQuery, vi trenger for å sikre at dokumentet er «klar» først.
Opprett filen scripts.js i js/ mappe, og skriv inn følgende kode:
$(document).ready(function() { // all custom jQuery will go here});Alle jQuery koden du skriver, vil bli pakket inn i koden ovenfor. jQuery vil oppdage denne tilstanden av beredskap, slik at kode som er inkludert i denne funksjonen vil bare kjøre når DOM er klar for JavaScript-kode for å utføre., Selv om det i noen tilfeller vil ikke JavaScript bli lagt til elementer som er gjort, inkludert denne blokken er ansett for å være av beste praksis.
I innledningen av denne artikkelen, så du en enkel «Hei, Verden!»skript. For å starte denne skript og skrive ut teksten til leseren med jQuery, først vil vi opprette en tom blokk-nivå avsnitt elementet med ID demo brukes til det.
...<body><p></p>...jQuery er kalt med, og representert ved dollartegn ($)., Vi tilgang DOM med jQuery bruke det meste CSS-syntaks, og gjelder en handling med en metode. En grunnleggende jQuery eksempel følger dette formatet.
$("selector").method();Siden en ID er representert ved en hash-symbolet (#) i CSS, vil vi få tilgang til demo-ID med selector #demo. html() er en metode som endrer HTML innen et element.
Vi er nå kommer til å sette våre egne «Hallo, Verden!»program inne i jQuery ready() wrapper., Legg til denne linjen i din scripts.js – filen i eksisterende funksjoner:
$(document).ready(function() { $("#demo").html("Hello, World!");});Når du har lagret filen, kan du åpne din index.html – filen i nettleseren din. Hvis alt fungerte på riktig måte, vil du se resultatet Hello, World!.
– Velgere
– Velgere er hvordan vi forteller jQuery hvilke elementer vi ønsker å arbeide på. De fleste jQuery-velgere er de samme som det du er kjent med i CSS, med et par jQuery-spesifikke tillegg., Du kan se den fulle listen av jQuery velgere på deres offisielle dokumentasjon sider.
for Å få tilgang til en velger, kan du bruke jQuery symbol $, etterfulgt av parenteser ().
$("selector")Double-sitert strenger er foretrukket av jQuery style guide, selv om enkelt-sitert strenger er ofte brukt som godt.
Nedenfor er en kort oversikt over noen av de mest brukte velgere.,
Vanligvis, klasser og id-er er hva du vil støte på den mest — klasser når du ønsker å velge flere elementer, og id når du ønsker å velge bare én.
jQuery Hendelser
I «Hallo, Verden!»eksempel koden løp så snart siden er lastet, og dokumentet var klar, og derfor kreves ingen brukermedvirkning. I dette tilfellet, kunne vi ha skrevet teksten direkte inn i HTML-uten å bry seg med jQuery. Vi vil imidlertid behovet for å benytte jQuery hvis vi ønsker å gjøre teksten på siden ved å klikke på en knapp.,
gå Tilbake til din index.html fil og legge til en <button> – element. Vi vil bruke denne knappen for å lytte til våre klikk på arrangementet.
...<body><button>Click me</button><p></p>Vi vil bruke click() metode for å kalle en funksjon som inneholder vår «Hallo, Verden!” kode.
$(document).ready(function() { $("#trigger").click();});function() { $("#demo").html("Hello, World!");}Her er den endelige koden.
$(document).ready(function() { $("#trigger").click(function() { $("#demo").html("Hello, World!"); });});Lagre scripts.js filen, og oppdater index.html i nettleseren., Nå når du klikker på knappen, «Hallo, Verden!»tekst vil vises.
En hendelse som helst brukeren samhandler med nettleseren. Vanligvis er dette gjort med mus eller tastatur. Eksempelet vi nettopp opprettet brukt et klikk event. Fra den offisielle jQuery dokumentasjon, du kan se en komplett liste av jQuery event metoder. Nedenfor er en kort oversikt over noen av de mest brukte event metoder.
for Å lage bilder animere eller fade inn som en bruker ruller nedover skjermen, bruk scroll() metode., For å avslutte en meny ved å bruke ESC – tasten, kan du bruke keydown() metode. For å gjøre en dropdown trekkspill-menyen, bruk click() metode.
Forstå hendelser er avgjørende for å skape dynamisk nettsted innhold med jQuery.
jQuery Effekter
jQuery effekter arbeide hånd-i-hånd med hendelser ved at du kan legge til animasjoner og på annen måte manipulere elementer på siden.
Vi vil gjøre et eksempel der vi åpne og lukke en dialogboks overlegg., Mens vi kan bruke to-Id – en for å åpne overlay og en annen for å lukke det – vi skal i stedet bruke en klasse for å åpne og lukke overlegg med samme funksjon.
Slett gjeldende <button>og <p> – tager fra i kroppen din. index.html – filen, og legg til følgende i ditt HTML dokument:
...<body><button class="trigger">Open</button><section class="overlay"> <button class="trigger">Close</button></section>...I vår style.css fil, vil vi bruke en minimal mengde av CSS for å skjule overlay med display: none og senter på det på skjermen.,
.overlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 200px; width: 200px; background: gray;}Tilbake scripts.js fil, og vi kommer til å bruke toggle() metode, som vil veksle CSS display eiendom mellom none og block, skjule og vise overlegg når den klikkes.
$(document).ready(function() { $(".trigger").click(function() { $(".overlay").toggle(); });});Oppdater index.html. Du vil nå være i stand til å slå synligheten av modale ved å klikke på knappene., Du kan endre toggle() til fadeToggle() eller slideToggle() for å se noen andre som er innebygd i jQuery effekter.
Nedenfor er en kort oversikt over noen av de mest brukte effekt metoder.
-
toggle()– Bytte: slår synlighet av et element, eller elementer.show()oghide()er i slekt én vei effekter. -
fadeToggle()– Fade Veksle: slår synlighet og animerer tettheten av et element, eller elementer.,fadeIn()ogfadeOut()er i slekt én vei effekter. -
slideToggle()– Dra Veksler veksler synlighet av et element, eller elementer med en glidende effekt.slideDown()ogslideUp()er i slekt én vei effekter. -
animate()– Animere utfører egendefinert animasjon effekter på CSS-egenskapen for et element.,
Vi bruke jQuery hendelser for å lytte til en samhandling mellom brukere som klikker på en knapp, og vi bruker jQuery effekter for å ytterligere manipulere elementer når handlingen finner sted.
Konklusjon
I denne håndboken, vi lærte hvordan å velge og manipulere elementer med jQuery, og hvordan hendelser og effekter jobbe sammen for å lage en interaktiv web-opplevelse for brukeren.
Fra her, bør du ha en dypere forståelse av egenskapene til jQuery, og være på vei til å skrive egen kode.