Mikael Brevik

PHP, MySQL, CSS, XHTML, JavaScript

jQuery gjør jobben mye lettere

Dato 18. Aug. 2007 Kategori JavaScript

Tidligere har jeg skrevet en artikkel om noe JavaScript som krevde prototype-frameworket som backend. Her er en kort innføring i jQuery, og hvordan du kan bruke noen av dens funksjoner.

Installering

Alt du gjør for å kunne bruke jQuery er å gå på download-seksjonen til jQuery, last det ned og inkludere den i dokumentet ditt med en linje allá

<script type="text/javascript" src="jquery.js"></script>

Etter du har gjort det er jQuery oppe og går og er klar til å brukes på siden din. Men du må slevsagt huske å ha korrekt navn og path til filen som inneholder jQuery-kodene.

Bruken av jQuery

Bruken av jQuery er meget enkel. Den gjør det veldig simpelt å velge aktivt element som du skal bruke og/eller manipulere. For å velge elementer kan du bruke samme metode som du gjør i CSS. Ved å velge divisjonen med id som er "wrapper" slik: #wrapper. Originalt i JS gjør du dette ved å bruke getElementById('wrapper'), men den er veldig begrenset i forhold til hva du får muligheten til med jQuery. Om jeg f.eks vil velge alle paragrafer under #wrapper bruker jeg, i jQuery, kun

$('#wrapper p')

Mens det ville ha vært langt mer komplekst om jeg ikke hadde brukt et rammeverk.
Så det er litt om hvordan jeg velger elementer i jQuery. Her er flere eksempler som er valide:

$('ul#menu, ul.my-list')
$('ul#menu li')
$('#content> p')

Det kjekke med jQuery er at den er kompatibel med CSS helt opp til versjon 3.

Når man introduserer et nytt språk er det vanlig å starte med å vise hvordan man kan printe ut "Hello World" til nettleseren din. Så hvorfor bryte med en god tradisjon?

$(document).ready(function() {
$('body').append('<p>Hello World</p>');
});

Denne vil rett og slett legge til '

Hello World

' til body-tagen i dokumentet ditt.

Nå kommer jeg stort sett bare til å vise hvordan man kan gjøre forskjellige ting med jQuery. Raskt og muligens veldig rotete.

Legge til indikator av ekstern lenke

$(document).ready(function() {
$('body').find('a').each(function() {
if(!this.href.match('din-adresse.net')) {
$(this).append(' EKSTERN');
}
});
});

Hvordan lage en toggle-liste/meny

(Toggle er når du kan vise og sjule et element)

Du må alltid huske at siden din skal gi mening uten JS også. Derfor har du listen din vist til vanlig, men sjuler den ved hjelp av JS. Dette vil du ha ganske tidlig i JS-en din, slik at du ikke ser den er der først og så plutselig forsvinner. Sjuling er veldig enkelt med jQuery. I stedet for å sette display: none i CSS ved hjelp av JS bruker du kun metoden .hide.

$(document).ready(function() {
$('#list1').hide();
});

<h3>Liste #1</h3>
<small><a href="#" onclick="$('ul#list1').slideToggle('slow'); return false;">Sjul/vis</a></small>
<ul id="list1">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Mauris adipiscing nonummy sapien.</li>
<li>Nullam et lorem quis ante volutpat bibendum.</li>
<li>Etiam commodo commodo ipsum.</li>
<li>Aenean a mauris ac massa laoreet euismod.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Mauris adipiscing nonummy sapien.</li>
<li>Nullam et lorem quis ante volutpat bibendum.</li>
<li>Etiam commodo commodo ipsum.</li>
<li>Aenean a mauris ac massa laoreet euismod.</li>
</ul>

Så har du en fullverdig toggle-funksjon på listen din. SÅ enkelt er det.

Det var det raske og rotete jeg hadde for denne gang. Bare noe du kan starte og leke deg med inntil videre. Du kan lese mye mer om jQuery på disse sidene:

2 responser om “jQuery gjør jobben mye lettere”

getElementByID('wrapper')
Feil. Du mener vel:
document.getElementById('wrapper')

$('#wrapper p')
Når du gir flere elementer samme id, er siden ikke gyldig XHTML. Kanskje verdt å nevne?
Derfor er det bedre å velge elementer basert på tagName og/eller className. Du kan f.eks gi alle 'ene klassenavn «wrapper» og bruke 'p.wrapper' som selektor.

Kjell skrev dette 2 Desember, 2007 02:41 - Sitér
Nei, det er ikke feil i og for seg (sett bort i fra upper case bagatell). Det er kun nevnt med metodenavne og uten objekt e.l. Om en skal skrive om en metode av en klasse skriver en ikke klassenavnet forran metoden hver gang, omtrent samme blir det her.

ID skal være unik ja, det er korrekt. Men har følelsen av at du mikser noe her. #wrapper p er ikke det samme som p#wrapper. å velge ut i fra class name eller tag name? I mitt eksempel blir det tatt etter tag, altså taggen "p" i elementet med det unike id´en "wrapper". Og ID er nemlig brukt til å identifise ett spesifikt element.

Det jeg tror du må huske er at #wrapper p er p-elementer i #wrapper og ikke et paragraf i seg selv.

Mikael Brevik skrev dette 2 Desember, 2007 17:03 - Sitér

Legg igjen respons

Info om posten

Innlegget ble postet 18.08.07 19:16 og ligger under kategorien JavaScript. Du kan abonnere på kommentarene ved å bruke RSS 2.0 feed. Du kan legge til kommenter, eller trackback fra din blogg/side.