Poţi întreba lăsând un comentariu. Răspunsul va veni în câteva zile, când se vor strânge câteva întrebări.

Posturi cu o oarecare legătură:

1. De ce ai vrea să-ţi ştii viitorul?
2. Fatăh, cât de des te speli?
3. Jamie Oliver
4. Comenzi de mâncare la domiciliu în Constanţa – The sequel
5. Europa Liberă!

Prin manipularea DOM (Document Object Model) se poate modifica structura paginii parţial sau chiar în totalitate. Astfel, putem adăuga, şterge sau copia elemente în funcţie de necesităţi. Utilizare practică: AJAX, galerii de genul lightbox, drag&drop, etc. Pentru a demonstra cum funcţionează câteva din funcţiile de manipulare a DOM, am făcut un mic exemplu în care elementele sunt adăugate dinamic, după încărcarea paginii. Codul HTML iniţial este următorul:

<ul class="clearfix" id="manipulation"></ul>
<ul id="status"></ul>

Adăugăm în prima listă cinci elemente (a doua listă este un fel de consolă care – la click – ne arată câte elemente conţine prima listă):

1
2
3

for(i=0;i<5;i++){
	$(document.createElement('li')).appendTo($('#manipulation'));
}

Apoi, pentru fiecare LI adăugăm un span la mouseover şi îl ştergem la mouseout. Desigur, puteam să-l arătăm/ascundem, dar am vrut doar să arăt cam cum funcţionează manipularea. De asemenea, la click, se va injecta un alt LI imediat după elementul curent. Toate event-urile sunt live (voi explica un pic mai jos care e treaba cu ele) :

1
2
3
4
5
6
7

$('#manipulation').find('li:not(span)').live('click',function(e){
	$(document.createElement('li')).append('<a href="#">x</a>').hide().insertAfter($(this)).show(500)
}).live('mouseover', function(){
	$(this).append('<span>CLICK!</span>');
}).live('mouseout', function(){
	$(this).find('span').remove();
});

Adăugăm şi un event la #status ce ne arată la click câte elemente sunt în prima listă:

1
2
3

$('#status').click(function(){
	$(this).append('<li>Elemente în listă: '+$('#manipulation').find('li').length+'</li>');
});

Live events

Un aspect important al elementelor modificate după încărcarea paginii îl reprezintă evet-urile. Sau, mai bine spus, nepropagarea acestora. Exemplu:

1
2
3
4
5
6

<ul>
	<li>Element listă</li>
	<li>Element listă</li>
	<li>Element listă</li>
</ul>
<a href="#">Adaugă element</a>

1
2
3
4
5
6
7

$('li').bind('click',function(){
	alert('Ai făcut click pe elementul nr.'+($('ul li').index(this)+1));
})
$('a').bind('click', function(){
	$('ul').append('<li>Element listă nou</li>'); // adaugăm un element nou, la sfârşitul listei
	return false;
})

Va funcţiona doar pentru elementele existente la încărcarea paginii. Elementele adăugate ulterior nu vor avea niciun event. Până la versiunea 1.3 a jQuery, existau două soluţii:

1) re-binduirea event-ului. Asta presupunea unbind pentru eventurile existente pe elemente => timpi mari de execuţie
2) folosirea plugin-ului ‘livequery’.

În versiunea 1.3 a jQuery pluginul sus amintit a fost integrat în librărie (la fel cum s-a întâmplat şi cu dimension plugin). Astfel, codul de mai sus devine:

1
2
3
4
5
6
7

$('li').live('click',function(){ 
	alert('Ai făcut click pe elementul nr.'+($('ul li').index(this)+1));
});
$('a').bind('click', function(){
	$('ul').prepend('<li>Element listă nou</li>'); // adaugăm un element nou, la sfârşitul listei
	return false;
})

Funcţia live funcţionează la fel ca funcţia bind cu câteva diferenţe:

• Event-urile disponibile sunt: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup
• Event-urile sunt “bind-uite” pentru toate elementele, inclusiv cele ce se adaugă ulterior în DOM
• Event-urile live nu se propagă ca şi cele clasice, astfel încât e.stopPropagation() nu funcţionează*

*Fiind o funcţie nouă în jQuery 1.3, nu este documentată suficient iar livequery am folosit doar ocazional. Şi cum nici nu am avut problema asta şi nici nu există o soluţie în manual, nu ştiu cum s-ar putea rezolva. Cel puţin pentru moment.

