Feb 172013
 

Questo breve esercizio ha come obiettivo quello di evidenziare una parola all’interno di un testo, selezionando fra i vari tag quello che contiene il nostro elemento target.

Partendo da questo html andremo a colorare il background della parola blue:


<div>Questo è un testo normale.</div>
<div>Questo testo contiene <i>una parola blue</i></div>
<div>Questo testo non verrà colorato</div>

Come prima cosa tramite jQuery selezioneremo il div che contiene la parola blue:


var selected = $('div:contains("blue")');

successivamente si tratterà di separare le singole parole e avvolgere in un tag span, in modo da poter poi applicare il background solo alla parola desisderata


selected.html($.map(selected.html().split(' '), function(n) {
return '<span>' + n + '</span> ';
}).join(''));

Ovvero lavorando sull’html dell’elemento selezionato, facciamo lo split usando come separatore lo spazio, su ogni elemento mettiama un tag span intorno e poi lo riuniamo al nostro codice.

questo punto il gioco è faatto poiché basta applicare la stessa soluzione che abbiamo usato per selezionare ma questa volta solo allo span e quindi applicare il css desiderato:


$('span:contains("blue")').css('background', 'blue');

L’esempio

 

Feb 112013
 

Proviamo a emulare il selttore hover del css con jQuery: nella nostra pagina inseriremo un semplice div al quale cambieremo il background all’hover per poi ripristinare lo stato di partenza.

L’html sarà semplicissimo un solo dive con un minimo css per vederlo nella pagina:


<style>
#box{ width:320px; height:240px; border:1px solid #000;}
</style>

<div id="box"></div>

Gestiamo ora l’hover sul nostro box con appunto il metodo hover(), la prima funzione servirà ad applicare lo stile dell’hover, la seconda funzione ripristinerà la situazione di partenza o in ogni caso lo stato post-hover


$('#box').hover(
function(){$(this).css({'background-color':'#F90'});},
function(){$(this).css({'background-color':'#FFF'});}
);

L’esempio

Feb 092013
 

Anche jQuery ha la possibilità di usare pseudo selettori per selezionare elementi della nostra pagina sui quali poi operare.

Prepariamo un piccolo form per avere il materiale su cui lavorare:


<form id="info" name="info" action="#" method="post">
<input type="text" id="campo1" name="campo1"><br>
<input type="checkbox" id="campo2" name="campo2"><br>
<input type="radio" id="campo3" name="campo3"><br>
<input type="submit" id="campo4" name="campo4"><br>
</form>

Sul campo di testo e sul submit lavoreremo sul css, li selezioneremo con :text che è l’equivalente sintentico di quello che in css è input[type="text"]

e nel secondo caso con submit, il resto è noto:


$(':text').css({'border-color':'#FF0000'})
$(':submit').css({'border-color':'#FF0000'})

Per quanto riguarda invece il il radio e il checkbox: dopo averli selezionati faremo in modo che siano selezionati di default:


$(':radio').prop({'checked':'true'})
$(':checkbox').prop({'checked':'true'})

Il metodo prop() è il metodo specifico che permette di accedere al vaue di una proproietà così come attr() lavora con gli attributi

L’esempio

Feb 052013
 

Possiamo individuare degli elementi presenti all’interno delle nostre pagine usando due metodi particolari di jQuery: il primo è find, il secondo è children. La differenza è data dal “dove” vogliamo andare a cercare.

Prendiamo questa semplice lista html che a sua volta contiene una seconda lista:

<ul id="mialista">
<li>Lista 1.a</li>
<li class="special">Lista 1.b</li>
<li>Lista 1.c</li>
<li>Lista 1.d</li>
<li>
Lista 1.e
<ul>
<li>Lista 2.a</li>
<li class="special">Lista 2.b</li>
<li>Lista 2.c</li>
<li>Lista 2.d</li>
<li>Lista 2.e</li>
</ul>
</li>
</ul>

I secondi elementi di entrambe le liste con tengono la classe special, quando usiamo il metodo find, a partire dalla ul principale, con esso andremo a cercare tutte le classi special contenute, mentre utilizzando childrem sempre con lo stesso selettore agganceremo solo i figli diretti


$(document).ready(function(e) {
$('#mialista').find('.special').css({'background-color':'#FF0000'})
$('#mialista').children('.special').css({'font-weight':'bold'})
});

Quindi due background rossi  e un solo bold

L’esempio

 

Feb 012013
 

Un metodo molto rapido per filtrare elementi presenti nella nostra pagine è usare filter()

Se nella nostra pagina abbiamo una lista di elementi, possiamo filtrare gli elementi pari per esempio

e poi applicare un attributo di stile oppure realizzare qualsiasi operazione sulla selezione:


<script>
$(document).ready(function(e) {
$('li').filter(':odd').css({'background-color':'#FF0000'})
});
</script>
</head>
<body>
<ul>
<li>Primo</li>
<li>Secondo</li>
<li>Terzo</li>
<li>Quarto</li>
<li>Quinto</li>
<li>Sesto</li>
<li>Settimo</li>
</ul>

L’esempio

Jan 302013
 

Quando dobbimao selezionare più elementi in una pagina possiamo procedre con la lista dei selettori oppure usare il metodo add fi jQuery che combina i risultati delle singole query.

Se prendiamo questa pagina html


<body>
<div>Testo del div</div>
<p>Testo del p</p>
<span>Testo del span</span>
<div>Testo del div</div>
<p>Testo del p</p>
<span>Testo del span</span>
</body>

per fare blu lo sfondo ai tag p e span possiamo procedere selezionandoli in questo modo:


$(document).ready(function(e) {
$('p').add('span').css({'background-color':'#FF0000'})
});

Il risultato