Hvis du vil lave fede ting i javascript, med temmelig simple koder, som er til at forstå, så er jQuery løsningen.
Hvad er jQuery
jQuery er et såkaldt framework, eller et javascript library, alt efter hvem man spørger :)
Hvorfor jQuery
Som sagt, hvis man er træt af lange koder som
document.getElementById()
- document.getElementsByTagName()
osv osvSå er jQuery perfekt.
jQuery arbejder ud fra XPath.
XPath er et sprog til at finde rundt i information i XML filer, og da HTML er opbygget ligesom XML, så er XPath faktisk en kanon god måde at finde rundt i et html dokument.
Lidt mere om XPath kan læses her
[LINK]http://www.w3schools.com/xpath/default.asp[/LINK]
De andre javascript frameworks jeg lige kender til arbejder kun ud fra document.getElementById() - og derfor er jeg nu 100% gået fra fx. prototype til jQuery.
Lad os nu lege lidt!
Ja.. det kedelige stuff blev lidt kort, det er jo ikke særlig interessant :)
Så nu skal der eksempler på bordet!
Først lidt HTML, det skal der jo til.
<div id="foo">
<p>Lidt tekst her</p>
<p class="bar">Ekstra tekst her</p>
[/div]
Nu vil vi så gerne gøre teksten inde i p med klassen bar til blå tekst
$('div#foo p.bar').css('color','blue');
Lad os så ændre farven på det andet p tag, når man trykker på p.bar tagget.
$('div#foo p.bar').click(function(){$(this).prev().css('color','blue'); });
Vi vil nu tilføje et ekstra p tag nedenunder de 2 andre p tags.
$('div#foo').append('<p>Ny tekst</p>');
Nu kommer det som jeg synes er noget af det bedste chaining (kædereaktion).
Lad os prøve at lave en masse ting på samme tid.
Først lige lidt kode, så kommer forklaringen bagefter, jeg vil prøve at sætte det pænt op - ved hvert punktum er det en ny funktion.
$('div#foo')
.css('color','blue')
.attr('title','Titel tekst')
.next()
.css('color','green')
.next()
.css('color','yellow')
.append('<p>Ny Tekst</p>')
Lav os starte fra toppen..
Vi finder først vores udgangpunkt, som i dette tilfælde er <div id="foo">
så laver vi css attributten color om til blue.
.attr betyder at vi indsætter/rediger en html attribut på div tagget. Vi indsætter altså nu title="Titel tekst" i div tagget.
Så finder vi det næste element i XPath, som i dette tilfælde er <p>Lidt tekst her</p> og laver lidt css om.
Så finder vi igen det næste element i XPath stien og sætter lidt css.
Til sidst så indsætter vi et nyt p tag i bunden af
tagget.
(Havde vi istedet bruge prepend() så ville vi sætte det nye p tag i toppen.)
Alt i alt, så ser vores HTML faktisk sådan her ud nu
[div]
<div id="foo" style="color:blue;" title="Titel tekst">
<p style="color:green;">Lidt tekst her</p>
<p class="bar" style="color:yellow;">Ekstra tekst her</p>
<p>Ny Tekst</p>
(Havde vi istedet bruge prepend() så ville vi sætte det nye p tag i toppen.)
Alt i alt, så ser vores HTML faktisk sådan her ud nu
[div]
<div id="foo" style="color:blue;" title="Titel tekst">
<p style="color:green;">Lidt tekst her</p>
<p class="bar" style="color:yellow;">Ekstra tekst her</p>
<p>Ny Tekst</p>
[/div]
(Dette kan ses direkte med firebug til firefox, som er den bedste javascript debugger jeg endnu har set til en browser)
Lad os prøve at finde alle p elementer som ikke har en klasse der er bar
$('p[class!=bar]').css('color','blue');
Faktisk bliver mange af disse metoder at finde elementer på også standard i CSS3.
jQuery og Ajax
Kan jQuery også klare dette...?
Selvfølgelig, ethvert framework med respekt for sig selv har nogle metoder til at gøre Ajax endnu nemmere...
Vil dog sige at jQuerys metode ikke er den bedste, men den fungerer, og er stadig rimelig nem at arbejde med.
Kom nu videre...
Ja ja.. nu skal jeg komme med et par eksempler
Et hurtigt GET kald til example.php
$.get('example.php',{data:value},function(){
// Ajax er returneret med success
});
example.php kan så hente $_GET['data'] og få fat i value.
Desværre kan $.get og $.post kun bruge en "success" funktion, så ved fejl sker der ikke noget.
Men det er der selvfølgelig lavet en anden funktion til som kan klare alle forskellige options.
$.ajax({
type: 'GET',
url: 'example.php',
data: {data:value},
success: function(ret) {
// ret vil indeholde det som kommer fra example.php
},
error: function(ret) {
// Do something with ret
}
});
Vi vil ha mer'
Ja.. hvis ellers denne bliver modtaget godt, så vil jeg i min næste artikel om jQuery skrive lidt om animation og komme ind på jQuery UI, som byder på endnu mere...
Måske vil jeg også komme ind på kodning af plugins, og selvfølgelig lige fyre de plugins jeg bruger mest af.
Disclaimer
Vil lige starte med at sige at jeg ikke har testet noget af det ovenstående, men har dog en hel del erfaring med det, da jeg har siddet som frontendprogrammer hos en større dansk virksomhed.
Om Mig
Navn: Martin
Alder: 25
Bopæl: Sverige
Erfaring:
- 2 år som frontend programmør (Javascript, AJAX, XML)
- 4 år som backend programmør (PHP, XML, MySQL)
Startede min karriere som backend programmør, men har så fundet "lykken" i frontend, synes bare det er så meget dejligere når man straks ser et resultat og kan lege lidt med forskellige animationer til forskellige sjove ting.