Următorul tutorial este despre… AJAX Va urma… Nu ştiu când. Probabil în una-două săptămâni.

Posturi cu o oarecare legătură:

1. Probleme cu jucăria
2. Cum configurezi Join Air de la RDS pe MAC?

Ca exemplu practic îţi voi arăta cum poţi face un meniu de genul suckerfish vertical cu submeniuri. Tutorialul conţine atât ce am „predat” până acum cât şi câte ceva din ceea ce va urma.

Codul HTML nu conţine altceva decât o listă neordonată (UL) ce nu cred că are rost să o explic:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<ul id="meniu">
	<li><a href="#">Prima pagină</a></li>
	<li><a href="#">Despre noi</a>
		<ul>
			<li><a href="#">Ce facem</a></li>
			<li><a href="#">Ce nu facem</a></li>
			<li><a href="#">Cum facem</a></li>
		</ul>
	</li>
	<li><a href="#">Contact</a>
		<ul>
			<li><a href="#">Feedback</a></li>
			<li><a href="#">FAQ</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</li>
</ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

#meniu {
	border-top:1px solid #ccc;
	margin:50px;
	width:10em;
	font-family:Arial, Verdana, Sans-serif;
}
	#meniu li {
		position: relative;
		width:10em;
		border: 1px solid #ccc;
		border-top:none;
		list-style:none;
		background-color:#fff;
	}

În cele ce urmează afişăm doar primul nivel al listei, restul find ascuse.

1
2
3
4
5
6
7
8

#meniu li ul {
	position: absolute;
	left:9.5em;
	top:.2em;
	border-top:1px solid #ccc;
	z-index: 2;
	display:none;
}

Afişăm nivelul doi al listei (adică submeniul). Dacă #meniu are clasa .ready, nivelul doi rămâne ascuns :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

#meniu li:hover ul {
	display:block;
}
#meniu.ready li:hover ul {
	display:none;
}
	#meniu li a {
		display:block;
		line-height:24px;
		padding:0 5px;
		color:#686d8a;
		font-size:.8em;	
		font-weight:700;
		text-decoration:none;
		outline:none;
	}
		#meniu li a:hover {
			color:#000	
		}
#meniu .arrow {
	background:url(niceMenuArrow.png) no-repeat 90% center;
}

La toate elementele ce au submeniu adăugăm o săgeată (să dea bine):

1
2
3

#meniu .arrow {
	background:url(niceMenuArrow.png) no-repeat 90% center;
}

Până în acest moment, meniul funcţionează corespunzător fără pic de javascript (mai puţin pe IE6; rezolvarea pentru acesta se face strict cu JS):

În continuare urmează… „magia”:

Adăugăm clasa .arrow pentru elementele ce conţin submeniuri:

$('#meniu li ul').parent().addClass('arrow');

După care adăugăm clasa .ready pentru a elimina „efectele” pseudoclasei :hover:

$('#meniu').addClass('ready');

După aceşti doi paşi, restul este… fantezie (cum spuneau Ţapinarii):

$('#meniu > li').hover(function(){
	$(this).find('ul').fadeIn();
}, function(){
	$(this).find('ul').fadeOut();
});

Desigur, poţi folosi orice efect (slide, animate, etc) în locul fadeIn(). Poţi folosi fadeIn() combinat cu slideUp(), de exemplu.

Posturi cu o oarecare legătură:

1. NFS Shift Keyboard Issue

jQuery include câteva efecte simple dar majoritatea sunt doar variaţii ale unei singure funcţii: animate(). Toate efectele au un parametru pentru o funcţie callback. Efectele built-in sunt:

• show() / hide() -  folosite fără niciun parametru doar schimbă display:none în display:block sau display:inline (în funcţie de tipul elementului) şi invers. Cu un parametru numeric (ex: $('div').show(500) ) va genera un efect de redimensionare şi transparenţă de durată 500 ms;
• slideUp() / slideDown() – ascunde/arată un element printr-un efect de „alunecare”. Acceptă ca parametrii: durată, callback şi easing (nu ştiu cum aş putea traduce asta, dar voi explica mai jos ce face);
• toggle() / slideToggle() – dacă un element este vizibil îl ascunde şi viceversa. La fel ca la exemplul anterior, poţi specifica durata şi o funcţie callback;
• fadeIn() / fadeOut() – schimbă opacitatea unui element şi îi setează display:block / display:none. Parametrii: durată şi callback;
• fadeTo(durata, opacitate, callback) – schimbă opacitatea unui element fără a-i afecta vizibilitatea. Spre deosebire de fadeOut(), fadeTo(300, 0) doar setează opacitatea la 0, fără a ascunde elementul. Este asemănător cu  display:none VS. visibility:hidden.

