ESEMPI JQUERY
ESEMPIO 1
//:header prende tutti i tag da h1 a h6
//.addClass aggiunge la classe verde
jQuery(':header').addClass('verde');
//li:lt prende i primi 3 elementi li
//.hide li nasconde
//.fadeIn li fa apparire lentamente in 2000 ms
jQuery('li:lt(3)').hide().fadeIn(2000);
//li prende tutti gli elementi li
//.onclick cattura l'evento onclick sugli elementi li e lancia la funzione anonima che rimuove l'elemento cliccato
jQuery('li').on('click', function() {$(this).remove();});
ESEMPIO 2
//li em prende l'elemento em contenuto all'interno dell'elemento li
//.addClass aggiunge la classe verde all'elemento em
jQuery('li em').addClass('verde');
//li.rosso prende tutti gli elementi li con classe rosso
//.addClass aggiunge la classe blu
jQuery('li.rosso').addClass('blu');
ESEMPIO 3
//li[id!="uno"] cattura tutti gli elementi li diversi da uno
//.hide() li nasconde
//.delay() attende 500 ms
//.fadeIn() li fa apparire sfumandoli in 1400 ms
jQuery('li[id!="uno"]').hide().delay(500).fadeIn(1400);
//li:first-child aggancia il primo figlio li
//.addClass aggiunge la classe verde all'elemento
jQuery('li:first-child').addClass('verde');
ESEMPIO 4
//document aggancia l'intero DOM
//.ready attende il completamento della pagina e poi lancia la funzione
jQuery(document).ready(Esegui());
function Esegui()
{
jQuery('li.rosso').addClass('verde');
}
ESEMPIO 5
//ul aggancia l'elemento ul
//.html memorizza tutto il codice html contenuto all'interno del tag ul nella variabile listHTML
var $listHTML = jQuery('ul').html();
//ul aggancia l'elemento ul
//.append() aggiunge il codice HTML memorizzato nella variabile listHTML al tag ul (copia tutti gli elementi li in esso contenuti)
jQuery('ul').append($listHTML);
//li cattura tutti gli elementi li
//.html cattura il codice html contenuto tra il tal li e /li
//il codice viene memorizzato nella variabile
var $listItemHTML = jQuery('li').html();
//li cattura tutti gli elementi li
//.append aggiunge ad ogni elemento li l'italico e il contenuto della variabile
jQuery('li').append($listItemHTML);
//ul aggancia l'elemento ul
//.text cattura il solo testo contenuto nella ul (esclude i tag li)
//memorizza in una variabile il testo
var $listText = jQuery('ul').text();
//ul aggancia l'elemento ul
//.append aggiunge dopo la ul un paragrafo contenente il testo
jQuery('ul').append('p' + $listText + '/p');
ESEMPIO 6
//li:contains cerca all'interno degli elementi li il 2
//poi sostituisce l'intero testo con due
jQuery('li:contains("2")').text('due');
//li#uno aggancia l'elemento con id=uno
//.remove lo elimina
jQuery('li#uno').remove();
ESEMPIO 7
//ul aggancia l'elemento ul
//.before aggiunge prima dell'elemento il paragrafo
jQuery('ul').before('p Paragrafo /p');
//li.rosso aggancia tutti gli elementi li con classe rosso
//.prepend aggiunge la + al testo
jQuery('li.rosso').prepend('++ ');
//crea un nuovo elemento li e lo memorizza in una variabile
var $newListItem = jQuery('li em Nuovo /em Elemento /li');
//li:last aggancia l'ultimo elemento li
//.after aggiunge il nuovo elemento li dopo l'ultimo elemento
jQuery('li:last').after($newListItem);
ESEMPIO 8
//li#tre aggancia l'elemento con id=tre
//.removeClass rimuove la classe rosso dall'elemento
jQuery('li#tre').removeClass('rosso');
//ul aggancia l'elemento ul
//.attr aggiunge l'attributo id=elenco
jQuery('ul').attr('id','elenco');
ESEMPIO 9
//li aggancia TUTTI gli elementi li
//.css imposta le regole dei css
jQuery('li').css('background-color','green').css('color','white');
ESEMPIO 10
//li aggancia TUTTI gli elementi li
//.each esegue una funzione anonima x ciascun elemento li
jQuery('li').each(function()
{
var ids=this.id;
jQuery(this).append('span class="verde"> '+ids+'/span>');
});
ESEMPIO 11
//li prende tutti gli elementi li
//.onclick cattura l'evento onclick sugli elementi li e lancia la funzione anonima che rimuove l'elemento cliccato
jQuery('li').on('click', function()
{
jQuery(this).remove();
});
//li prende tutti gli elementi li
//onmouseover cattura l'evento quando il mouse passa sopra ad un elemento li
jQuery('li').on('mouseover', function(e)
{
jQuery(this).css('color','green');
jQuery(this).append("span> " + e.type +" /span>");
});
//li prende tutti gli elementi li
//onmouseout cattura l'evento quanto il mouse lascia un elemento li
jQuery('li').on('mouseout', function()
{
jQuery(this).css('color','black');
jQuery('li span').remove();
});
ESEMPIO 12
//h2 seleziona l'elemento h2
//.hide lo nasconde
//.slideDown() fa apparire l'elemento a scorrimento
//.slideUp() fa scomparire l'elemento a scorrimento
jQuery('h2').hide().slideDown().slideUp().slideDown().slideUp().slideDown().slideUp().slideDown().slideUp().slideDown().slideUp();
//li seleziona tutti gli elementi li
//.hide li nasconde
//.delay attende 1000 ms
//.fadeIn fa apparire l'elemento lentamente
jQuery('li').hide().delay(1000).fadeIn(1000);
//li seleziona tutti gli elementi li
//.onclick cattura l'evento click sull'elemento li e lancia la funzione anonima
//.fadeOut fa scomparire l'elemento lentamente
jQuery('li').on('click', function()
{
jQuery(this).fadeOut(1000);
});
ESEMPIO 13
//li aggancia tutti gli elementi li
//.onclick attiva l'evento onclick su tutti gli elementi li e lancia la funzione anonima
//this crea un nuovo oggetto li contentnte l'li selezionato
//.animate crea l'animazione (aumenta di 80 il paddingleft per 500 ms) poi al termine rimuove l'elemento
jQuery('li').on('click', function()
{
jQuery(this).animate({paddingLeft:'+=80'}, 500, function()
{
jQuery(this).remove();
});
});
ESEMPIO 14
//memorizzo in una variabile l'oggetto h2
var $h2 = jQuery('h2');
//ul seleziona l'elemento ul
//.hide lo nasconde
jQuery('ul').hide();
//.append aggiunge all'elemento h2 un nuovo elemento a
$h2.append('a class="show"> (clicca qui)/a>');
//.onclick attiva l'evento on click sull'elemento h2 che lancia la funzione
//.next seleziona il fratello successivo dell'elemento h2 cioe' ul
//.fadeIn lo fa apparire lentamente
//.cildren seleziona il figlio che in questo caso sono gli elementi li
//.rosso prende solo gli li con classe rosso
//.addClass aggiunge la classe verde agli elementi li con classe rosso
//.find cerca l'elemento a contenuto in h2
//.fadeOut lo nasconde con dissolvenza
$h2.on('click', function()
{
$h2.next().fadeIn(500).children('.rosso').addClass('verde');
$h2.find('a').fadeOut();
});
ESEMPIO 15
//memorizza nella variabile listitems tutti gli elementi li
var $listItems = jQuery('li');
//.filter filtra gli elementi li e prende l'ultimo elemento con classe rosso
//.removeClass rimuove la classe dall'elemento li selezionato
$listItems.filter('.rosso:last').removeClass('rosso');
//li:not(.rosso) seleziona tutti gli elementi li con classe diversa da rosso
//.addClass aggiunge la classe verde
jQuery('li:not(.rosso)').addClass('verde');
//.has cerca in tutti gli elementi li quello che contiene em
//.addClass aggiunge la classe blu
$listItems.has('em').addClass('blu');
//.each esegue la funzione anonima x tutti gli elementi li
//memorizzo in $this l'oggetto jQuery this
//.is controlla se nell'oggetto li corrente c'e' la classe rosso
//.prepend aggiunge ++ davanti all'elemento
$listItems.each(function()
{
var $this = jQuery(this);
if ($this.is('.rosso'))
{
$this.prepend('++ ');
}
});
//li:contains("3") trova tutti gli li che contengono al loro interno il numero 3
//.append aggiunge il testo tre alla fine dell'elemento li
jQuery('li:contains("3")').append(' tre');
ESEMPIO 16
//li:lt(2) cattura i primi 2 elementi della lista
//.removeClass rimuove la classe rosso
jQuery('li:lt(2)').removeClass('rosso');
//.eq(0) seleziona il primo elemento li quello con indice 0
jQuery('li').eq(0).addClass('verde');
ESEMPIO 17
//memorizzo nelle variabili i 3 oggetti jQuery
var $newItemButton = jQuery('#newItemButton');
var $newItemForm = jQuery('#newItemForm');
var $textInput = jQuery('input:text');
//.show visualizza il pulsante nuovo elemento
$newItemButton.show();
//.hide nasconde la form di inserimento
$newItemForm.hide();
//.onclick cattura l'evento sul pulsante nuovo elemento
//.hide nasconde il pulsante nuovo elemento
//.show fa apparire la form di inserimento
jQuery('#showForm').on('click', function()
{
$newItemButton.hide();
$newItemForm.show();
});
//.onsubmit cattura l'evento del pulsante aggiungi
//.preventDefault fa in modo che non venga lanciato l'evento di default
//.val cattura il valore inserito dall'utente nella casella di testo
//li:last cattura l'ultimo elemento li
//.after aggiunge un nuovo elemento li alla fine della lista
//.hide nasconde la form di inserimento
//.show mostra il bottone nuovo elemento
//.val alla fine azzera il valore della casella di testo
$newItemForm.on('submit', function(e)
{
e.preventDefault();
var newText = $textInput.val();
jQuery('li:last').after('li>' + newText + '/li>');
$newItemForm.hide();
$newItemButton.show();
$textInput.val('');
});
ESEMPIO 18
//cattura l'elemento p e lo memorizza nella variabile $p
var $p = $('#p1');
//.clona crea un clone dell'elemento e lo memorizza nella variabile $clonedQuote
var $clonedQuote = $p.clone();
//.remove elimina l'elemento paragrafo 1
$p.remove();
//.insertAfter inserisce l'elemento clonato dopo h2
$clonedQuote.insertAfter('h2');
//.detach taglia l'elemento con id=uno e lo memorizza nella variabile
var $moveItem = $('#uno').detach();
//.appendTo aggiunge l'elemento tagliato alla fine della lista ul
$moveItem.appendTo('ul');
ESEMPIO 19
//#page cattura l'elemento div page
//.height cattura l'altezza del blocco in px
var listHeight = jQuery('#page').height();
//ul aggancia l'elemento ul
//.append aggiunge un paragrafo alla fine dell'elemento ul
jQuery('ul').append('p>Altezza blocco: ' + listHeight + ' px/p>');
//li aggancia tutti gli li
//.width imposta la larghezza al 50% della dimensione iniziale
jQuery('li').width('50%');
//li#uno cattura l'elemento li uno
//.width imposta la larghezza a 125 px
jQuery('li#uno').width(125);
//li#due cattura l'elemento li due
//.width imposta la larghezza al 75% della dimensione iniziale
jQuery('li#due').width('75%');
ESEMPIO 20
//memorizza nella variabile $window l'elemento window del DOM
var $window = jQuery(window);
//memorizza nella variabile $slideAd il blocco div
var $slideAd = jQuery('#slideAd');
//#footer cattura l'elemento p fine lista
//.offset().top legge l'offset dall'alto
//$window.height() legge l'altezza della pagina in px
var endZone = jQuery('#footer').offset().top - $window.height() - 500;
//.onscroll cattura l'evento scroll dulla finestra window (scorrere fino in fondo)
//.scrollTop = posizione verticale della barra di scorrimento
//.animate crea l'animazione del blocco div che rientra da dx
$window.on('scroll', function()
{
if (endZone < $window.scrollTop())
{
$slideAd.animate({ 'right': '0px' }, 250);
}
else
{
$slideAd.stop(true).animate({ 'right': '-360px' }, 250);
}
});
ESEMPIO 21
//definisco le variabili
var $list, $newItemForm, $newItemButton;
var item = '';
//catturo l'elemento ul
$list = jQuery('ul');
//catturo l'elemento form
$newItemForm = jQuery('#newItemForm');
//catturo il bottone aggiungi
$newItemButton = jQuery('#newItemButton');
//li aggancia tutti gli elementi li
//.hide li nasconde
//.each per ogni elemento attiva una funzione anonima a cui viene passato l'indice dell'elemento
//this cattura li corrente
//.delay attende 450 ms
//.fadeIn fa apparire l'elemento con dissolvenza in ingresso
jQuery('li').hide().each(function(index)
{
jQuery(this).delay(450 * index).fadeIn(1600);
});
//richiama la funzione che aggiorna il contatore elementi
updateCount();
//.show mostra il bottone nuovo elemento
$newItemButton.show();
//.hide nasconde la form di inserimento
$newItemForm.hide();
//onclick cattura l'evento click sul bottone nuovo elemento
//.hide nasconde il bottone nuovo elemento
//.show fa apparire la maschera di inserimento
jQuery('#showForm').on('click', function()
{
$newItemButton.hide();
$newItemForm.show();
});
//on submit attiva l'evento submit sulla form
//.preventDefault disattiva l'evento standard
//input:text cattura il testo inserito
//.val legge il valore
//.append aggiunge un nuovo elemento li alla ul
//updateCount() aggiorna il contatore elementi
//.hide nasconde la form
//.show fa comparire il pulsante Aggiungi
$newItemForm.on('submit', function(e)
{
e.preventDefault();
var text = jQuery('input:text').val();
$list.append('li>' + text + '/li>');
jQuery('input:text').val('');
updateCount();
$newItemForm.hide();
$newItemButton.show();
});
//Evento onclick sull'elemento ul (tutti gli li)
//this cattura li su cui e' stato fatto click
//.hasClass controlla se l'elemento li ha classe complete
//.animate crea l'animazione
//.remove() alla fine dell'animazione, rimuove l'elemento
//.text() cattura il testo dell'elemento
//.append aggiunge l'elemento alla fine della ul
//.hide() lo nasconde
//.fadeIn lo fa apparire lentamente
//updateCount() aggiorna il contatore elementi
$list.on('click', 'li', function()
{
var $this = jQuery(this);
var complete = $this.hasClass('complete');
if (complete === true)
{
$this.animate({opacity:0.0, paddingLeft:'+=180'}, 500, 'swing', function()
{
$this.remove();
});
}
else
{
item = $this.text();
$this.remove();
$list.append('li class=\"complete\">' + item + '/li>').hide().fadeIn(300);
updateCount();
}
});
//Dichiaro la funzione contatore
//li[class!=complete] cattura tutti gli li non completati
//.length conta gli elementi non completati
//#counter cattura l'elemento span conteiner
//.text inserisce nell'elemento conteiner il numero di elementi
function updateCount()
{
var items = jQuery('li[class!=complete]').length;
jQuery('#counter').text(items);
}