Kako početi sa jQuery
Prolaz kroz osnove jQuery, sve do izrade dodataka.
Original: Getting_Started_with_jQuery
Autor: Jörn Zaefferer
Prevod: Leftfield & CicaNS
Ovaj tutorijal je uvod u jQuery biblioteku. Osnovno poznavanje JavaScript i "document object model" (DOM) je obavezno. Počinjemo od osnova i pokušavamo objasniti pojedinosti kada je to potrebno. Ovaj tutorijal obuhvata jednostavne pozdrave svijetu "hello world", selektore... AJAX, FX, upotrebu i autorizovanje dodataka.
Namjera pružanja samo kôda tipa "kopiraj me" je da Vam omogući da sami probate. Kopirajte primjer, vidjeti sami o čemu se radi, i mijenjajte ga.
Priprema
Da bi ste počeli, potrebno je da kopirate jQuery biblioteku, koju možete skinuti sa glavne download stranice. jQuery Starterkit pruža neke osnovne naznake i nešto CSS-a da bi ste mogli raditi sa njim. Nakon preuzimanja datoteke, raspakujte njezin sadržaj. Datoteku jquery.js ćete staviti u isti direktorijum i otvorite starterkit.html i custom.js sa vašim omiljenim editorom a starterkit.html otvorite sa pretraživačem.
Sada imate sve da počnete sa zloglasnim "Hello world" primjerom.
Linkovi za ovu sekciju:
Pozdrav jQuery
Počinjemo sa praznom html stranom:
<html>
<head>
<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript">
// odje ćemo dodati nas javascript kod
</script>
</head>
<body>
<!-- odje ćemo dodati nas html kod -->
</body>
</html>
Ova stranica učitava jquery.js biblioteku (provjerite da URL ukazujr tačno na jquery datoteku! Ovaj primjer pretpostavlja da ste je stvaili u isti direktorijum kao ovaj primjer datoteke). Dva komentara naznačavaju gdje ćemo proširiti ovaj šablon sa kodom. Skoro sve što je potrebno znati kada se igramo tj. kada koristimo jQuery, je da on čita ili manipuliše sa DOM-om, i potrebno je dodati dogadjaje (events) odmah nakon što je DOM spreman.
Da biste ste to učinili, registrujte spreman događaj za dokument.
$(document).ready(function() {
// radi nešto kad je DOM spreman
});
Stavljanje upozorenja na tu funkciju nema puno smisla, kako upozorenje ne zahtijeva da DOM bude učitan. Pa probajmo to malo sofisticiranije: Prikaži upozorenje kad se klikne na link.
Dodajte sledeće u < body >:
<a href="/">Link</a>
Sada osvježite $(document).ready manipulator:
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
Ovo bi trebalo prikazati upozorenje čim kliknete na link.
Da vidimo šta to radimo: $("a") je jQuery selektor, i u ovom slučaju on odabire a elemente. $ je pseudonim za jQuery "klase", dakle $() gradi novi jQuery objekt. Sledeću funkciju click() koju pozivamo, je metod od jQuery objekta. Ona spaja klik dogadjaj za sve odabrane elemente (u ovom slučaju, jedan utvrđeni element - sidro) i izvršava funkcije koje nastaju tokom tog događaja.
Ovo je slično kao sljedeći kod:
<a href="/" onclick="alert('Hello world')">Link</a>
Razlika je očigledna: nije potrebno pisati onclick za svaki pojedini elemenat. Imamo čisto razdvajanje strukture (HTML) i ponašanja (JS), baš kao i što odvojamo strukturu i prezentaciju koristeći CSS.
Imajući ovo na umu, možemo istraživati selektore i događaje malo dublje.
Interesantni linkovi ovog odjeljka:
Pronađi me: Korišćenje selektora i događaja
jQuery daje dva pristupa za selektovanje elemenata. Prvi koristi kombinaciju CSS i XPath selektora koji su prošli kao string u jQuery konstruktoru (npr. $("div > ul a"). Drugi koristi nekoliko metoda od jQuery objekta. Oba pristupa mogu biti u kombinovana.
To try some of these selectors, we select and modify the first ordered list in our starterkit. Da probate neke ovih selektora, mi ćemo izabrati i izmijeniti prvu listu u našem starterkit-u.
Da biste počeli, prvo odaberite sami popis. Popis ima ID "orderedlist". In classic JavaScript, you could select it by using document.getElementById("orderedlist") . U klasičnim JavaScript, možete ga odabrati pomoću document.getElementById("orderedlist") With jQuery, we do it like this: S jQuery ćemo to učiniti ovako:
$(document).ready(function() {
$("#orderedlist").addClass("red");
});
Starterkit dodaje stil sa klasom "red", koja jednostavno dodaje crvenu pozadinu. Stoga, kada ponovo učitate stranicu u vašem pregledniku, trebali bi ste vidjeti da prvi izlistan popis ima crvenu pozadinu. Druga lista nije izmijenjena.
Sada ćemo dodati nešto više klasa djeci elementima (child elements) ove liste.
$(document).ready(function() {
$("#orderedlist > li").addClass("blue");
});
Ovo slektuje svu djecu elemenata sa "id orderedlist" i dodaje klasu "plave".
Sad nešto malo više sofisticiranosti: Želimo dodati i maknuti klasu kada korisnik prekrije (hover) li elemenat, ali samo posljednji elemenat u listi.
$(document).ready(function() {
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
},function(){
$(this).removeClass("green");
});
});
Postoje mnogi drugi selektori slicni CSS-u i XPath sintaksi. Više primjera i popis svih dostupnih ekstenzija se mogu naci ovdje.
Za svaki "onxxx" raspoloživ dogadjaj, poput onclick, onchange, onsubmit nalazi se jQuery ekvivalent. Neki drugi dogadaji, kao što su ready i hover, predvidjene su prikladne metode za odredjene zadatke. Možete pronaci kompletan popis svih dogadaja u jQuery Dokumentaciji dogadjaja.
Sa ovim selektorima i dogadajima možete napraviti puno stvari, ali postoji još mnogo toga.
$(document).ready(function() {
$("#orderedlist").find("li").each(function(i) {
$(this).append( " BAM! " + i );
});
});
find() vam omogucuje da pretražite daljnje potomke vec odabranih elemenata, dakle $("#orderedlist").find("li") je uglavnom isto što i $("#orderedlist li")
each() se ponavlja nad svakim elementom i omogucuje daljnju obradu. Vecina metoda, kao što su addClass() same koriste each().
U ovom primjeru, append() se koristi za dopunu nekog teksta na njega i postavlja ga kao tekst na kraju svakog elementa.
Drugi zadatak, koji ćete često sresti, je da pozivate metode na DOM elementima koji nisu pokriveni od strane jQuery. Razmislite o formi koju želite resetovati nakon pošto ste ga uspješno proslijedili putem AJAX-a.
$(document).ready(function() {
// koristite za jednu formu
$("#reset").click(function() {
$("form")[0].reset();
});
});
Ovaj kod odabire prvi element obrasca i poziva reset() za njega. U slučaju da imate više od jednog obrasca (forme), možete to učiniti:
$(document).ready(function() {
// koristite ovo za više formi istovremeno
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});
});
Prethodni primer odabira sve forme (obrasce) unutar vašeg dokumenta, ponavlja i poziva reset() za svaku od njih.
Imajte na umu da se .each() funkcija, odnosi na aktuelni element. Takođe, budući da reset() funkcija spada u elemente forme, a ne na jQuery objekt, ne možemo jednostavno pozvati $("form").reset() da biste resetovali sve forme na stranici.
ADodatni izazov je odabrati samo određene elemente iz sličnih ili identičnih grupa. Za to jQuery koristi filter() i not(). Dok filter() smanjuje izbor elemenata na one koji pripadaju traženom izrazu, not() čini suprotno i uklanja sve elemente koji odgovaraju izrazu. Zamislite neuređenu listu iz koje želite da odabrete sve elemente koji nemaju ul. dece.
$(document).ready(function() {
$("li").not(":has(ul)").css("border", "1px solid black");
});
Ovo selektuje sve "li" elemente koji imaju ul element kao dete i uklanja sve elemente iz odabira. Zato svi "li" elementi dobijaju okvir (border), osim onih koja imaju dete "ul".
[expression] sintaksa je preuzeta iz XPath i može se koristiti za filtriranje po atributima. Možda želite odabrati sva sidra koji imaju atribut "name":
$(document).ready(function() {
$("a[name]").css("background", "#eee" );
});
Ovo dodaje boju pozadine na sve elemente sidra sa atributom "name".
Mnogo češće od odabira sidra po imenu, možda će vam trebati odabir sidra po njihovim "href" atributima. To može biti problem jer se browseri ponašaju prilično neusaglašeno kada vraćaju ono što mislite da je "href" vrednost (Napomena: Ovaj problem je nedavno fiksiran u jQuery, i raspoloživo je u svim verzijama nakon 1.1.1). Da bi poredili samo deo vrednosti, možemo koristiti "*=" umesto znaka jednakosti ("="):
$(document).ready(function() {
$("a[href*=/content/gallery]").click(function() {
// uradi nešto sa svim linkovima koji upućuju negde npr. /content/gallery
});
});
Do sada, sve selektore smo koristili za odabir dece ili filter za trenutni odabir. Postoje situacije u kojima morate odabrati prethodni ili sledeći element, poznat i kao siblings. Razmislite o FAQ stranici, gde su svi odgovori prvo sakriveni, pa prikazani kada se klikne na pitanje. jQuery kod za to:
$(document).ready(function() {
$('#faq').find('dd').hide().end().find('dt').click(function() {
$(this).next().slideToggle();
});
});
Ovde koristimo ulančivanje (chaining) za smanjivanje veličine koda i bolje performanse, kao '# faq' je samo jednom odabran. Upotrebom end(), prvo find() je neuradjen, tako da možete početi pretraživati koristeći sledeći find() na našem # faq elementu, umesto na dd djce.
Unutar click handler-a, funkcija preneta na click() metod, koristimo $(this).next() da bi pronašli sledeći sibling (brat) počevši od trenutne dt. To nam omogućava brz odabir odgovora nakon klika na pitanje.
Osim siblings (braće), možete odabrati i roditelja elemenata (takođe poznat kao predak za one koji su više upoznati s XPath). Maybe you want to highlight the paragraph that is the parent of the link the user hovers. Možda želite istaknuti paragraf koji je roditelj za link preko kojeg se predje (hover):
$(document).ready(function(){
$("a").hover(function(){
$(this).parents("p").addClass("highlight");
},function(){
$(this).parents("p").removeClass("highlight");
});
});
Za sve (predjene) hovered sidro elemente, roditelj stavka je nadjena i klasa "highlight", dodata i uklonjena.
Idemo sad jedan korak nazad pre nastavka: jQuery čini da je kod kraći i stoga lakši za čitanje i održavanje. Sledeće je skraćenica za $(document).ready(callback) notaciju:
$(function() {
// code to execute when the DOM is ready
});
Primenjeno na "Hello world!" primeru:
$(function() {
$("a").click(function() {
alert("Hello world!");
});
});
Sada, sa ovim osnovama, želimo da istražimo i neke druge aspekte, počevši s AJAX.
Interesantni linkovi za ovo poglavlje:
Komentari mogu biti izbrisani ili izmjenjeni bez vase saglasnotsi ili bilo kakvog obavjestenja.