Explicaţii

• funcţia callback rulează după ce efectul este terminat şi arată cam aşa:

  $('div').slideUp(500, function(){ alert('Ascuns')})

  desigur, se poate folosi şi combinaţia:

  var callback = function() {
   alert('Ascuns');
  };
  $('div').slideUp(500, callback)

• Easing – reprezintă un calcul matematic ce adaugă un… efect la efect. În cazul în care animaţia vrei să se desfăşoare liniar (cu aceeaşi viteză de la început până la sfârşit), nu ai nevoie de aşa ceva. În schimb, dacă vrei ca un slideUp să înceapă brusc şi să se termine încet, poate ar trebui să foloseşti plugin-ul ce adaugă ceva opţiuni în plus (pe lângă liniar şi swing, disponibile implicit). Acesta, pe baza unor formule matematice (scrise într-o limbă complet necunoscută mie) îţi adaugă o multitudine de opţiuni. Pe pagina sus amintită vei găsi o listă cu toate opţiunile.

Efecte custom

Astea sunt cele mai drăguţe deoarece singura limită ţine de imaginaţia fiecăruia. Ce se poate anima? Păi… Cam orice proprietate CSS în afară de z-index (IE face figuri). Atenţie însă, dacă vrei să schimbi poziţia unui element, nu uita să-l poziţionezi absolut mai întâi! Dimensiunile sunt specificate în pixeli dar, dacă le pui în ghilimele, poţi specifica unitatea de măsură preferată.

$('p:eq(0)').css({position:'absolute'}).animate({
	bottom:0,
	fontSize:'2em',
	opacity: 0.5,
	left:	'50%',
	width:'50%'
}, 1500, 'swing',  function(){
	alert('Animat!');
});

Poţi încerca diverse efecte folosind consola în pagina demo:

Mai multe efecte!

Dacă nu îţi place/nu ai timp/chef să experimentezi (sau orice alt motiv) poţi încerca jQuery UI. Este o librărie asemănătoare scriptaculous ce adaugă câteva funcţionalităţi mai deosebite pentru jQuery: drag&drop, mai multe efecte, slidere, datepicker, etc. Aici ai demo cu efectele jQuery UI.

Ce urmează?

Momentan o pauză de o săptămână-două, după care voi reveni cu un exemplu practic cu ce am învăţat până acum şi un  tutorial despre cum putem modifica DOM-ul cu jQuery. Nu uita să alegi ce tutorial vrei să fie exemplul final!

Posturi cu o oarecare legătură:

1. 2012

[poll id="5"]

Cam toate aplicaţiile conţin efecte, ajax, modificare DOM, etc, deci toate sunt destul de avansate pentru a uni toate cunoştinţele asimilate într-un singur exemplu.

Posturi cu o oarecare legătură:

1. Comenzi de mâncare la domiciliu în Constanţa – The sequel
2. Scurte. Da’ scurte rău!
3. O șansă

1.Link-uri deschise în altă fereastră

Dacă ţii neapărat la corectitudinea codului tău şi îl vrei XHTML 1.0 strict sau XHTML 1.1, vei observa că atributul target="_blank" nu mai este valid. Există două abordări:

rel=”external”

Cea mai exactă metodă ce îţi permite un control sporit asupra link-urilor este adăugarea atributului rel="external" în interiorul link-ului. Astfel, din <a href="#"> ancoră </a> vei avea <a rel="external" href="#"> ancoră </a>. Apoi, codul jQuery:

$(document).ready(function(){
	$('a[rel^=external]').attr('target', '_blank');
});

Folosind un selector xPath (de care am amintit sumar în primul episod), adăugăm atributul target="_blank" după încărcarea paginii. Fiind inserate dinamic, codul rămâne valid în continuare. Selectorul s-ar traduce aşa: „orice link ce are atributul rel iar valoarea acestuia începe cu external”.

Toate link-urile externe

$(document).ready(function() {
  $("a[@href^=http]").each(
    function(){
      if(this.href.indexOf(location.hostname) == -1) {
        $(this).attr('target', '_blank');
      }
    }
  );
});

