På denna sida beskrivs hur man manipulerar element i DOM-struktur, t.ex. lägger till nya element och ändrar stil (CSS) för element.
När vi valt ut element och kapslat in dem i ett jQuery-objekt så är det dags att manipulera elementen, t.ex. genom att ändra stil (CSS) för element, dölja/visa element eller rent av lägga till nya/ta bort existerande element.
I detta avsnitt beskrivs metoder för att ändra stil för element, antingen genom att lägga till eller ta bort stil, men även klass för element.
| Metod | Element som väljs ut |
|---|---|
.addClass(arg) |
Lägger till klass till alla element |
.css([egenskap[, varde]]) |
Hämtar stilar för första elementet, och ev. enbart för egenskap i argumentet egenskap eller sätter värdet i argumentet varde för egenskapen i argumentet egenskap |
.hasClass(klass) |
true om element är av klass i argumentet klass |
.removeClass([klass]) |
Tar bort klasser från första elementet, eller endast klass/-er i argumentet klass |
.toggleClass(arg[, byta]) |
Lägger till eller tar bort t.ex. klass i argumentet arg från element, baserat på om argumentet byta är sant |
I exempel nedan väljs element med ID "errors" ut och sen läggs klassen "visualRed" till, för att sen tas bort på nästa rad. På tredje raden sätts elementets stil för bakgrundsfärg direkt och på fjärde raden sätts stil för både bakgrundsfärg och fet stil direkt i element. Om man sätter flera stilar så använder man en vektor med namngivna positioner (eng. map).
$("#errors").addClass("visualRed");$("#errors").removeClass("visualRed");$("#errors").css("background-color", "red");$("#errors").css({"background-color": "red",
"font-style": bold});Till början på sida
I detta avsnitt beskrivs metoder för att hämta eller sätta höjd och bredd för element, värden som avser storlek innan- och utanför kantlinjer, men även positionering av element.
| Metod | Element som väljs ut |
|---|---|
.height([varde]) |
Hämtar eller sätter höjd för första elementet, exkl. utfyllnad |
.innerHeight([varde]) |
Hämtar eller sätter höjd innanför kantlinje för första elementet |
.innerWidth([varde]) |
Hämtar eller sätter bredd innanför kantlinje för första elementet |
.offset([koord]) |
Hämtar eller sätter koordinater för första elementets position, relativt dokumentet |
.outerHeight([varde]) |
Hämtar eller sätter höjd, inkl. marginaler, för första elementet |
.outerWidth([varde]) |
Hämtar eller sätter bredd, inkl. marginaler, för första elementet |
.position() |
Hämtar koordinater för första elementet, relativt omslutande element |
.scrollLeft([varde]) |
Hämtar eller sätter horisontell skrollposition för första elementet |
.scrollTop([varde]) |
Hämtar eller sätter vertical skrollposition för första elementet |
.width([varde]) |
Hämtar eller sätter bredd för första elementet, exkl. utfyllnad |
(ATT GÖRA: En beskrivning...)
var intInnerWidth = $("#errors").innerWidth();
Till början på sida
I detta avsnitt beskrivs metoder för att manipulera element i DOM-struktur. Element kan infogas före och efter ett annat element. Det finns även två metoder att infoga med för flexibilitet (i t.ex. loopar eller funktionsanrop).
Metoder i detta avsnitt tillåter infogande utanför element, antingen före eller efter elementet.
| Metod | Element som väljs ut |
|---|---|
.after(innahall) |
Infogar innehall efter element |
.before(innahall) |
Infogar innehall fore element |
.insertAfter(mal) |
Infogar element efter argumentet mal |
.insertBefore(mal) |
Infogar element före argumentet mal |
De två första metoderna (.after() och .before()) infoga argument till element i jQuery-objekt i motsats till de två sista metoderna som infogar element efter/före argument.
I båda satser läggs texten till efter element med ID "errors", fast med det två olika metoderna.
$("#errors").after("<p>Some error text</p>");$("<p>Some error text</p>").insertAfter("#errors");
Metoder i detta avsnitt tillåter infogande inuti ett element, antingen först (eng. prepend), sist (eng. append) eller infogande/ersättande av hela innehållet.
| Metod | Element som väljs ut |
|---|---|
.append(arg) |
Lägger till argumentet arg till slutet på elements innehåll |
.prepend(arg) |
Lägger till argumentet arg till början på elements innehåll |
.appendTo(mal) |
Lägger till element till slutet på argumentet mal |
.prependTo(mal) |
Lägger till element till början på argumentet mal |
.html(html) |
Hämtar eller sätter HTML i argumentet html som första elements innehåll |
.text(innehall) |
Hämtar eller sätter innehåll i argumentet innehall som första elements innehåll |
De två första metoderna (.append() och .prepend()) infogar argument till element i jQuery-objekt i motsats till de två sista metoderna som infogar element efter/före argument.
Metoden .html() hämtar eller sätter HTML-kod i element medan metoden .text() hämtar innehåll i element - eventuella HTML-taggar utelämnas.
På första raden väljs först element ut att lägga till inuti och sen läggs text till sist inuti elementet. Samma sak sker på andra raden, men här "väljs" först text att lägga till och som argument till metod skickas element att lägga till text till.
$("#errors").append("Some error text");$("Some error text").appendTo("#errors");
Metoder i detta avsnitt tillåter kopiering och borttagande av element, men även elements attribut. Metoderna i tabell nedan kan användas för att manipulera element.
| Metod | Element som väljs ut |
|---|---|
.clone([handelser1[, handelser2]]) |
Kopia på element och alla ättlingar, och ev. händelsehanterare om argumentet handelser1 sant samt ev. ättlingars händelsehanterare om handelser2 sant |
.detach(selektor) |
Tar bort element, och ev. attribut med namnet i argumentet namn eller sätter värde på attributet |
.empty() |
Tar bort element, och ev. attribut med namnet i argumentet namn eller sätter värde på attributet |
.remove([selektor]) |
Tar bort element, och ev. element som matchar argumentet selektor |
.replaceAll(selektor) |
Ersätter alla element som matchar argumentet selektor |
.unwrap() |
Tar bort elements förälder |
.val([varde]) |
Hämtar eller sätter värde för element - främst formulärelement |
.wrap(arg) |
Lägg till element i arg som förälder till varje element |
.wrapAll(arg) |
Lägg till ett och samma element i arg som förälder till alla element |
.wrapInner(arg) |
Lägg till element i arg kring elements innehåll |
Metoder i detta avsnitt skiljer på attribut och egenskaper: attribut är en del av dokumentets innehåll medan egenskaper är en del av dokumentets egenskaper, t.ex. namn på elements tagg.
Det finns ett antal metoder för att manipulera attribut i element, men även för att manipulera egenskaper (eng. properties) som t.ex. kan användas i egen kod.
| Metod | Element som väljs ut |
|---|---|
.attr([namn[, varde]]) |
Hämtar attribut för första elementet, och ev. attribut med namnet i argumentet namn eller sätter värde på attributet |
.prop([namn[, varde]]) |
Hämtar egenskaper för första elementet, och ev. egenskap med namnet i argumentet namn eller sätter värde på egenskapen |
.removeAttr(namn) |
Tar bort attributet som matchar argumentet namn |
.removeProp(namn) |
Tar bort egenskap som matchar argumentet namn |
Till början på sida
Nedan finns några böcker och webbsidor/-platser som jag använt för att skapa denna underwebb.