introduktion
HTML, CSS och JavaScript är de tre grundläggande språken på webben. Vi strukturera våra webbplatser med HTML, stil dem med CSS, och lägga till interaktiva funktioner med JavaScript. Faktum är att de flesta animationer och alla åtgärder som händer till följd av att en användare klickar, svävar eller rullar är konstruerade med JavaScript.
jQuery är ”Skriv mindre, gör mer” JavaScript-bibliotek. Det är inte ett programmeringsspråk, utan snarare ett verktyg som används för att göra skriva vanliga JavaScript uppgifter mer kortfattad., jQuery har den extra fördelen av att vara cross-browser kompatibel, vilket innebär att du kan vara säker på att produktionen av din kod kommer att göra som avsett i alla moderna webbläsare.
genom att jämföra en enkel ” Hej, värld!”program i både JavaScript och jQuery kan vi se skillnaden på hur de båda är skrivna.
document.getElementById("demo").innerHTML = "Hello, World!";$("#demo").html("Hello, World!");det här korta exemplet visar hur jQuery kan uppnå samma slutresultat som vanligt JavaScript på ett kortfattat sätt.,
mål
den här guiden förutsätter ingen tidigare kunskap om jQuery och kommer att omfatta följande ämnen:
- så här installerar du jQuery i ett webbprojekt.
- definitionerna av viktiga webbutvecklingskoncept som API, DOM och CDN.
- vanliga jQuery selektorer, händelser och effekter.
- exempel för att testa begreppen lärt sig i hela artikeln.
förutsättningar
innan du börjar den här guiden behöver du följande:
- grundläggande kunskaper om HTML och CSS., Du borde redan veta hur man ställer in en enkel webbplats och har en förståelse för CSS-väljare som ID, klasser och pseudoelement.
- en förståelse för grunderna i programmering. Även om det är möjligt att börja skriva jQuery utan en avancerad kunskap om JavaScript, förtrogenhet med begreppen variabler och datatyper samt matematik och logik kommer att bidra avsevärt.
ställa in jQuery
jQuery är en JavaScript-fil som du kommer att länka till i din HTML. Det finns två sätt att inkludera jQuery i ett projekt:
- hämta en lokal kopia.,
- Länk till en fil via Content Delivery Network (CDN).
Obs! ett Content Delivery Network (CDN) är ett system med flera servrar som levererar webbinnehåll till en användare baserat på geografisk plats. När du länkar till en värd jQuery fil via CDN, det kommer potentiellt komma snabbare och mer effektivt till användaren än om du värd det på din egen server.
vi använder CDN för att referera till jQuery i våra exempel. Du hittar den senaste versionen av jQuery i Googles Värdbibliotek., Om du istället vill ladda ner det kan du få en kopia av jQuery från den officiella hemsidan.
Vi kommer att börja denna övning genom att skapa ett litet webbprojekt. Det kommer att bestå avstyle.css i katalogencss/,scripts.js i katalogenjs/ och en huvudkatalogenindex.html I projektets rot.
project/├── css/| └── style.css├── js/| └── scripts.js└── index.htmlför att börja, skapa ett HTML-skelett och spara det somindex.html.
<!doctype html><html lang="en"><head> <title>jQuery Demo</title> <link rel="stylesheet" href="css/style.css"></head><body></body></html>länk till jQuery CDN strax före stängningen</body> taggen, följt av din egen JavaScript-fil,scripts.js.
din JavaScript-fil (scripts.js) måste inkluderas under jQuery-biblioteket i dokumentet eller det fungerar inte.
Obs: Om du hämtade en lokal kopia av jQuery, spara den i din js/ mapp och länka till den på js/jquery.min.js.,
vid denna tidpunkt laddas jQuery-biblioteket nu in på din webbplats, och du har full tillgång till jQuery API.
Obs! ett API (Application Programming Interface) är ett gränssnitt som gör det möjligt för program att interagera med varandra. I det här fallet innehåller API för jQuery all information och dokumentation som behövs för att komma åt jQuery.
använda jQuery
i sin kärna används jQuery för att ansluta med HTML-element i webbläsaren via DOM.,
Document Object Model (DOM) är den metod med vilken JavaScript (och jQuery) interagerar med HTML i en webbläsare. För att se exakt vad DOM är, i din webbläsare, högerklicka på den aktuella webbsidan välj Inspektera. Detta kommer att öppna upp utvecklingsverktyg. HTML-koden du ser här är DOM.
varje HTML – element anses vara en nod i DOM-ett objekt som JavaScript kan röra. Dessa objekt är ordnade i en trädstruktur, med <html> att vara närmare roten, och varje kapslade element är en gren längre längs trädet., JavaScript kan lägga till, ta bort och ändra något av dessa element.
om du högerklickar på webbplatsen igen och klickar på Visa sidkälla ser du webbplatsens råa HTML-utdata. Det är lätt att först förvirra DOM med HTML-källan, men de är olika-sidkällan är exakt vad som skrivs i HTML-filen. Det är statiskt och kommer inte att förändras, och kommer inte att påverkas av JavaScript. DOM är dynamisk och kan ändras.
det yttersta lagret av DOM, lagret som sveper hela<html> noden, är dokumentobjektet., För att börja manipulera sidan med jQuery måste vi se till att dokumentet är” klart ” först.
skapa filen scripts.js i katalogen js/ och skriv följande kod:
$(document).ready(function() { // all custom jQuery will go here});all jQuery-kod som du skriver kommer att vikas in i ovanstående kod. jQuery kommer att upptäcka detta tillstånd av beredskap så att koden som ingår i denna funktion kommer endast att köras när DOM är redo för JavaScript-kod att köra., Även om JavaScript i vissa fall inte kommer att laddas förrän element återges, inklusive detta block anses vara bästa praxis.
i introduktionen av den här artikeln såg du en enkel ” Hej, värld!” script. För att initiera detta skript och skriva ut text till webbläsaren med jQuery skapar vi först ett tomt styckeelement på blocknivå med ID demo applicerat på det.
...<body><p></p>...jQuery anropas med och representeras av dollartecknet ($)., Vi kommer åt DOM med jQuery med mestadels CSS syntax, och tillämpa en åtgärd med en metod. En grundläggande jQuery exempel följer detta format.
$("selector").method();eftersom ett ID representeras av en hash-symbol (#) I CSS kommer vi att få tillgång till demo-ID med väljaren#demo. html() är en metod som ändrar HTML inom ett element.
Vi kommer nu att sätta vår anpassade ” Hej, värld!”program inuti jQuery ready() wrapper., Lägg till den här raden i filenscripts.js I den befintliga funktionen:
$(document).ready(function() { $("#demo").html("Hello, World!");});När du har sparat filen kan du öppna filen index.html i webbläsaren. Om allt fungerade korrekt ser du utgången Hello, World!.
väljare
väljare är hur vi berättar för jQuery vilka element vi vill arbeta med. De flesta jQuery selektorer är desamma som vad du är bekant med i CSS, med några jQuery-specifika tillägg., Du kan visa hela listan över jQuery-väljare på deras officiella dokumentationssidor.
för att komma åt en väljare, använd jQuery-symbolen $, följt av parenteser ().
$("selector")dubbla citatsträngar föredras av jQuery style guide, även om enstaka strängar ofta används också.
Nedan följer en kort översikt över några av de vanligaste väljarna.,
i allmänhet är klasser och ID vad du kommer att stöta på mest — klasser när du vill välja flera element och ID när du bara vill välja en.
jQuery händelser
i ”Hej, världen!”till exempel sprang koden så snart sidan laddades och dokumentet var klart och krävde därför ingen användarinteraktion. I det här fallet kunde vi ha skrivit texten direkt i HTML utan att störa jQuery. Vi måste dock använda jQuery om vi vill få text att visas på sidan med ett klick på en knapp.,
återgå tillindex.html – filen och Lägg till ett<button> – element. Vi kommer att använda den här knappen för att lyssna på vår klickhändelse.
...<body><button>Click me</button><p></p>vi kommer att använda metoden click() för att anropa en funktion som innehåller vår ”Hej, värld!” kod.
$(document).ready(function() { $("#trigger").click();});function() { $("#demo").html("Hello, World!");}här är den slutliga koden.
$(document).ready(function() { $("#trigger").click(function() { $("#demo").html("Hello, World!"); });});spara filenscripts.jsoch uppdateraindex.html i webbläsaren., Nu när du klickar på knappen, Den ” Hej, världen!”text kommer att visas.
en händelse är när som helst användaren interagerar med webbläsaren. Vanligtvis görs detta med musen eller tangentbordet. Exemplet vi just skapade använde en klickhändelse. Från den officiella jQuery-dokumentationen kan du visa en fullständig lista över jQuery-händelsemetoder. Nedan följer en kort översikt över några av de vanligaste händelsemetoderna.
använd scroll() för att göra bilder animera eller tona in som en användare rullar ner på skärmen., För att avsluta en meny medESC – tangenten, användkeydown() – metoden. För att göra en rullgardinsmeny, använd metodenclick().
det är viktigt att förstå händelser för att skapa dynamiskt webbplatsinnehåll med jQuery.
jquery Effects
jquery effects arbetar hand i hand med händelser genom att låta dig lägga till animeringar och på annat sätt manipulera element på sidan.
Vi kommer att göra ett exempel där vi öppnar och stänger ett popup-överlägg., Medan vi kunde använda två ID – en för att öppna överlägget och en annan för att stänga det – använder vi istället en klass för att öppna och stänga överlägget med samma funktion.
Ta bort nuvarande<button>och<p> taggar inifrån kroppen av filenindex.html, och Lägg till följande i HTML-dokumentet:
...<body><button class="trigger">Open</button><section class="overlay"> <button class="trigger">Close</button></section>...i vår style.css fil, kommer vi att använda en minimal mängd CSS för att dölja overlay med display: none och centrera den på skärmen.,
.overlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 200px; width: 200px; background: gray;}tillbaka i filen scripts.js kommer vi att använda metoden toggle(), som växlar egenskapen CSS display mellan egenskapen none och block, dölja och visa överlagring när du klickar.
$(document).ready(function() { $(".trigger").click(function() { $(".overlay").toggle(); });});uppdatera index.html. Du kommer nu att kunna växla synligheten av Modalen genom att klicka på knapparna., Du kan ändra toggle() till fadeToggle() eller slideToggle() för att se några andra inbyggda jQuery-effekter.
Nedan följer en kort översikt över några av de vanligaste effektmetoderna.
-
toggle()– Toggle: byter synlighet för ett eller flera element.show()ochhide()är de relaterade envägseffekterna. -
fadeToggle()– Fade Toggle: byter synlighet och animerar opaciteten hos ett element eller element.,fadeIn()ochfadeOut()är de relaterade envägseffekterna. -
slideToggle()– Slide växla växlar synligheten för ett element eller element med en glidande effekt.slideDown()ochslideUp()är de relaterade envägseffekterna. -
animate()– Animate utför anpassade animeringseffekter på css-egenskapen för ett element.,
vi använder jQuery-händelser för att lyssna på en användarinteraktion, till exempel ett klick på en knapp, och vi använder jQuery-effekter för att ytterligare manipulera element när den åtgärden äger rum.
slutsats
i den här guiden lärde vi oss hur man väljer och manipulerar element med jQuery och hur händelser och effekter fungerar tillsammans för att skapa en interaktiv webbupplevelse för användaren.
härifrån bör du ha en djupare förståelse för jQuery förmåga och vara på väg att skriva din egen kod.