Această metodă este mult mai simplă şi implică şi puţin javascript dar TOATE link-urile externe se vor deschide într-o fereastră nouă. În cazul în care vrei ca un link să nu se deschidă în altă fereastră… Nu prea ai ce face.

Totuşi, părerea mea este că tu (ca programator) nu ai niciun drept de a-ţi impune preferinţele peste cele ale user-ului. Acesta poate folosi ctrl+click, middle click (sau ce alte metode mai sunt în alte browsere) pentru a deschide un link într-o nouă fereastră/tab. În acest sens, îţi recomand să citeşti acest articol.

2.Icon-uri pentru fişiere

Dacă ai fişiere pentru download pe site (pdf, mp3, doc, zip, etc) poţi adăuga un icon în dreptul fiecărui link. În browsele adevărate (adică tot ce nu este Internet Explorer), acest lucru se poate face simplu, doar cu CSS. Folosind însă acelaşi selector, combinat cu puţin jQuery, îl putem face să funcţioneze corespunzător şi pentru nefericiţii cu IE:

1
2
3
4

$('a[href $='.doc']').addClass('doc');
$('a[href $='.pdf']').addClass('pdf');
[...]
$('a[href $='.zip']').addClass('zip');

Apoi, în CSS adaugi:

1
2
3
4

.doc {background:url(../images/doc.gif) no-repeat left center; padding-left:20px;}
.pdf {background:url(../images/pdf.gif) no-repeat left center; padding-left:20px;}
[...]
.zip {background:url(../images/zip.gif) no-repeat left center; padding-left:20px;}

Simplu, eficient şi elegant

În zilele următoare va urma un articol despre efecte şi animaţii cu jQuery.

Posturi cu o oarecare legătură:

1. Quick Tip pentru Yahoo! Messenger
2. Ipocrizie. La maxim. Da, e o realitate…
3. Votează!
4. Cum configurezi Join Air de la RDS pe MAC?
5. Scurte. Da’ scurte rău!

Unul din marile avantaje ale jQuery este că majoritatea efectelor/event-urilor suportă chaining (înlănţuire sună aiurea), astfel, cu un singur selector se pot face mai multe lucruri. Altfel spus, cu linia:

$('strong:eq(0)').addClass('rosu').css(fontSize, '2em').fadeOut(200)

Se adaugă o clasă, se schimbă dimensiunea fontului şi se schimbă opacitatea.

De asemenea, toate testele sunt făcute în Firefox, tocmai datorită lui Firebug. Dar cum jQuery este o librărie cross browser, nu trebuie să îţi faci niciun fel de problemă despre compatibilitate cu alte browsere.

Acestea fiind spuse, hai să „intrăm în pâine” cu event-urile. Ca orice termen din programare, sună destul de aiurea tradus în română. Aşadar… nu va fi „evenimente” ci events/event-uri.

Un event îţi permite să setezi o interacţiune dintre utilizator şi pagină. Un click, de exemplu, este un event. La fel şi mouseover, mouseout, keyup, keydown, ş.a.m.d.

Modul de setare pentru un event este foarte simplu şi funcţionează în „spiritul” jQuery : selector CSS:

$('h1').bind('click', function(e){
	alert('Click!')
});

Unele event-uri acceptă un stil ceva mai scurt:

$('h1').click(function(e){
	alert('Click!')
});

În ambele cazuri observi parametrul e. Acesta îţi oferă acces la câteva variabile:

Printre cele mai importante valori returnate în cazul unui click sau mouseover sunt pageX şi pageY. Acestea îţi indică poziţia cursorului.

Desigur, acest stil nu funcţionează pentru toate event-urile, ceea ce înseamnă că cel mai sigur să foloseşti metoda cu bind(). De fiecare dată, orice event returnează obiectul this. Acest obiect este fix elementul pe care este stabilit event-ul. În cazul nostru, h1.

Una din setările esenţiale în cazul în care sunt mai multe elemente şi ai event-uri pe fiecare, este stopPropagation(). Se dă codul următor:

$('p').bind('click', function(e){
	alert('p Click!')
});
$('strong').bind('click', function(e){
	alert('strong Click!')
});

Totul funcţionează corespunzător, doar că în momentul când se face click pe strong se declanşează şi event-ul de pe p. Soluţia este, aşa cum am zis, stopPropagation(). Acesta se foloseşte în felul următor:

