På denna sida beskrivs man väljer ut element i DOM-struktur m.h.a. s.k. selektorer. Selektorer kan bl.a. vara de från CSS, jQuerys "utökning" av CSS-selektorer samt attributnamn och/eller -värde.
Selektorer används för att välja ut element att kapsla in i jQuery-objekt och för att begränsa (filtrera) ut element i existerande jQuery-objekt.
I första exempel nedan så väljs alla rubriker av nivå 2 och i andra exempel så väljs först alla stycken, som sen filtreras till de som är första barnelement.
$("h2");$("p").filter(":first-child");
Selektorer av typen CSS (inklusive utökade) och attribut anges i strängar, d.v.s. måste inneslutas i dubbla eller enkla citationstecken (" eller '). I de fall där citationstecken ingår i strängar så kan man använda "den andra" för att innesluta strängen eller lägga till tecknet \ före tecknet i strängen, t.ex. "don't" eller 'don\'t'.
Precis som i CSS kan man kombinera selektorer för att urval ska bli så precist som möjligt, t.ex. "p.kommentar" - stycke av klassen kommentar - och "h2[id]:even" - alla rubriker av nivå 2 som har ett attribut id och är varannan (jämna - se nedan).
Till början på sida
CSS-selektorer kan användas för att välja ut element, d.v.s. man bör ha grundläggande kunskap om CSS för att kunna använda dem bäst.
De grundläggande CSS-selektorerna har funnits med i CSS-standard sen början och är också de enklaste att förstå, d.v.s. är de mest vanligt förekommande.
| Selektor | Element som väljs |
|---|---|
| "tagg" | Alla element av taggen |
| ".klassnamn" | Alla element av klassen klassnamn |
| "#id" | Elementet med id id |
| "*" | Alla elementet |
För att välja element med flera selektorer så separeras selektorerna med komma (se exempel nedan).
Nedan väljs
$("h1");$(".kod");$("#sidfot");$("h1, h2, .rubrik");
CSS-selektorer möjliggör val av element med relation till varandra, bl.a. barn, ättlingar och syskon.
| Selektor | Element som väljs |
|---|---|
| "selektor1 selektor2" | Alla element selektor2 som är ättlingar till selektor1 |
| "selektor1 > selektor2" | Alla element selektor2 som är barn till selektor1, d.v.s. "direkta" ättlingar |
| "selektor1 + selektor2" | Alla element selektor2 som är efterföljande syskon till selektor1 |
| ":first-child" | Första barnelementet |
Nedan väljs
$("div.kod p");$("div.kod>p");$("h2+p");$("p").filter(":first-child");
Metoden .filter() förklaras i senare delar.
Övriga pseudoselektorer, utöver :first-child, är följande.
| Selektor | Element som väljs |
|---|---|
| ":link" | Alla länkelement (<a>) som inte besökts |
| ":visited" | Alla länkelement (<a>) som besökts |
| ":active" | Element som aktivt, d.v.s. klickas på |
| ":focus" | Element som har fokus |
| ":hover" | Element som markör står över |
| ":lang" | Element märkta med språket lang |
| ":first-line" | Elements första rad (om text) |
| ":first-letter" | Elements första bokstav (om text) |
| ":before" | Element som markör står över |
| ":after" | Element som markör står över |
Författaren behöver fortfarande förstå hur dessa selektorer är användbara...
CSS har även stöd för attribut, vilket jag valt att förklara i avsnittet Attribut nedan (bl.a. då jag inte börjat använda detta i CSS... förrän i denna underwebb :-)).
jQuery har utökats med några CSS-liknande selektorer, vilket är ämnet för nästa avsnitt.
Till början på sida
För att få bättre precision för urval av element så utökar jQuery "CSS-selektorer" med några ytterligare. Fördelen med detta är att förstår man selektorer i CSS så är det lätt att lära sig denna utökning.
Det finns selektorer för att välja element i formulär, d.v.s. knappar, textrutor, m.m..
Dessa selektorer är relativt självförklarande och därför för ges inga exempel. :-)
| Selektor | Element som väljs |
|---|---|
| ":button" | Alla knappelement |
| ":checkbox" | Alla kryssruteelement |
| ":file" | Alla filuppladdningselementet |
| ":hidden" | Alla elementet som inte är synliga i sida, vilket inkluderar dolda textrutor |
| ":image" | Alla bildelementet |
| ":input" | Alla formulärelementet, d.v.s. input-taggen |
| ":password" | Alla lösenordselementet |
| ":radio" | Alla radioknappselementet |
| ":reset" | Alla knappelementet av typen återställ (reset) |
| ":submit" | Alla knappelementet av typen skicka (submit) |
| ":text" | Alla textruteelementet |
Selektorn :hidden väljer alla element som är dolda, d.v.s. dold textruta likaväl som element vars stil är display: none. I detta fall kan det vara bättre och välja ut alla input-taggar som har attribut och värde "[type='hidden']".
Det finns även några selektorer som är relaterade till formulär, t.ex. baserade på tillstånd.
| Selektor | Element som väljs |
|---|---|
| ":checked" | Alla ibockade kryssrute- eller radioknappselement |
| ":disabled" | Alla inaktiverade formulärelement |
| ":enabled" | Alla aktiverade formulärelement |
| ":selected" | Alla valda alternativ i listruteelement |
I kategori ovan ingår även CSS-selektorn :focus.
De ordningsbaserade selektorerna bygger på att index börjar med 0, d.v.s. de udda elementen är faktiskt de jämna i sidan.
| Selektor | Element som väljs |
|---|---|
| ":eq(n)" | Alla element som matachar index n |
| ":gt(n)" | Alla element vars index är större än n |
| ":lt(n)" | Alla element vars index är mindre än n |
| ":even" | Alla element vars index är jämnt |
| ":odd" | Alla element vars index är udda |
| ":first" | Första barnelementet |
| ":last" | Sista barnelementet |
I lista ovan ändras (med kod nedan)
":odd"":nth(4)"":first"":gt(3)"
Ordningstal börjar på 0, d.v.s. jag har inte skrivit fel i kod ovan. :-)
Dessa relationsrelaterade selektorer har anpassats för att följa CSS-standard, d.v.s. numrering börjar på 1 (och inte 0, som de ordningsrelaterade).
| Selektor | Element som väljs |
|---|---|
| ":last-child" | Sista barnelement |
| ":nth-child(n)" | Barnelement nummer n (där nummer är 1-baserat) |
| ":only-child" | Barnelement som saknar syskon |
| ":parent" | Föräldraelement |
| "selektor1 ~ selektor2" | Barnelement selektor2 till selektor1 |
Det finns även några selektorer baserade på villkor, t.ex. att element har något.
| Selektor | Element som väljs |
|---|---|
| ":contains('text')" | Element som innehåller texten text |
| ":empty" | Element som är tomma |
| ":has(selektor1)" | Element som har ättlingelement selektor1 |
| ":not(selektor1)" | Element som inte matchar selektor1 |
I lista ovan ändras (med kod nedan)
":contains('två')"":empty"":has(b)"
I detta avsnitt beskrivs fler selektorer - selektorer som jag inte lyckats passa in i övriga kategorier.
| Selektor | Element som väljs |
|---|---|
| ":animated" | Element som håller på att animeras vid exekvering av skript |
| ":header" | Element av typen rubrik |
| ":visible" | Element som syns i sida |
jQuery har även utökat stödet för attribut, vilket jag valt att förklara i avsnittet Attribut nedan.
Till början på sida
Även namn eller värde på attribut kan användas för att välja ut element.
| Selektor | Element som väljs |
|---|---|
| "[namn]" | Element som har ett attribut med namnet namn |
| "[namn='varde']" | Element som har ett attribut med namnet namn och värdet varde |
| "[namn^='varde']" | Element som har ett attribut med namnet namn och ett värde som börjar med varde |
| "[namn$='varde']" | Element som har ett attribut med namnet namn och ett värde som slutar med varde |
| "[namn*='varde']" | Element som har ett attribut med namnet namn och ett värde som innehåller varde |
| "[namn~='varde']" | Element som har ett attribut med namnet namn och ett värde som innehåller ordet varde |
| "[namn|='varde']" | Element som har ett attribut med namnet namn och antingen värdet varde eller börjar med värdet varde följt av ett bindestreck |
| "[namn!='varde']" | Element som har ett attribut med namnet namn men inte värdet varde |
När det gäller selektor som väljer baserat på ord så måste värdet börja med värdet och följas av mellanslag, sluta med värdet och föregås av mellanslag eller både föregås och efterföljas av mellanslag. I första exempel nedan kommer alla attribut med ordet fet i sig väljas, d.v.s. med alla följande id:
I andra exemplet kommer kommer alla rubriker vars värde börjar på tal eller tal- att väljas, men inte talet.
$("h2[id~='fet']");jQuery("h2[id|='tal'");
Till början på sida
Vi kan även använda DOM-element, t.ex. document. Detta är något som bl.a. används som selektor när vi använder metoden ready.
$(document).ready(function() {
//Kod att exekvera nar sida laddats
});Till början på sida
Nedan är länkar till större exempel.
Nedan finns några böcker och webbsidor/-platser som jag använt för att skapa denna underwebb.