En av de viktigste… Den viktigste tingen du kan lære deg hvis du skal jobbe med jQuery – den viktigste tingen du må lære deg – er å bruke såkalte selectors. Det er ikke i nærheten av å være så skummelt som det kan høres ut – selectors er egentlig bare jQuery-språk for et uttrykk som bestemmer hvilke html-element du vil jobbe med.
Jeg var såvidt innom selectors i forrige ukes introduksjonspost, men det er et så viktig tema at det fortjener en egen uke. Hvis vi tar koden vi lagde sist:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Å begynne med jQuery</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("body").css('background-color', 'yellow');
});
</script>
</head>
<body>
<p>Denne teksten skal bli grønn.</p>
</body>
</html>
I dette eksempelet bruker vi to selectors. document er den første, og “body” er den andre. document står, sammen med window, litt i særstilling – de fleste selectors skal stå i anførselstegn.
De gode nyhetene er at hvis du har drevet litt med css, så kjenner du tegningen allerede – jQuery har gjort en veldig god innsats for å bruke samme måte for å la oss velge et eller flere element som det css har.
De viktigste tingene å huske på:
- $(“.klassenavn”): Hvis du skal velge elementer med en gitt klasse, så velger du klassenavnet med et punktum foran.
- $(“#id”): Hvis du skal velge et element med en gitt id, så velg med en skigard (#) foran. Men husk på at hvis du bruker id-er, og det gjør du fort, så må det bare være en av hver id i dokumentet ditt. Hvis ikke blir den første valgt, og du blir forvirret
- Skal du velge et barn, for eksempel et p-element inni et div-element, begge med gitt id, så kan du gjøre slik: $(“#div-element > #p-element”)
- Hvis du ville velge begge to, så fungerer “(#div-element, #p-element”)
- Du kan gjøre vanvittig mye, til og med en del ting du ikke kan i css – jQuery Selectors-dokumentasjonen har mye snadder du kan lese deg opp på.
Så da modifiserer vi litt på forrige ukes kode, så skal du få et eksempel å teste deg på – det kan godt hende du vil trenger dokumentasjonen for å finne svaret.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Å begynne med jQuery</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Sett inn koden din her
});
</script>
</head>
<body>
<p>Denne teksten skal bli grønn.</p>
<p>Denne teksten skal bli blå.</p>
<p>Denne teksten skal bli grønn.</p>
<p>Denne teksten skal bli blå.</p>
<p>Denne teksten skal bli grønn.</p>
<p>Denne teksten skal bli blå.</p>
<p>Denne teksten skal bli grønn.</p>
<p>Denne teksten skal bli blå.</p>
</body>
</html>
Kan du – uten å endre på selve html-koden – sørge for at de forskjellige tekstavsnittene får de fargene de skal, og ikke blir stående ufargelagt og flau. Det er flere måter å løse dette på.
Hvis du har lyst til å prøve deg, så post gjerne svar eller spørsmål i kommentarfeltet.