$('p').unbind('click').bind('click', function(e){
	alert('p Click!')
});
$('strong').unbind('click').bind('click', function(e){
	e.stopPropagation();
	alert('strong Click!')
});

Observi că a apărut o nouă comandă: unbind('click'). Aceasta anulează orice alt bind('click') scris anterior. Dacă se foloseşte doar unbind() (fără niciun alt parametru), se anulează orice alt event setat anterior (fie click, fie mouseover, fie orice altceva).

Un mic amănunt fără de care s-ar putea să începi să-ţi smulgi părul din cap în cazul în care ai un event pe un link este că trebuie să adaugi un return false;:

$('a').unbind('click').bind('click', function(e){
	alert('a Click!');
	return false;
});

De notat că return false; este chiar la sfârşit, altfel tot ce este după return false; nu va funcţiona. De exmplu:

$('a').unbind('click').bind('click', function(e){
	return false;
	alert('a Click!');
});

Nu va funcţiona.

Un alt event foarte important este .ready(). Este important pentru că îţi permite rularea unor anumite funcţii după ce se încarcă toată pagina:

$(document).ready(function(){
	alert(1);
});

ATENŢIE ! Această comandă NU va funcţiona în consolă, deoarece documentul este deja încărcat.
ATENŢIE ! $(document) NU are ghilimele.

Aceeaşi comandă, scrisă puţin mai scurt, arată aşa:

$().ready(function(){
	alert(1);
});

Eu prefer varianta lungită (prima variantă). Eventul ready() se poate aplica şi pe imagini, astfel încât poţi rula o funcţie în momentul în care o imagine s-a încărcat. Desigur, nu este recomandat să se folosească pe TOATE imaginile, ci pe o anume imagine.

După cum am precizat la început, jQuery permite chaining. Astfel, putem seta mai multe event-uri pe un element folosind un singur selector:

$('a').unbind().bind('click', function(e){
	alert('a Click!');
	return false;
}).hover(function(){
	$(this).css({fontSize: '2em'})
}, function(){
	$(this).css({fontSize: '1em'})
});

Observi că al doilea event este hover. Acesta are două funcţii ca parametru: una pentru mouseover, alta pentru mouseout.

O altă funcţie utilă este trigger. Aceasta, aşa cum îi spune şi numele, îţi permite să declanşezi un event fără ca utilizatorul să fi interacţionat în vreun fel. De exemplu:

$('p').trigger('click');

Simulează eventul ‘click’  pe link. ATENŢIE ! Deoarece JS rulează în ordinea în care e scris codul, orice trigger trebuie apelat DUPĂ ce se setează un event, altfel neavând niciun rezultat.

În cazul în care există elemente introduse dinamic în cod (le voi explica într-un alt episod), event-urile NU se aplică şi noilor elemente. Astfel:

$('p').append('<a href="#">test</a>')

Va returna true la click şi nu va afişa nicio alertă. Soluţia ar fi un refresh pentru event-uri sau folosirea plugin-ului livequery.

Ultimul lucru despre care îţi vorbesc azi este comanda one(). Aceasta aproape identică cu bind() cu diferenţa că one() este “atent” la event-ul respectiv o singură dată. Astfel:

$('p').one('click', function(e){
	alert('p Click!')
});

Arată alertă doar pentru primul click.

Consider că am scris suficient despre event-uri. În câteva zile urmează un episodul despre efecte. Întrebări, nelămuriri sau felicitări sunt de aşteptat într-un comment!

PS: rog a mi se scuza eventualele greşeli. Sunt răcit „cobză” şi sunt fericitul posesor a peste 39°C la momentul când scriu aceste rânduri

Poţi încerca toate comenzile de mai sus (exceptând $(document).ready()) în cosolă pe următoarea pagină:

Posturi cu o oarecare legătură:

1. Cum configurezi Join Air de la RDS pe MAC?

• Debugging pentru javascript. Breakpoint-uri, condiţii şi alte chestii drăguţe, nefolositoare în momentul de faţă;
• Profiling. La fel de inutil în momentul de faţă, dar foarte util la scripturile cu probleme, îţi permite să vezi ce funcţie consumă cel mai multe resurse;
• Inspector – Poţi selecta un element din pagină, după care îi poţi modifica atributele şi proprietăţile CSS. De asemenea îţi arată schimbările dinamice. Ceea ce înseamnă că, în cazul în care faci schimbări în cod după încărcarea paginii (exemplu: adaugi o clasă), acestea apar în inspector. Este una din cele mai utile funcţii ale FB;
• Consola – (aproape) Tot ce înseamnă javascript/jQuery poate fi rulat în consolă. Din nou, asta te va scuti de multe refresh-uri

