Raffaeu (Raffaele Garofalo Blog's)

Le API di JQuery, il cuore.

In questa sezione vediamo come sia possibile lavorare con JQuery suddividendo gli argomenti per azioni e tipologia.

Prima di procedere, dobbiamo avere a disposzione 3 semplici files. Il primo sarà la libreria Javascript di JQuery, la seconda il nostro file Javascript dove andremo a creare le funzioni, il terzo una pagina HTML dove fare gli esperimenti.

Selezione di Oggetti DOM.

Gli oggetti DOM normalmente sono identificati dal loro TAG. Sappiamo quanti possano essere i tag e quanti ne possiamo trovare in una singola pagina. Quindi oltre ai tag abbiamo a disposizione anche l' attributo ID che fornisce un' ulteriore classificazione. Infine abbiamo la classe o le classi CSS, che possono essere assegnate al TAG.

Selezione per ID.

Per selezionare un tag in base al suo ID, basta chiamare la funzione $(#[ID tag]) e usarla come oggetto come nell' esempio sottostante.

 <!-- SEZIONE HTML --//>
<DIV ID="Contenitore">Del Testo</DIV>
<INPUT TYPE="button" onclick="SelezionaId('Contenitore');">

//Sezione Javascript
function SelezionaId(nome) 
{ 
   $("#" + nome).css("border","3px solid black"); 
} 

Alla pressione del pulsante il Div da noi indicato verrà colorato con un Bordo di 3px nero.

Selezione per Tag.

La selezione per tag è molto simile a quella per ID, solamente che in questo caso il prodotipo $(oggetto) va chiamato con il nome del tag senza il cancelletto davanti.

 <!-- SEZIONE HTML --//>
<DIV>Del Testo</DIV>
<INPUT TYPE="button" onclick="SelezionaTag('DIV');">

//Sezione Javascript
function SelezionaTag(nome) 
{ 
   $(nome).css("border","3px solid black"); 
} 

Selezione per Classe CSS.

Questo ultimo selettore ritengo sia il toccasana specialmente nelle situazioni dove vogliamo mostrare un messaggio a video magari precedentemente nascosto proprio con i CSS. In questo caso il parametro per il prototipo di selezione sarà il nome della classe CSS preceduto dal punto.

 <!-- SEZIONE HTML --//>
<DIV Class="Speciale">Del Testo</DIV>
<INPUT TYPE="button" onclick="SelezionaClass('Speciale');">

//Sezione Javascript
function SelezionaClass(nome) 
{ 
   $("." + nome).css("border","3px solid black"); 
} 

Questi sono i principali selettori, che possiamo usare un po' ovunque. Nel caso in cui pero' volessimo iterare tra gli elementi di una pagina come ad esempio tutti i tag P possiamo usare la parola chiave * che in JQuery significa tutto. Ed ottenere un codice simile a questo:

 function ColoraTutto()
{
  $("*").css("border","1px solid black"); 
} 

Altre tipologie di selezione.

Gli altri selettori sono suddivisi per tipologia e li andiamo ad elencare di seguito:

Prima tipologia, gli oggetti nelle forms. Come operare sugli oggetti nelle forms quali textBox, textArea, checkBox e cosi' via.

Le tipologie in tutto sono: per filtro, per visibilità, per contenuti, per attributi. Padri e figli. Trovate una guida dettagliata di come utilizzarli in questa pagina: JQuery selectors.

Una volta ottenuto l' array di oggetti che ci occorre, lo possiamo elaborare in un ciclo for e eseguire le nostre operazioni come nell' esempio:

function controllaText() 
{ 
   //Cerchiamo le text e visualizziamo il loro contenuto
   var arrayText = $(":text"); 
   for(x = 0; x < arrayText.length; x++) 
   { 
      alert(arrayText[x].value); 
   } 
} 

Lavorare con gli attributi.

Un altro grosso lavoro svolto da JQuery è quello di saper elaborare gli oggetti DOM tramite i loro attributi. In questo modo possiamo velocemente aggiungere una classe css, o modificare il testo di oggetto, o assegnare un valore ad una checkbox senza dover conoscere gli esatti nomi degli attributi, visto che nel DOM non sempre il testo di un oggetto si chiama text.

Elaborare il testo.

Con la funzione text(valore) possiamo inserire del testo a piacere in qualsiasi oggetto DOM che abbiamo precedentemente selezionato con il prototipo $(item).

In questo esempio modifichiamo con un' unico attributo text di JQuery il valore di un H3, di un P e di un qualunque oggetto con una classe .rosso.

 <div id="Contenitore"> 
<h3 id="titolo">Gli attributi.</h3> 
<p id="normale">Testo di esempio per questo contenitore.</p> 
<p id="rosso" class="rosso"> Testo in paragrafo con id 'Nascosto'. </p> 
<span> 
<input type="button" onclick="modificaTesto();" value="Seleziona" />  </span> 
</div>

function modificaTesto() 
{ 
   $("#titolo").text("Nuovo Titolo.");
   $("#normale").text("Nuovo testo normale.");
   $(".rosso").text("Nuovo testo rosso."); 
} 

Aggiungere e rimuovere classi CSS.

Un' altra utile funzione è quella di aggiungere o rimuovere classi CSS ai nostri elementi.
In questo modo possiamo mostrare o nascondere un elemento, oppure renderlo rosso per evidenziarlo. E cosi' via.

Mi verrebbe subito da pensare ad un alert da mostrare all' utente prima di un invio ad esempio.

function visualizza(classe) 
{
 $("." + classe).addClass("visi");
 alert($("#" + classe).attr("style")); 
} 

In questo caso la funzione passa il nome della classe del div nascosto. La nuova classe rende l' attributo visibility come visible e noi lo mostriamo a video.

Quindi possiamo accedere agli attributi con il loro nome DOM oppure cambiando la classe CSS direttamente.
Esistono molti altri attributi e metodologie con gli attributi fornite con JQuery. Nella pagina trovate una reference completa. JQuery Attributes.