 jQuery kodning
jQuery er et såkaldt "javaScript bibliotek". jQ indeholder for indeværende ca. 300 "funktioner". De kan bruges i stedet for eller sammen med javaScript kode til at tilføre dynamik til den enkelte HTML-side efter at den er downloaded til browseren på slutbrugerens udstyr.
Alle ca. 300 funktioner har hver især deres individuelle ident. De er derfor nemme at indsætte og begynde at bruge. Udover at de alle kan ses samlet på jQuery's hjemmeside kan de også ses opdelt i ca. 50 grupper / undergrupper. En oversigt over dem kan ses her: X.
Både javaScript og jQ kan kun anvendes i forbindelse med HTML-sidens body-del. Filer med jQ-data behandles på samme måde som almindelige javaScript-filer og bærer også efternavnet ".js". Et .js-program, der indeholder jQ-kode kaldes normalt et "jQuery plugin". Installation og ibrugtagning af jQ-plugins er beskrevet andetsteds i Webdok indenfor jQuery menu-området.
jQ's slogan er "write less, do more". Målt på antal tegn i koden er det i hvert fald rigtigt. Om "betænkningstiden" så i praksis er ligefrem proportional dermed eller afviger i den ene eller anden retning er en anden og nok væsentligere faktor.
xxx har en ganske særlig prioritet blandt jQ-funktionerne. Den sørger for at al øvrig jQ-kode bliver afviklet.
Syntaksen i jQ er ganske simpel og en god indikator for, hvad der kan udrettes med det:
$(selector)jQfunktion;
eller flerleddet
$(selektor)jQfunktionjQfunktion......jQfunktion;.
javaScript fortolkeren i alle væsentlige browsere læser og håndterer strengen "$.....;" som jQuery-kode. Flere sådanne strenge kan være nestede indeni hinanden.
| Selektor |
|
Selektoren anvendes til at pege på det element i DOM for aktuel HTML-side, der skal behandles data for med en eller flere jQfunktioner.
En selektor kan være:
| * | Selekterer alle tags i body-delen af DOM. | $("*")
Selekterer alle elementer i body-delen af DOM |
<>| Tag navn | Selekterer alle tags i DOM med det pågældende tag-navn. | $("p")
Delekterer alle p-elementer. |
<>| #identnavn | Selekterer tag i DOM med id="ident" tilknyttet. | $("#container")
Selekter element i DOM med id="container". |
<>| .classnavn | Selekterer alle tags i DOM med de pågældende class="classnavn" tilknyttet. | $(".highlight")
Selekterer alle elementer i DOM med class="highlight". |
<>| tag#identnavn | Selekterer det pågældende tag-navn med id="ident" tilknyttet. | $("div#content")
Selekterer den div-boks, der har tilknyttet id="content". |
<>| tag.classnavn | Selekterer alle forekomster i DOM af det pågældende tagnavn med class="classnavn" tilknyttet | $("h1.color")
Selekterer alle H1-tags, der har tilknyttet class="color". |
|
| .css() funktionen |
En af de centrale funktioner i jQ er nok .css(), //der arbejder med de css-data der er knyttet til HTML-siden//. Den kan anvendes således:
<>| .css("propertynavn"); | Henter værdien fra den anførte selektor / property-kombination. | var color = $("para2").css("color");
Henter farven fra den anførte selektor og lagrer den i variablen "color". |
<>| .css("propertynavn","værdi"); | Indsætter den anførte værdi i den anførte selektor / property-kombination. | $(".list1").css("color","red");Udskifter den eksisterende farve i selektoren med rød farve. |
<>| .css(properties); | Ændrer flere properties for anført jQ-selektor | $("p").css({color: "red", font-style: "italic});
Ændrer flere properties for alle "p"-tags. |
<>| .css("propertynavn", function(index.value){}); | !!!se print fra code-tricks.com/query-selector !!! | $(p.para3").css("color", function(){return "red";})
!!!!! |
|
|
