Guida, tutorial e esempi sulla libreria JQuery

Guida, tutorial e  esempi sulla libreria JQuery

Si definisce la libreria Jquery come

Una libreria Javascript che implementa le caratteristiche fondamentali del linguaggio e permette l’accesso agli elementi DOM tramite l’utilizzo di selettori in uso al CSS3, al fine di ridurre la programmazione e facilitarla

Detta così sembrerebbe che la Jquery sia una delle tante librerie di Javascript, ed in effetti è proprio cois’, ma è anche molto altro ancora , ossia è un’implementazione strutturale che sconvolge totalmente il linguaggio fino a farlo mutare in uno nuovo, ma vedremo tutto passo passo. Intanto il primo è sicuramente quello di scaricare la libreria da jquery e implementarla nella nostra pagina web richiamandola a questo momento siamo alla versione 1.7.4 e quindi potremmo fare nell’head della pagina html

<script type=”text/javascript” src=”jquery-1.7.2.min.js”> </script>

Dove ovviamente il file Javascript deve essere presente nella nostro directory , altrimenti c’è una seconda possibilità ma che francamente vi sconsigliamo ossia quella di includere un CDN (Content Delivery Network), ossia un distributore di librerie in rete che offrono la libreria nel caso vi basterà collegare il tutto ad una delle seguenti librerie

• http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
• http://ajax.aspnetcdn.com/ajax/JQuery/jquery-1.7.2.min.js
• http://code.jquery.com/jquery-1.7.2.min.js

Ma insomma non è che ve le consigliamo in quanto talune volte i server che gestiscono queste pagine possono essere down oppure ci possono essere dei cambiamenti insomma è preferibile caricare la libreria nel vostro server almeno andate nel sicuro, se proprio volete mettete un hotlink in modo che la possiate sfruttare solo voi…Passiamo subito ai selettori

I Selettori CSS delle JQuery

Con jQuery è possibile manipolare il modello a oggetti del documento che rappresenta la pagina visualizzata nel browser utilizzando i selettori CSS

Il modello più semplice di selettore è il seguente

$(‘elemento’)

Per esempio in una normale pagina html troveremo

$(‘div’) oppure $(‘span’)

Vediamo subito come selezionare tramite le classi CSS che rivestono una primaria importanza nell’architettura della soluzione web. In questo caso la sintassi da Utilizzare sarà la seguente

$(‘.class’);
Vediamo un esempio per chiarire meglio il suo funzionamento diciamo che vogliamo sottolineare la scritta sotto questa titolo

<p class=”good”>
Benvenuti
</p>
Per sottolineare dovremmo fare

