JQuery er nu blevet standard måden hvorpå man manipulerer sin Dom klient-side. Ved første øjekast, ser en JQuery syntaks noget kryptisk ud – den ligner i hvert tilfælde ikke traditionel Javascript, og det kan være svært at få noget ud af dokumentationen. Man er som så ofte før henlagt til at lede efter eksempler, og prøve sig frem. Jeg bruger JQuery af og til, men når altid lige at glemme detaljerne i ‘query’-sproget, hver gang jeg skal starte op igen. Derfor har jeg lige samlet en oversigt over de elementer af syntaksen, som jeg bruger mest.
| Selektorer | Eksempel | Hvad |
| Html-element | $(“li”) | Udvælger alle elementerne af typen: li |
| Dom ID | $(“#Content”) | Udvælger det element i Dom’en, der har den angivne id-attribut |
| Css-klasse | $(“.lige”) | Udvælger alle de elementer i Dom’en, der har den angivne css-klasse. |
| Kombination | $(“input:text, input:password”) | Det er muligt at kombinerer sine querys med udtryk, der er sammensat med ‘,’. |
| Akse | $(“div > p > a”) | Matcher de elementer, der befinder sig i den angivne akse. Her er det altså alle a-elementer, der befinder sig i et p-element, der findes i et div-element. |
| Siblings - før | $(“#therow ~ tr”) | Matcher det elemet der befinder sig før det element der rammes af venstre side af ‘~’. Her forudsættes det at elementet med id’en: therow, er et tr-element, og at der findes et tr-element før i Html’en |
| Siblings - efter | $(“#therow + tr”) | Matcher det elemet der befinder sig lige efter det element der rammes af venstre side af ‘+’. Her forudsættes det at elementet med id’en: therow, er et tr-element, og at der findes et tr-element efter i Html’en |
| Filter | $(“li:first”) | JQuery understøtter CSS3 filtre og en række ekstra JQuery-filtre.
:not, :button, :visible, :hidden, :checked, :first, :nthchild(n), :has, :is, :contains, :parent |
| Attributter | $(“td[nobr=Yes]”) | Matcher de td-elementer, der har attributten: nobr sat til værdien: Yes |
Så lige et par eksempler.
Hvis jeg vil lave speciel style på hve anden række i en tabel:
$("table > tr:even")
.css("background-color", "red");
Hvis jeg vil fremhæve elementer i en liste:
$("ul > li[class=important]")
.css("font-weight", "bold");
Code on...