Activarea Firebug

Deoarece activarea FB pentru toate site-urile îngreunează browserul, este recomandat să îl activezi doar unde ai nevoie, după care îl dezactivezi:

După ce bifezi “Console”, “Script”, “Net” şi apeşi pe “Enable [...]“, Firebug este gata de muncă :

Luând unul din exemplele din articolul precedent, comanda

$(‘strong’)

Va returna un obiect cu trei elemente, fiecare fiind selectabile individual, cum poţi vedea în filmul acesta. Cam în acest fel funcţionează consola Firebug.

Spuneam la început că Firebug are şi un inspector ce ne va ajuta să vedem schimbările în cod. După ce am scris în consolă:

$('strong:eq(0)').addClass('rosu');
$('.changeThis').addClass('verde');

Avem rezultatul:

Se observă că primul “strong” a primit clasa “rosu”  iar elementul cu clasa “.changeThis” a primit clasa “verde”. Se pot schimba atributele direct în codul HTML (click/dublu click pe orice atribut) sau proprietăţile din codul CSS.

Acestea fiind spuse, cred că acum avem o introducere super scurtă în utilizarea Firebug, dar mai mult decât suficientă pentru ce vom avea nevoie în această serie de tutoriale. Pe parcurs, dacă va mai fi nevoie, voi mai face adăugiri.

Posturi cu o oarecare legătură:

1. Boot time

Ce este jQuery?

La fel ca Prototype, MooTools, Dojo, jQuery este o librărie javascript ce te scuteşte de dureri (mari) de cap ce ţin de compatibilitate între browsere (cross browser). Ca dimensiune este relativ mică (aprox 20kb dacă este packed&gzipped), ceea ce-l face potrivit pentru majoritatea situaţiilor.

De ce să foloseşti jQuery şi nu altceva?

Pentru că e SIMPLU şi e documentat bine. Prima librărie folosită a fost prototype împreună cu scriptaculous. Pentru că la momentul respectiv nu ştiam mare lucru despre javascript (nu că acum aş ştii ), am trecut obligat-forţat la jQuery deoarece nu găseam un plugin (sau ceva de genul asta ). Dintre toate librăriile cu care am avut ceva tangenţe, documentaţia jQuery mi se pare cea mai bine pusă la punct dintre toate, ceea ce-i conferă un avantaj important. Spre exemplu, am încercat să folosesc MooTools 1.1, dar mi-am cam prins urechile în documentaţia de atunci (bine, nici nu mi-am bătut capul prea mult).

Pe lângă toate acestea, în jurul librăriei s-a strâns o comunitate impresionantă de utilizatori, contribuitori şi… plugin-uri. Plugin-urile sunt mici (sau mari!) scripturi ce extind capabilităţile jQuery (sunt plugin-uri pentru drag & drop, submiterea unui formular prin ajax, galerii de imagini etc).

Ce face jQuery?

jQuery îţi oferă posibilitatea de a îndeplini cu uşurinţă următoarele task-uri:

• Schimbi sau ştergi conţinutul unei pagini întregi sau doar a unei porţiuni din pagină;
• Animaţii;
• Efecte (SlideUp/SlideDown, FadeIn/FadeOut, etc);
• Ajax;
• Adaugi diverse event-uri (click, hover, over, focus etc) cam pe orice element din pagină;
• Reduce la minim codul Javascript din pagină. De multe ori spun că nu ştiu decât jQuery, nu şi Javascript

Ce trebuie să ştiu pentru a folosi jQuery?

Pe scurt, trebuie să cunoşti puţin CSS. Ok, ce legătură are CSS-ul cu Javascript? În mod normal, nu prea are nicio legătură, dar folosind jQuery, treaba stă un pic diferit. Asta deoarece modul de selectare al elementelor este identic cu cel din CSS.

Un selector CSS arată cam aşa:

#header {
 height:100px
}

Acelaşi rezultat îl poţi obţine folosind jQuery:

jQuery('#header').css(height, 100);

Foloseşte firebug. Astfel, vei putea face diverse încercări fără a fi nevoie de modificări ale sursei, salvare, refresh Exemplul 1. Exemplul 2.

