Appunti jQuery

Tutorial e appunti sono frutto della traduzione di:

• Come iniziare con jQuery - http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
• Tutorial jQuery per designer - http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/

1. Innanzi tutto è necessario includere il framework
2. l'evento ready si occupa di eseguire lo script solo quando gli elementi relativi al DOM sono stati correttametne caricati e quindi disponibili
3. con la notazione $(”.nomeclasse”) seleziono l'elemento desiderato per classe, ID o selettore

4. $(".nomeclasse").click

   individua l'evento onclick

5. la funzione fra le parentesi graffe viene eseguita quando vengono soddisfatte suddette condizioni. Viene applicato l'effetto della libreria all'elemento con classe .panel

$(".panel").slideDown("slow");

prima di inziare a manipolare il DOM con jQuery necessario verificare che il DOM sia effettivamente pronto (e che quindi la pagina sia completamente caricata). Per farlo:

$(document).ready(function() {
// fai qualcosa quando il DOM caricato
});

Per testare il DOM leghiamo un alert a un link in questo modo:

$(document).ready(function() {
   $("a").click(function() {
     alert("Hello world!");
   });
});

Poi nella pagina HTML basta scrivere: <a href=”#”>Link di test</a>

Usando: $("a").click(function() { ...

Abbiamo il vantaggio di evitare di usare onclick nel link separando la struttura HTML dal comportamento (JS) proprio come si separa contenuto da presentazione (CSS).

jQuery fornisce due approcci per selezionare gli elementi.Il primo usa una combinazione di selettori CSS e XPath passata come stringa a un costruttore jQuery (ad es. $(“div > ul a”)). Il secondo metodo utilizza diversi metodi dell'oggetto jQuery. Entrambi gli approcci sono combinabili.

Se voliamo modificare una lista ordinata come questa:

<ol id="orderedlist">
  <li>First element</li>
  <li>Second element</li>
  <li>Third element</li>
</ol>

Scriveremo:

<script type="text/javascript">
$(document).ready(function() {
	$("#orderedlist").addClass("red"); //aggiungiamo una classe a ul con id orderedlist
	$("#orderedlist > li").addClass("blue"); //aggiungiamo le classi blue a tutti i figli li di ul#orderedlist
});
</script>

Ora facciamo qualcosa di pi sofisticato: aggiungiamo e rimuoviamo una classe quando passiamo col mouse sopra l'ultimo <li> di #orderedlist.

Scriviamo:

 $(document).ready(function() {
   $("#orderedlist li:last").hover(function() {
     $(this).addClass("green");
   },function(){
     $(this).removeClass("green");
   });
 });

Ci sono molti selettori simili alla sintassa CSS e xPath in jQuery vedi http://docs.jquery.com/DOM/Traversing/Selectors

Per ogni evento onxxx disponibile in jQuery ne esiste un equivalente. Qui disponibile una lista completa degli eventi disponibili: http://docs.jquery.com/Events .

Un altro esempio:

 $(document).ready(function() {
   $("#orderedlist").find("li").each(function(i) {
     $(this).append( " BAM! " + i );
   });
 });

find() ti permette di cercare i discendenti dell'elemento gi selezionato

$(”#orderedlist”).find(“li”) simile a $(”#orderedlist li”).

each() itera ogni elemento e permette ulteriori elaborazioni. Molti metodi come addClass() usano loro stessi each().

In questo esempio append() usato per inserire del testo alla fine di ogni elemento.

Un altro compito che capita spesso chiamare un metodo su un elemento DOM non “coperto” da jQuery. Ad esempio su di un form che va resettato Scriveremo:

 $(document).ready(function() {
   // use this to reset a single form
   $("#reset").click(function() {
     $("form")[0].reset();
   });
 });

In questo modo verr resettato solo il primo form $(“form”)[0].reset(); se vogliamo resettare tutti i form di una pagina scriveremo:

$(document).ready(function() {
   // use this to reset several forms at once
   $("#reset").click(function() {
     $("form").each(function() {
       this.reset();
     });
   });
 });

Notare che in una funzione each(), this fa riferimento all'elemento attuale. Inoltre notare che la funzione reset() appartiene all'elemento form e non all'oggetto jQuery. Non possibile chiamare semplicemente $(“form”).reset() per resettare tutti i form della pagina. Un ulteriore compito di selezionare solo alcuni elementi di un gruppo di elementi simili o uguali. jQuery mette a disposizione filter() e not() per questi compiti.

Scrivendo:

$(document).ready(function() {
   $("li").not(":has(ul)").css("border", "1px solid black"); 
 });

con $(“li”).not(”:has(ul)”) vengono prima selezionati tutti gli li poi vengono eliminati dalla selezione tutti gli li che hanno come figli un ul. Ai rimenenti viene applicato uno stile in linea con .css(“proprietà”,”valore”)

con la notazione [espressione] possibile filtrare per attributi. Ad esempio scrivendo:

	$(document).ready(function() {
	$("a[@name]").css("color","red");
	});

Si applicherà color:red a tutti i link che hanno un attributo “name”. Spesso ecessario selezionare i link in base al valore dell'attributo href. Per confrontare solo una parte del valore si pu usare “*=” al posto di ”=”.

Si scriverà:

 $(document).ready(function() {
   $("a[@href*=/content/gallery]").click(function() {
     // do something with all links that point somewhere to /content/gallery
   });
 });

Ci sono poi situazioni in cui utile selezionare l'elemento precedente o quello successivo Ad esempio scrivendo:

  $(document).ready(function() {
   $('#faq').find('dd').hide().end().find('dt').click(function() {
     $(this).next().slideToggle();
   });
 });

E poi nel body avremo:

<dl id="faq">
  <dt>What shouldn't I do to the bird?</dt>
  <dd>Never use oils or lotions which contain oils on your bird. They gunk up the feathers. Never try to treat a fracture at home.</dd>
  <dt>My bird is healthy. I don't need to go to a vet, do I?</dt>
  <dd>Schedul bird's health and your peace of mind will be worth it.</dd>
  <dt>My bird's leg is being rubbed raw by the leg band. Can I take it off?</dt>
  <dd>No. Don't attempt this, especially if the leg is broken or swollen. The vet to remove the band, and deal with whatever injury maybe lurking under the banded area.</dd>
  <dt>How do I pull a broken blood feather?</dt>
  <dd>This is probably the most common mishap. The remedy is simple--yank! It's most easily done</dd>
</dl>

Prima viene cercata la lista di definizione con id uguale a faq e vengono nascosti con hide().

hide() nasconde le selezioni con uno stile in linea (display:none). end() permette di proseguire il concatenamento disabilitando il find('dd') per ci che sta a destra, questo permette di effettuare una nuova ricerca. Questa volta per dt. Si seleziona dt e gli si collega un evento che applica un animazione ( slideToggle() ) all'elemento immediatamente successivo a un elemento “dt”, in questo caso “dd” (precedentemente nascosto).

Se è necessario andare a selezionare l'elemento padre si può usare parents(), specificando quale elemento padre. Se non specificato tutti gli elementi in su nella gerarchia vengono selezionati.

 $(document).ready(function(){
   $("a").hover(function(){
     $(this).parents("p").addClass("highlight");
   },function(){
     $(this).parents("p").removeClass("highlight");
   });
 });

Si vuole realizzare uno slide panel come quello in questa demo: http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html

Quando l'elemento <a> con la classe “btn-slide” è cliccato viene avviata la funzione che richiama su #panel l'effetto slideToggle e viene applicata la classe “active” all'elemento <a> che si occupa di cambiare la posizione dell'immagine di background e visualizzare la freccia verso l'alto.

$(document).ready(function(){
 
	$(".btn-slide").click(function(){
	  $("#panel").slideToggle("slow");
	  $(this).toggleClass("active");
	});
 
});

Nell'esempio successivo viene ottenuto un semplice effetto fading su di un box alla pressione di un immagine come in questo demo: http://www.webdesignerwall.com/demo/jquery/simple-disappear.html

Quando l'immagine con la classe “delete” è cliccata l'elemento padre con la classe “pane” viene selezionato. Il metodo animate() permette di applicare un animazione dell'opacità che verrà decrementata lentamente sino a 0.

$(document).ready(function(){
 
	$(".pane .delete").click(function(){
	  $(this).parents(".pane").animate({ opacity: "hide" }, "slow");
	});
 
});