jQuery

Förutom att koda semantisk HTML och formge med CSS börjar webbutvecklarens vardag återigen alltmer handla om Javascript. Javascript är inne från kylan igen nu när funktionella webbplatser förväntas ge mer omedelbar respons, med hjälp av AJAX eller andra Rich Internet Applications-tekniker.

Att lära sig utantill att koda Javascript är inte bara jobbigt, det är också onödigt. Många stora aktörer på webben använder Javascript, men de flesta återanvänder de ramverk som finns. jQuery är ett av dessa ramverk, det som nog fått mest genomslag.

jQuery är Javascript

Då jQuery är ett ramverk byggt i Javascript dras det med samma för- och nackdelar som Javascript gör. Det du inte kan göra med Javascript kan heller inte göras med jQuery.
Det jQuery gör är att underlätta interaktionen mellan ett HTML-dokument (Document Object Model, också kallat DOM) och Javascript. jQuery är öppen källkod och uppdateras kontinuerligt.
jQuery gör alltså Dynamisk HTML (DHTML), manipulering av sidors innehåll, event i webbläsaren, animationer, interaction med AJAX enkelt och dessutom fungerar det bra i så gott som alla webbläsare.

Fördelar med jQuery

Alla Javascript-ramverk har sina fördelar, dock sticker jQuery ut från mängden. jQuery sammanfattat i en punktlista:

  • Det är öppen källkod och licensierad under GNU Public License (GPL) och även MIT.
  • Det är oerhört populärt vilket gagnar användare då det finns massor med hjälp att finna på webbens alla forum.
  • Tar liten plats. Mellan 18-114 KB, något som användare uppskattar.
  • Tar hand om de olika webbläsarnas olikheter.
  • Kan utökas med plugin så utvecklaren kan ha grundpaketet och sedan välja vilka extra funktioner som behövs.
  • jQuery är väldokumenterat.

Kodexempel

Här kommer det obligatoriska Hello Word-exemplet i jQuery.

Anger en rubrik med hjälp av jQuery

Koden för detta exempel är:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hello World</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>

<body>
<h1></h1>
<p>Texten ovan sätts dynamiskt via jQuery.</p>

<script type="text/javascript">
    jQuery('h1').text('Hello World');
</script>
</body>
</html>

Kodexempel 2

Problemet man kan ha med ovan tillvägagångssätt är att alla taggar av typen H1 kommer att få texten Hello World. Det går så klart även att peka på ett enskilt objekt, detta görs på precis samma sätt som med CSS med hjälp av brädgård.

Mellan BODY-taggarna placerar du då istället nedan kod:

<h1 id="rubrik"></h1>
<h1 id="rubrik2"></h1>
<p>Texten ovan sätts dynamiskt via jQuery.</p>

<script type="text/javascript">
    jQuery('#rubrik').text('Första rubriken');
    jQuery('#rubrik2').text('Andra rubriken');
</script>