Guida all'uso di jQuery in JavaScript

E’ una libreria di JavaScript, ne riassume molte funzioni con $( )

utilizzando i selettori CSS per gli elementi. document.getElementById( “mioLink” ) diventa $(“

#mioLink ”)

Trasformare un elemento in un tooltip .tooltip()



Propietà rel in html restringe il campo del tipoDato accettabile

Lista degli eventi disponibili

COLLEGAMENTO AL FILE.html

Una volta scaricate le librerie, vanno collegate al progetto come semplici fogli .css/.js:

esempio: <script src=”../…./…../jquery.1.3.2.min.js” > </script>

Anche l’ordine dei collegamenti è importante:

//CSS pagina

<link href="../Style/st_Main.css" rel="stylesheet">

//jQuery online

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

//jQueryUI scaricato e incluso nel progetto

<link href="../Procedures/_jQuery/ui/jquery-ui-1.9.2.custom/css/JQui/jquery-ui-1.9.2.custom.min.css" rel="stylesheet">

<script type="text/javascript" src="../Procedures/_jQuery/ui/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.min.js"></script>

//JS pagina

<script type="text/javascript" src="../Procedures/procMain.js"> </script>

LA FUNZIONE $ ha molteplici funzioni:

1) SELETTORE OGGETTI:

$(“ .miaClasse ”) $(document.getElementById (“ mioID ”) )

SELETTORI CSS

//tutti i <li> della lista “menu”

$( “ul#menu li” )

//link con classe .bianco

$( “a.bianco” )

//tutti gli elementi

$( “*” )

SELETTORI X ATTRIBUTO

//link che si aprono in una nuova finestra

$( “a[ target = ‘_blank’]” )

//attributo che inizia con un valore

$( “a[ title^ = ‘nuova’]” )

//attributo che finisce con un valore

$( “a[ title$ = ‘nuova’]” )

//attributo che non contiene un valore

$( “a[ title ! = ‘nuova’]” )

//attributi concatenati

$( “a[ title = ‘nuova’][ target=’ _blank ’ ]” )

SELETTORI PSEUDO

// :first-child / :last-child / :only-child – solo elementi che sono figli unici -

$( “#menu : first-child” )

// :nth-child () - parametri EVEN elem.pari, ODD elem.dispari, INDICE posizione nel contenitore a partire da 1 -

$( “div:nth-child(2)” )

// :hidden

$( “div: hidden” )

// :has( ) -specificando un elemento contenuto-

$( “div: has( #menu )” )

// :not ( ) -in base a quello che non sono-

$( “div: not( .colore )” )

// :text - elementi di type=”text” -

$( “ input: text ” )

// :disabled - elementi disabilitati -

$( “ input: disabled ” )

// :checked - elementi checked -

$( “ input: checked ” )

2) CREATORE ELEMENTI DOM:

var DIV = $( “ <div> <p>Esempio di Elemento </p></div> ” );

DIV.addClass (“ classeDIV ”);

DIV.appendTo (“ #contenitore “)

3) LANCIO DELLE FUNZIONI:

$( function() {

alert( “DOM caricato!” )

}); $( function() {…} )

Questa function è utile poiché precede l’evento onLoad()

Di solito viene usata ai fini delle INIZIALIZZAZIONI

METODI DI BASE

.size() / .lenght N° attributi selezionati



1) es. $( “#menu li” ).size() / $( “#menu li” ).lenght

2) .get() prendere un elemento e metterlo in una variabile

 es. var elencoLI = $( “#menu li” ).get()

3) .eq() prendere un elemento e metterlo in una variabile, ne restituisce sempre 1

 es. var Nodo = $( “#nodo” ).eq()

4) .index() indice di posizione del parametro nella selezione

 es. $( “#menu li” ).index( $( “#primo” ) )

5) .each() applicare una funzione su ogni elemento della selezione

 es. $( “ li ” ).each( function() { var id = this.id } )

METODI PER ATTRIBUTI il comportamento varia a seconda del N° di parametri:

1 arg String restituisce VALORE ATTRIBUTO



2 arg String imposta NUOVO VALORE



1 arg String + 1 f imposta NUOVO VALORE in base alla funzione



1 obj fatto di coppie imposta ATTRIBUTI MULTIPLI

 ‘attibuto’=’valore’

.attr ricavare/impostare attributi



1) - Ricavare HREF $(‘ a#mioLink ’).attr (‘href’);



- Impostare nuovo HREF $(‘ a#mioLink ’).attr (‘href’ , ‘http://www.html.it’);



- Impostare nuovo HREF in base ad una f $(‘ a#mioLink ’).attr (‘href’ , function() { … });



- Impostare nuovo HREF e TARGET $(‘ a#mioLink ’).attr ( { “href” : “www.html.it” , “target” : “_blank” } );



.removeattr rimuovere attributi



2) CLASSI

1) ha una data Classe

.hasClass boolean se un elemento





2) aggiungere una Classe all’elemento

.addClass 

3) rimuovere una Classe all’elemento

.removeClass



4) aggiungere Classe se non esiste, togliere in caso contrario

.toggleClass

CONTENUTO

1) trova o imposta il contenuto

.text di un tag





2) trova o imposta il contenuto comprensivo di eventuali tag html

.html

Es <p> testo del <strong> paragrafo </strong> </p>

$(‘p’).text() testo del paragrafo



$(‘p’).html() testo del <strong> paragrafo </strong>



FORM

1) trova o imposta elementi del form

.val() 

TRAVERSING

.filter() restringe la selezione secondo una condizione



1) es. $( “#menu li” ).filter(‘.colore’)

.not() restringe la selezione secondo una condizione che NON si deve verificare



2) es. $( “#menu li” ).not (‘.colore’)

.slice() come quello di js



3) es. $( “#menu li” ).slice( 0,2 ) prende solo PRIMO e SECONDO 0 incluso, 2 non incluso

 

.is() boolean verifica il rispetto della condizione



4) es. $( “#contenitore a” ).each (function() { if ( $(this).is( ‘.external’ ) )

{…….} })

.find() trova elementi CSS all’interno di una lista



5) es. var lista = $( “#menu li” ) lista.find(“a”)

.children() prende solo i diretti figli



6) es. $( “#menu” ).children( “li” )

.parent () prende solo elemento contenitore



7) es. $( “#menu” ).parents( ) -lista dei contenitor