Trebuie să scrii jQuery la începutul fiecărei „propoziţii”? Well… În mod normal da. Pentru a păstra compatibilitatea cu alte librării (da, poţi folosi prototype şi jQuery pe aceeaşi pagină!) este recomandat să foloseşti jQuery ca prefix. Altfel, poţi folosi funcţia `$` întâlnită în mai toate librăriile cunoscute (desigur, cu efecte diferite), având acelaşi rezultat:

$('#header').css(height, 100);

Oricum, începător fiind, presupunem că nu vei avea nevoie de mai multe librării.

Selectori

Spuneam mai sus că jQuery are aproximativ aceeaşi sintaxă folosită şi în CSS. Din fericire, este un pic mai evoluată (acceptă cam toate pseudo-clasele implementate în css3!) ceea ce cu siguranţă îţi va face viaţa mai uşoară în multe situaţii. Pentru teste, voi folosi un cod “dummy“, luat de pe html-ipsum.com şi uşor modificat. Tot codul javascript (ca şi codul CSS de altfel) este recomandat să fie într-un fişier extern din două motive importante :

1. Fişierele externe sunt păstrate în cache
2. În cazul în care ai ceva de modificat, nu va trebui să umbli în toate paginile

În codul de mai sus, presupunem că vrem să colorăm tot ce este cu bold în roşu. În CSS:

strong {
 color:red
}

Acelaşi lucru îl putem realiza folosind jQuery:

$('strong').addClass('rosu');

Am folosit o clasă în defavoarea unei proprietăţi CSS deoarece, în cazul în care vrei să schimbi vreun atribut (fie culoare, fie altceva), să nu fie necesară editarea fişierului javascript.

Ok, ţi-am arătat cum selectezi un ID, ţi-am arătat cum selectezi un tag, dar cum selectezi un element cu o anume clasă? Păi… Fix la fel ca în CSS:

$('.changeThis').addClass('verde')

Putem fi ceva mai expliciţi de atât:

$('strong.changeThis').addClass('verde')

Sau chiar:

$('p strong.changeThis').addClass('verde')

Totuşi, în urma unor teste, am ajuns la concluzia că cel mai rapid selector este cel mai simplu (adică primul, unde nu se specifică nimic altceva decât clasa, id-ul sau tag-ul).

În momentul când foloseşti un selector ce nu este #id, tot ce urmează după punct (adică toate comenzile) se aplică tuturor elementelor găsite. Astfel, în primul exemplu, tuturor elementelor strong li se va aplica clasa .rosu. Dar ce facem dacă vrem să modificăm doar un anumit element fără să folosim clase/id-uri? Ne jucăm cu alţi selectori!

Pentru a selecta doar primul strong poţi folosi

$('strong:first')
//sau
$('strong:eq(0)')

Primul exemplu este destul de explicit. Al doilea însă este mai puţin. Este oarecum evident că selectează elementul cu numărul X, dar… de ce ZERO? Cam în orice limbaj de programare, numerotarea începe de la zero. Javascript nu este mai prejos, prin urmare, în cazul în care în pagină sunt cinci elemente strong, numerotarea lor va fi de la 0 la 4. Aşadar, primul este zero. Simplu, nu?

În acelaşi mod te poţi folosi din plin de selectorii ierarhici:

$('ul:eq(0) > li').addClass('red');

Pentru a adăuga o clasă doar copiilor direcţi din prima listă.

Pentru început zic că este suficient. În zilele următoare, în măsura timpului liber, voi scrie despre efecte, event-uri, Ajax şi alte bunătăţuri ce sunt prin jQuery.

Dacă nu ai înţeles sau ceva nu ţi-a ieşit, te invit să laşi un comentariu în care să explici ce şi cum. Accept şi comentarii de felicitare

Posturi cu o oarecare legătură:

1. Boot time

Îi poţi specifica lătimea, are callback, poate afişa conţinut citit prin AJAX şi… Da, e MIC al dracu. 40 linii de cod L-am testat în IE6/IE7/FF2/FF3/Opera 9.5/Safari. Dar foarte probabil să funcţioneze fără probleme şi în alte browsere.

Mai multe detalii AICI. Enjoy!

Posturi cu o oarecare legătură:

1. Sănătate pentru Banca Transilvania!
2. Pentru „scriitorii” de subtitrări
3. Pentru fanii LOST…
4. Quick Tip pentru Yahoo! Messenger
5. Cum configurezi Join Air de la RDS pe MAC?