De första stegen med jQuery
De första stegen med jQuery
De första stegen med jQuery är en gratis lektion i jQuery Academy på CoddyKit. Detta är lektion 1 av 1. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för jQuery Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i jQuery Academy innehåller totalt 1 lektioner.
Introduktion
Hej,
För att använda jQuery-biblioteket måste vi först lägga till det i HTML-dokumentet.
I exemplet nedan har adressen till jQuery-biblioteket lagts till som värdet för src-attributet mellan head-taggarna.
Nu är jQuery-biblioteket redo att användas i vårt projekt.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.slim.js"></script>
</head>
<body>
</body>
</html>jQuery-selektorer
För att kunna arbeta med HTML-element (som vi nu kommer att kalla DOM) måste vi först välja elementet.
I jQuery används metoden $() eller jQuery() för att göra ett urval.
Metoden $() föredras av programvaruutvecklare.
Med parametern som vi tilldelar metoden bestämmer vi vilket element vi vill välja.
XPath
Uttrycket som vi skickar till metoden $ är XPath-selektorn, som vi även känner igen från CSS.
Med andra ord väljer vi HTML-element i jQuery på samma sätt som vi väljer element i CSS.
XPath-exempel
Anta att vår HTML-kod ser ut så här.
<div id="my-box" class="my-box">
<p class="my-p">
<span class="my-text">Hello jQuery</span>
</p>
</div>
Nu väljer vi HTML-element med hjälp av jQuery
// Dummy $ to demonstrate jQuery selectors in Node.js
function $(selector) {
console.log("Selector:", selector);
return [];
}
// Selects the element with the id of my-box.
$('#my-box')
// Selects the element with the my-box class.
$('.my-box')
// Selects all p elements that are descendants of the element with my-box id
$('#my-box p')
// Select the element with the .my-p class that is the child of the element with my-box class.
$('.my-box > .my-p')jQuery gjorde det möjligt för oss att skriva mer kortfattad kod
Om vi ville göra samma sak med Vanilla (ren) JavaScript skulle vi behöva skriva fler kodrader.
jQuery gjorde det möjligt för oss att skriva mer kortfattad kod med hjälp av sina egna metoder.
Varning
jQuery är bara ett bibliotek och gör webbutveckling enklare än Vanilla JavaScript.
Information
En annan fördel med jQuery är att alla moderna webbläsare stöder koden vi skriver.
Viss kod som vi skriver med VanillaJS kan orsaka bieffekter i vissa webbläsare, medan jQuery garanterar att den fungerar på samma sätt i alla webbläsare genom den abstraktion som biblioteket tillhandahåller.
jQuery befriar oss från att behöva tänka webbläsarspecifikt när vi skriver kod.
$(document).ready
Innan vi går igenom grunderna i jQuery ska vi lära oss metoden $(document).ready.
Som vi minns från HTML kan JavaScript placeras var som helst mellan head-taggen eller mellan body-taggarna i HTML.
$(document).ready 2
Anta att vi har HTML-kod som den nedan.
Webbläsaren tolkar vår kod från taggen <!DOCTYPE html> till den avslutande taggen </html>.
Satsen <script src = "https://code.jquery.com/jquery-3.5.1.slim.js"> </script> börjar hämta biblioteket via code.jquery.com.
På nästa rad väljer den DOM med jQuerys $-metod. Här finns dock ett problem. Om HTML-dokumentet inte är helt inläst när metoden $ ('# test') anropas kommer vår JavaScript-kod att misslyckas.
I detta fall används metoden $(document).ready för att säkerställa att dokumentet är helt inläst.
<div id="test">Hello Coddy</div>
<script>
$('#test').text('Hello Coddy')
</script>
$(document).ready 3
Efter definitionen ovan
behöver vi bara använda metoden $(document).ready(). Metoden väntar tills allt innehåll har lästs in och körs sedan.
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<div id="test">Hello Coddy</div>
<script>
$(document).ready(function(){
$('#test').text('Hello Coddy')
})
</script>
</body>
</html>Fråga
Kom igen, besvara frågan!
Grattis
Grattis 🎉
I det här avsnittet började vi lära oss jQuery-biblioteket och dess metod $(document).ready().
I nästa avsnitt lär vi oss jQuery-selektorer.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 22
- Lektioner
- 48
Vanliga frågor
Är lektionen ”De första stegen med jQuery” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen jQuery Academy, inklusive ”De första stegen med jQuery”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i jQuery Academy innehåller totalt 1 lektioner.
Vad lär jag mig i ”De första stegen med jQuery”?
De första stegen med jQuery Ni övar på jQuery Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig jQuery Academy?
Du behöver inga förkunskaper. Utbildningen i jQuery Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 1.
Hur lång tid tar lektionen ”De första stegen med jQuery”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här jQuery Academy-lektionen?
Ja. Varje jQuery Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.