A jQuery egy JavaScript könyvtár, aminek segítségével sokkal könnyebben, rugalmasabban kezelhetünk dolgokat, mégpedig úgy, hogy nem kell közben külön arra is figyelnünk, hogy a kódunk böngésző független legyen. A jQuery-t úgy írták, hogy amit JavaScripttel meg lehet oldani, azt oldja is meg, ha az aktuális böngészőben egyáltalán meg lehet. Ez azért jó, mert a jQuery segítségével sokszor elég egyetlen sort írnunk, ahhoz hogy a programunk jól működjön.

GeSHi (javascript):
<script type="text/javascript" src="jquery.js"></script>

GeSHi (javascript):
$("a").click(function(){alert("Szia!");});

Nézzük, ez mit is csinál. Az első sorban az $("a") -résszel kijelöljük a dokumentum "a" HTML tagjait/ hivatkozásait. A .click() függvény tartalma akkor fut le, ha rákattintanak a kijelölt elemre.

GeSHi (javascript):
$("a").hover(

  function() {

    $(this).animate({background: "#000", color: "#fff", opacity: 1},"fast");

  },function() {

    $(this).animate({background: "#fff", color: "#000", opacity: 0.5},5000);

  }

);

Nézzük, ez mit csinál. Kijelöljük az a tagokat. A .hover() egy eseménykezelő függvény, (a jquery.com dokumentációjában megvan az összes leírása, annak akit érdekel. lásd: "Events" menüpont). Szóval a .hover() 1. paramétere akkor fut le, ha valamelyik linkre visszük az egeret, a második pedig akkor, ha elvisszük az egeret a link fölül.
Az első paraméter függvényében a this rész az aktuális a tagot jelenti, vagyis azt az a tagot fogjuk kezelni, amelyikre rávitték az egeret. Az .animate() pedig egy effekt függvény. Segítségével a CSS tulajdonságokkal tudunk animációt készíteni.
Az .animate() 1. paraméterében felsoroljuk vesszővel elválasztva a CSS értékeket, (itt background, color, opacity) majd megadjuk neki, hogy mivé módosuljanak az egyes paraméterek az animáció végére. Itt az eredetihez képest a háttérszínt feketére, a szöveget fehérre, és az átlátszóságot 100%-ra állítjuk.
Az .animate() 2. paraméterben az animáció futási idejét adjuk meg.
lehet: "slow" -lassú , "normal" -normális, "fast"- gyors, vagy egy szám (erről még lesz szó.)
A .hover() 2. paraméterében visszaállítjuk, amit az elsőben elállítottunk (fehérre a hátteret, a szöveget feketére, és az átlátszóságot 50%-ra). Az .animate() függvényben a CSS értékeken kívül csak a futásidőt adtuk meg máshogy. Itt egy számot adtunk meg: Az érték 5000, amivel azt érjük el, hogy az animáció 5 másodpercen keresztül fog végbemenni.

GeSHi (javascript):
$(document).ready(function(){

  // Ide jön a kód, amit az oldal betöltésekor hajt végre.

});

A fenti példa megfelel a body tag onload="" esemény kezelőjének. A komment helyére illesztett kód akkor fog lefutni, ha az oldal betöltött. Ezt a .ready() -vel értük el.

$(document).ready(

  function(){

    $("a").click(function(event){

      alert("Amint látod ez alink nem vitt el a href -ben megadottakra");

      event.preventDefault();

  });

});

Ezzel a kóddal azt érjük el, hogy ha az oldal betöltött és rákattintottak egy linkre, akkor megjelenik egy alert() ablak, és ha "leokézzuk" akkor sem irányít át az oldal a link href paraméterében megadott helyre. Ezt az event.preventDefault(); sorral értük el. Az event a függvényünk paramétere, de nem kell neki értéket adnunk, mert amikor meghívódik (amikor rákattintunk a linkre), automatikusan kap majd értéket. A .preventDefault() résszel pedig visszaállítjuk a dolgokat a klikkelés előtti állapotra, akkorra, amikor még nem kattintottunk a linkre, ezért nem is fog átvinni minket a link a másik oldalra.

GeSHi (javascript):
$("a:last").addClass("utso");