Pecciola

Facciamo un passo indietro e, prima di addentrarci nel dettaglio di metodi e variabili, preferisco dedicare un articolo ai selettori, cuore di jQuery, cui solo all’inizio ho dedicato poche righe.

Come ampiamente sottolineato, il cuore di jQuery é l’oggetto $ cui occorre passare, come stringa, il selettore dell’elemento (o degli elementi) da ricercare nel documento.

Ecco che :

$(“.myClass”) indica tutti gli elementi con attributo class pari a “myClass”

Ma, come in un qualsiasi foglio di stile, potrete indicare anche più di un selettore per individuare più elementi :

$(“.myClass, #myId, ul#menu li”) indica tutti gli elementi con attributo class “myClass”, quelli con id pari a “myId” e anche tutti gli elementi lista del menu “menu”

Ma questo non esprime tutto il potenziale jQuery che, oltre al modo appena mostrato per utilizzare anche più selettori contemporaneamente, possiede filtri speciali per snellire il codice e darci una mano nel lavoro.

Selettori di Base

Si tratta, in sostanza, di quanto appena visto, cioè l’uso di selettori semplici sfruttando le combinazioni di tag, classi e id :

$(“a”) indica tutti i link nel documento
$(“a.external”) indica soltanto i link con classe “external”

$(“p”) indica tutti i paragrafi nel documento
$(“p.myClass”) indica soltanto gli elementi <p> il cui valore di classe sia “myClass”

Oppure combinandoli insieme :

$(“a.external”,”p.myClass”)

Selettori Gerarchici

Un’altra possibilità molto interessante e sicuramente sfruttabile sta nel fatto di poter usare selettori gerarchici, ovvero poter ricercare elementi solo dentro altri elementi e non nel totale del documento. Tra i selettori gerarchici vediamo i più utili.

Un selettore gerarchico generico é del tipo : $(“.myClass a”) che sta ad indicare tutti gli elementi-link all’interno dell’elemento con class pari a “myClass”.

Un selettore gerarchico del tipo padre > figlio, invece, é del tipo : $(“ul > li”) che indica solo gli elementi di tipo lista che discendono dal tag ul

Altro selettore interessante é precedente + seguente, dove sono indicati tutti gli elementi che precedono direttamente uno specifico elemento: $(“label + input”) che indica tutti i tag input preceduti da un tag label

Infine, esiste precedente ~ adiacente, che seleziona tutti gli elementi direttamente adiacenti ad un elemento : $(“#myId ~ p”);

Selezionare per Attributi

Prima di passare, ma lo vedremo nella prossima lezioncina, ai filtri per selettori, esiste un’altra modalità per utilizzare i selettori, ovvero selezionare per attributi.

Prendiamo come riferimento il tag a dedicato ai link e prendiamo, ad esempio, l’attributo target che tra i suoi possibili valori può avere _blank, _parent, _self e _top

Qualora volessimo agire solo sui link che si aprono in una finestra diversa dall’originale, il nostro selettore per jQuery sarà del tipo : $(“a[target='_blank']“)

oppure $(“a[target !='_blank']“) nel caso opposto.

Logicamente potremo agire su qualsiasi attributo del tag a (href, title ecc) o di qualsiasi altro tag (label, input ecc) e combinare anche varie selezioni per attributi in un’unica chiamata.

Il quarto appuntamento con jQuery prevede una lezione semplice, ma molto importante poiché si entra davvero nel vivo.

Dopo aver ben approfondito il tema eventi in jQuery, é d’obbligo passare ai metodi e, come per le scorse lezioni, mi soffermerò su uno dei metodi più importanti e sfruttabili per realizzare effetti utili ed interessanti con jQuery, vale a dire toggle()

Metodo Toggle()

Il metodo toggle() accetta uno o più argomenti, ognuno dei quali è rappresentato da una funzione. La sua potenzialità sta nel fatto che, al primo click verrà scatenata la prima funzione, al secondo, la seconda funzione e così via. Chi mastica di programmazione in generale avrà subito pensato al famoso costrutto switch e, in effetti, il concetto é quello.

Come vedrete e capirete con l’esempio, nella realizzazione di effetti con jQuery, questo metodo riveste un’importanza notevole.

Tutto é racchiuso in poche righe perché la sintassi é al seguente :

.toggle(f1,f2,….fn)

Vediamo subito un esempietto banale che utilizza il metodo toggle(). Proviamo a creare una pagina con all’interno due liste di città (italiane e straniere) che appariranno o scompariranno al cliccare sul titolo. Nulla di eccezionale, ma serve intanto a prendere dimestichezza con questo importante metodo.

Eccovi il codice html :

<html>
<head>
<link rel="stylesheet" href="esempio3.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$("#ITCitta").toggle(function() {
$("#cittait").addClass("nascondi");

},
function() {
$("#cittait").removeClass("nascondi");

});

$("#STCitta").toggle(function() {
$("#cittast").addClass("nascondi");

},
function() {
$("#cittast").removeClass("nascondi");

});

});
</script>
</head>
<body>

<div>
<p align="middle"> <img src="jquery.jpg" alt="jQuery" /></p>
<h1 align="middle"> Terzo Esempio jQuery </h1>
<h3 align="middle" id="ITCitta"> Città Italiane : </h3>
<ul id="cittait" class="lista">
<li class="rosso">Roma</li>
<li class="verde">Milano</li>
<li class="giallo">Napoli</li>
</ul>
<h3 align="middle" id="STCitta"> Città Straniere : </h3>
<ul id="cittast" class="lista">
<li class="rosso">Londra</li>
<li class="verde">Parigi</li>
<li class="giallo">Lisbona</li>
</ul>
</div>
</body>
</html>

Potete vedere la demo a questo link. Come già detto in precedenza, il primo click sul link scatena la prima funzione (e in tal si applica la classe “nascondi”), mentre il secondo click la rimuove e le due liste tornano nuovamente visibili.

Il relativo file css (esempio3.css) sarà banalmente :

body{

font-size:medium;
font-style:italic;
font-weight:bold;
color:red;

}

h3 {
width:300px;
border-width:1px;
text-aling:center;

}

.lista {
list-style:none;

}

.nascondi {
display:none;

}

Ho iniziato, anche se può sembrare strano, con un metodo particolare piuttosto che parlare dei metodi di base di jQuery. Mi farò perdonare nella quinta puntata!

Vi aspetto!