Tutorijali

Pregled Novo Popularno Dodaj tutorijal

Upoznajmo jQuery

Autor: sysrq147
Dodano: 12/09/2008 u 13:24

Kategorija:
Web - Client side
Komentara: 0

OCJENA

n/a

Glasova
0

Upoznajmo jQuery

Što je to jQuery zapravo?

Ne brinite se jQuery nije nikakav novi skriptaški jezik, to je jednostavno JavaScript „knjižnica“ (eng. library) tj. skup unaprijed definiranih funkcija i kontrola koje omogućuju jednostavniju izradu web aplikacija koje se baziraju na JavaScriptu. jQuery omogućuje jednostavno odabiranje (selektiranje) i manipulaciju DOM elementima , manipuliranjem CSS , Event i Effect metodama kao i AJAX metodama i sl.

Da bi ste upotrijebili jQuery potrebno je biti upoznat sad HTML/JavaScript –om ali prije svega preuzeti jQuery library sa njihove službene stranice (dakako besplatno GPL/MIT licenca).

jQuery sluzbena stranica

Da bi ste na stranici koju izrađujete ili uređujete koristili ovu „knjižnicu“ potrebno ju je u <head> dijelu vaše stranici uključiti (npr.)

<script src="resursi/jquery-1.2.6.min.js" type="text/javascript"></script>

i to je to, tehnički dio je gotov. Sada upoznajmo osnove jQuery preko ovoga jednostavnoga primjera. U vašoj omiljenoj web development aplikaciji ili u notepadu ispišimo kod:

<!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>Test</title>
<script type="text/javascript" src=“jquery-1.2.6.js“></script>
<script type="text/javascript" src=“test.js“></script>

<style type="text/css">

</style>

</head>

<body>

<div class=“test“>Ovo je test. Kliknite na pravokutnik.</div>
</body>
</html>

Spremimo stranicu i pripazimo da smo pravilno „uključili“ jQuery „knjižnicu“ i test.js JavaScriptu koju ćemo sada napraviti:

U notepadu, otvorite novi dokument i upišimo kod:

$(document).ready(function() {

$(".test").click(function(){

$(".test").hide("slow");

});
});

Kod spremimo kao test.js (dakle .js ekstenzija). U pregledniku otvorimo spremljeni html dokument i kliknimo na plavi pravokutnik. To je to jQuery u akciji. Razmotrimo malo napisani kod. Osnovno što primjećujemo jeste znak $ koji u jQuery-u naziva selektor.

Početni dio koda ($(document).ready(function() { … ) standardno dolazi prije pisanja ostatka koda i omogućuje iniciranje ostatka koda kada su svi DOM elementi učitani.)

Selektor $( ) „odabire“ DOM element kojim želimo manipulirati -u našem slučaju <div> tag sa css klasom pod nazivom test. Sljedeće što pozivamo jeste click() metoda koja će u slučaju našega klika na odabrani <div> tag „pokreniti“ effect metodu hide() i „sakriti“ ga.

I to je to , ukratko o jQuery-u a više saznajte na njihovoj službenoj stranici a svakako posjetite i jQuery UI gdje mozete pronaci iznimno koristan plug-in za jQuery.

Preporučena literatura:

jQuery Reference Guide , Jonathan Chaffer
Karl Swedberg, Pack publishing

Oprez: Prilikom pisanja koda pazite da pravilno uključite jQuery „knjižnicu“ i test.js datoteku.

Prikaži komentare (0)