$(function(){
$(‘.good’).css(‘text-decoration’, ‘underline’);
Mentre nel caso del selettore id cambia sostanziosamente poco in quando si fa le seguente modo

<div id=”content”>
Ciao io sono qua
</div>
E si richiamo con
$(‘#content’);

i modi che si possono fare sono veramente i piu’ disparati nel caso abbiamo vogliamo aggiungere il valore al campo email dobbiamo fare

$’input[name$=ail”]’).val(‘example@mail.com’);
Mentre nel caso volessimo allargare il campo di invio dovremmo fare

$(‘input[value=”Invia”]’).css(‘width’, ‘100px’);

Il Metodo Append

Vediamo ora di fare qualche esempio nel caso abbiamo un form per il trasferimento dei dati . Consideriamo l’idea che vogliamo o modificare gli attributi in input per esempio nel caso volessimo aggiungere delle immagini al metodo radio del form allora dovremmo fare

$(‘input[value!=”(nessuna)”]:radio’).next().append(‘<img src=”imagine.jpg” />’);

Oppure nel caso volessimo individuare il valore pass o altri dovremmo utilizzare il seguente modo

$’input[name^=”pass”]’).val(“secret”);
In questo modo non solo l’abbiamo individuate ma gli abbiamo messo anche l’attributo secret, ma potevamo anche decorarlo o cambiargli colore e cosi via.

Ma la Jquery permette anche l’utilizzo dei cosiddetti selettori gerarchici, vediamo un attimino di comprenderli attraverso degli esempi.
Se scriviamo

$(‘li > span’).addClass(‘hilighted’)

Identifichiamo tutti gli elementi di tipo span che sono contenuti negli elementi di tipo li e li evidenziamo. Se scrviamo

$(‘div + ul’).addClass(‘highlighted’);
vengono evidenziati tutti gli elementi di tipo ul che seguono, allo stesso livello di gerarchia elementi ti tipo div

Invece se scriviamo

$(‘div ~ ul’).addClass(‘higlighted’);

Verranno individuati i primi elementi ul che seguono elementi di tipo div e evidenziati. E’ possibile evidenziare anche elementi multipli ossia dove sia presente un elemento e dove sia presente anche l’altro elemento, basterà la seguente dicitura

$(‘span,divl’).addClass(‘higlighted’);

I Filtri

Affrontiamo adesso un nuovo capitolo della libreria JQuery ossia i Filtri che agiscono su un vastità di elementi allo scopo di ridurre i valori restituiti. Un esempio di Filtro potrebbe essere il seguente

$(‘:button’)
O la sua equivalente

$(’*:button’)

Oppure per esempio se vogliamo e siamo interessati solamente all’input del html scriveremo così
$(’input:button’)
Dove potete vedere abbiamo sostituito all’asterisco la parola input oppure un ‘altra forma ammessa è la seguente

$(‘form input:button’)

Una lista abbastanza completa dei Filtri è la seguente.

• :button elementi input che hanno l’attributo di tipo button
• checkbox elementi di tipo input con attributo checkbox
• :file elementi di tipo input con attributo file
• :password elementi di tipo input con attributo password
• :radio elementi di tipo input con attributo radio
• :submit elementi di tipo input con attributo submit
• :text elementi di tipo input con attributo text
• :image elementi di tipo input con attributo image

Supponiamo di avere del codice html con un table e all’interno del quale nei vari td avere un form compreso i campi radio e di volerli evidenziare, non dovremo fare altro che utilizzare questo codice

$(‘table *:radio’)
 .parent()
 .css(‘border’, ‘2px solid red’);

In questo caso abbiamo colorato di rosso, ma stesso gioco potevamo farlo sostituendo a radio o submit o text etc. etc. Ma il JQuery permette molto di più infatti possiamo filtrare in base anche allo stato e abbiamo i seguenti parametri

• :animated per gli elementi in animazione
• :checked per i pulsanti selezionati
• :disabled per i pulsanti disabilitati
• :enabled il contrario di disabled
• :focus per l’elemento che ha il focus, funzione mutuata tale e quale dal Javascript
• :hidden per gli elementi nascosti
• :selected per gli elementi selezionati

Ad esempio sempre considerando un form dentro un table potremmo avere la necessità di selezionare gli elementi disabilitati e ingrandirli o colorarli di rosso e quindi possiamo fare
$(‘table *.disabled’)
.parent()
.css(‘border’, ‘2px solid red’);

Altri filtri sono in base al contenuto e sono

• :contains() seleziona tuti gli elementi che contengono un testo specificato
• :empty seleziona tutti gli elementi che non hanno figli
• :has() elementi che contengono almeno un elemento che soddisfa la condizione richiesta

Ovviamente questi sono solamente alcuni dei Filtri, in realtà ce ne sono molti altri ma sono talmente tanti e in continua evoluzione che abbiamo preferito evidenziare solamente quelli piu’ importanti.

La Manipolazione dei CSS

Vediamo adesso in questo capitolo come sia possibile manipolare grazie alle JQuery i fogli di stile. La sintassi che si adotta è al seguente

.css( Nome proprietà, valore)
Nella sua forma piu’ semplice oppure tramite l’utilizzo di una funzione invece avremo al seguente sintassi

. Css (Nome proprietà, Junction (inde, vale)

Dove index rappresenta la posizione dell’elemento all’interno dell’insieme individuato dal selettore, facciamo un breve esempio per chiarire

$(‘div:not(#content’).css(‘background-color’,function (index, value) {
If(index >1 ) {
//operazioni
}
Return valore
}
} ;

Ma attraverso la manipolazione dei CSS con le librerie Jquery è anche possibile leggere alcune proprietà degli stessi nel seguente modo

<script>

Var bc =$(‘#content’).css(‘background-color’);

</script>
In questo modo avremo recuperato in bc il valore appunto di background

Altre operazioni che è possibile fare con le JQuery sono le seguenti

• .addClass(nome classe) aggiunge una classe
• .removeClass(nome classe) rimuove una classe
• .hasClass( nome classe ) controlla se la classe è presente.

Ovviamente insieme a queste è presente anche la versione con la function ossia ad esempio se vogliamo rimuovere una classe dovremo fare

.removeClass( function(index, class))
Anche se sinceramente ci sfugge un po’ il suo utilizzo pratico…

Insieme a queste classi standard è presente anche la classe toggle che ha la seguente sintassi
.toggleClass( className)
Indica il concetto di invertire lo stato della funzione che racchiude, ossia aggiunge se manca, rimuove se presente. Ad esempio se abbiamo una serie di div con hilighted e utilizziamo questa funzione

.toggleClass(‘hilighted’);

ovviamente nello script di Javascript e il gioco sarà fatto. Vediamo ora come lavorare con i CSS per ottenere le dimensioni i metodi in questo caso sono

• .height() per l’altezza
• .width() per la larghezza
• .innerHeight() altezza intera
• .innerWidth() larghezza interna elemento
• .outerHeight() altezza esterna dell’elemento
• .outerWidth() larghezza esterna dell’elemento.

Vediamo subito un piccolo esempio per ottenere il valore.

<script>
var content =$(‘#content’);
var valore= content.width();
</script>
Ma non solo in modo analogo è possibile impostare anche l’altezza nel seguente modo

.height(value)
.height(function(index, height))

Ovviamente anche per gli altri elementi. Seguirà una seconda parte.