Iniziare con jQuery – I selettori

Iniziamo col dire che jQuery è un potentissimo framework, che facilita la vita di ogni sviluppatore web e fornisce potentissime funzioni in pochissime righe di codice.
Iniziamo col dire che per utilizzare jQuery ci vuole una minima conoscenza dei CSS, ma davvero minima, se vi state iniziando a preoccupare non lo fate perchè con un esempio pratico capirete di cosa stiamo parlando.
dobbiamo innanzitutto includere nell’header e cioè prima del tag della pagina jQuery, ovvero il framework vero e proprio, io vi consiglio di utilizzare la versione hostata su jquery.com, in modo da non appesantire il vostro sito
dopodiche saremo pronti per utilizzare il potente framework, non inizieremo con un alert anche perchè sarebbe inutile utilizzare query, ma iniziamo con una semplice scomparsa di un paragrafo.

Il codice completo sotto :

< !DOCTYPE html>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
&lt; p&gt;Questo è il mio primo programma con jQuery&lt; /p&gt;
<script type="text/javascript">// < ![CDATA[
// < ![CDATA[
$("p").click(function () { 
	$(this).hide(); 
});
// ]]></script>

adesso analizziamo il codice :

$("p").click(function () {
	$(this).hide();
});

Diciamo a jQuery che quando clicco su un paragrafo che viene identificato con il tag < p>, esso deve essere nascosto, con “this” lo avvertiamo che non deve nsconderli tutti ma solo quello su cui clicco.
Attenzione però a non commettere un errore comune, il codice da eseguire di jquery, deve essere posizionato sotto, prima della chiusura del tag < /body>, altrimenti non funzionerà il programma.

fate delle prove…una volta testato questo brevissimo script, sostituite questo :

$("p").click(function () {
	$(this).hide();
});

con

<script type="text/javascript">// < ![CDATA[
// < ![CDATA[
$("p").mouseover(function () {
	$(this).append('
 
testo aggiunto
 
');
});
 
$("p").mouseout(function () {
	$(this).html('Questo è il mio primo programma con jQuery');
});
// ]]></script>

In pratica questo semplicissimo esempio, non fà altro che avvertire quando il mouse passa sopra al paragrafo (mouseover), aggiungi del codice html al paragrafo, quando lo tolgo (mouseout), riscrivi il vecchio testo !

In pratica come potete notare jQuery manipola il codice html, grazie a questi benedetti selettori, che in pratica sono degli identificativi, siano essi dei css o del codice html.

Ci vediamo alla seconda parte, ma nel frattempo fate qualche prova ;)

qui trovate il file dell’esempio : http://demo.cristiansannino.it/jQuery-tuts/prima-parte.html