DOM-manipulering med jQuery – 2
DOM-manipulering med jQuery – 2
DOM-manipulering med jQuery – 2 ä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.
Delar av den här lektionen har ännu inte översatts och visas på engelska.
Introduktion och append
Hej!
I våra tidigare exempel har vi utfört en uppdaterings- eller läsoperation på HTML DOM-objekt.
Vi ska lära oss infogningsoperationen med metoden append().
Vi tittar på ett exempel.
<button id="add">
Add New Item
</button>
<div id="target"></div>
<script>
/*
Listen for an element with
the add id click
*/
$('#add').click(function(){
/*
append '<p>This is the appended
text</p>' to #target element
*/
$("#target").append("<p>Appended text</p>");
})
</script>lägga till
Efter att koden ovan har körts lägger append-metoden till HTML-koden (som skickas som argument) i slutet av #test-elementet.
lägga till först
Metoden prepend()
Motsatsen till metoden append() är metoden prepend() . Metoden append() lägger till innehållet i slutet av målelementets innehåll, medan prepend lägger till det i början.
<div id="target"></div>
<button id="add">
Add New Item
</button>
<script>
/*
Listen for an element
with the add id click
*/
$('#add').click(function(){
/* append '<p>This is the prepended text</p>'
to #target element
*/
$("#target").prepend("<p>This is the appended text</p>");
})
</script>Fråga
Med metoderna append och prepend kunde vi lägga till nya HTML-element i slutet respektive början av målelementet.
Men hur gör vi om vi vill lägga till det som ett syskon till målelementet?
Exempel
Vi fortsätter med det tidigare exemplet.
Vår HTML-nod ser i det första fallet ut så här.
<div id="test">
<p>initial paragraph</p>
</div>Metoderna after och before
Metoderna after() och before()
Vi kan lägga till HTML-element före och efter målelementet med metoderna after() och before().
I exempelkoden nedan har ett nytt element lagts till i elementet med id:t #test, precis före och direkt efter det i syskonhierarkin.
<div id="test">
<p>initial paragraph</p>
</div>
<script>
$('#test').before('<p>I am before the #test element</p>');
$('#test').after('<p>I am after the #test element</p>');
</script>
flera infogningar
Hittills har vi sett metoderna prepend(), append(), before() och after(). Jag glömde att förklara en sak. Förlåt, jag kan vara glömsk ibland 😇.
Vad gör vi om vi vill lägga till mer än en nod samtidigt?
Som i exemplet nedan
kan vi lägga till mer än en nod samtidigt genom att skicka fler än ett argument till de relaterade metoderna.
<p>
<span id="target"></span>
</p>
<script>
var firstNode = '<p id="first-node">First node</p>';
var secondNode = '<p id="first-node">Second node</p>';
var thirdNode = '<p id="first-node">Third node</p>';
/*
The following four methods work
with the same logic and take
more than one argument.
*/
$('#target').before(firstNode, secondNode, thirdNode);
$('#target').after(firstNode, secondNode, thirdNode);
$('#target').append(firstNode, secondNode, thirdNode);
$('#target').prepend(firstNode, secondNode, thirdNode);
</script>kedjeexempel
I exemplet ovan har mer än en nod lagts till samtidigt. Som du kan se är syntaxen densamma även om de finns i olika metoder.
Samtidigt kan vi skriva kod i JQuery genom kedjning.
På så sätt kan vi skriva kortare och effektivare kod.
Vi tittar på exemplet och lär oss hur man skriver kedjad kod i jQuery.
<p id="test"></p>
<script>
var firstNode = '<p id="first-node">First node</p>';
var secondNode = '<p id="first-node">Second node</p>';
var thirdNode = '<p id="first-node">Third node</p>';
/*
We made our code shorter.
Also, we have done the select operation
on the DOM only once instead of twice.
*/
$('#test').before(firstNode, secondNode, thirdNode)
.after(firstNode, secondNode, thirdNode);
</script>Metoden wrap
Metoden wrap()
Vilken metod använder vi om vi vill placera HTML-elementet i en annan behållare?
Självklart metoden wrap().
Följande exempel visar en enkel användning av metoden wrap.
<div id="target"></div>
<script>
/*
When we apply the code below.
The node we assigned as an argument
will come around our target element.
*/
$("#target").wrap('<div class="container">Container wrapped the target element</div>');
//The result will be as follows
/*
<div class="container">
Container wrapper the target element
<div id="target">
</div>
</div>
*/
</script>
Question
Metoden unwrap
Metoden unwrap()
Det finns en motsatt metod till metoden wrap(). Med metoden unwrap() kan vi ta bort det överordnade elementet till ett målelement.
const $ = (selector) => ({
unwrap: () => console.log(`Unwrapped ${selector}`)
});
$("#target").unwrap();Metoden empty
Metoden empty()
Nu tittar vi på hur man tar bort innehåll i HTML-element.
Med metoden empty() kan vi ta bort alla barn och ättlingar till ett målelement.
// Removes all descendants of the element from the DOM.
// (Simulated for Node.js environment)
const $ = (selector) => ({
empty: () => console.log(`Removed all descendants of ${selector}`)
});
$("#target").empty();Metoden remove()
Metoden remove() tar inte bara bort elementets ättlingar utan även själva elementet från DOM.
/*
Removes the element and
all descendants of the element from the DOM.
*/
$('#target').remove();Grattis
Grattis 🎉
Vi har lärt oss DOM-manipulation.
I nästa avsnitt lär vi oss hur man använder format med jQuery.
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 ”DOM-manipulering med jQuery – 2” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen jQuery Academy, inklusive ”DOM-manipulering med jQuery – 2”, 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 ”DOM-manipulering med jQuery – 2”?
DOM-manipulering med jQuery – 2 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 ”DOM-manipulering med jQuery – 2”?
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.