summaryrefslogtreecommitdiffhomepage
path: root/it-it
diff options
context:
space:
mode:
Diffstat (limited to 'it-it')
-rw-r--r--it-it/jquery-it.html.markdown131
1 files changed, 131 insertions, 0 deletions
diff --git a/it-it/jquery-it.html.markdown b/it-it/jquery-it.html.markdown
new file mode 100644
index 00000000..811c5c3a
--- /dev/null
+++ b/it-it/jquery-it.html.markdown
@@ -0,0 +1,131 @@
+---
+category: tool
+tool: jquery
+contributors:
+ - ["Sawyer Charles", "https://github.com/xssc"]
+filename: jquery-it.js
+translators:
+ - ["Ale46", "https://github.com/ale46"]
+lang: it-it
+---
+
+jQuery è una libreria JavaScript che ti aiuta a "fare di più, scrivendo meno". Rende molte attività comuni di JavaScript più facili da scrivere. jQuery è utilizzato da molte grandi aziende e sviluppatori in tutto il mondo. Rende AJAX, gestione degli eventi, manipolazione dei documenti e molto altro, più facile e veloce.
+
+Visto che jQuery è una libreria JavaScript dovresti prima [imparare JavaScript](https://learnxinyminutes.com/docs/javascript/)
+
+```js
+
+
+///////////////////////////////////
+// 1. Selettori
+
+// I selettori in jQuery vengono utilizzati per selezionare un elemento
+var page = $(window); // Seleziona l'intera finestra
+
+// I selettori possono anche essere selettori CSS
+var paragraph = $('p'); // Seleziona tutti gli elementi del paragrafo
+var table1 = $('#table1'); // Seleziona elemento con id 'table1'
+var squares = $('.square'); // Seleziona tutti gli elementi con la classe 'square'
+var square_p = $('p.square') // Seleziona i paragrafi con la classe 'square'
+
+
+///////////////////////////////////
+// 2. Eventi ed effetti
+// jQuery è molto bravo a gestire ciò che accade quando un evento viene attivato
+// Un evento molto comune è l'evento "pronto" sul documento
+// Puoi usare il metodo 'ready' per aspettare che l'elemento abbia finito di caricare
+$(document).ready(function(){
+ // Il codice non verrà eseguito fino a quando il documento non verrà caricato
+});
+// Puoi anche usare funzioni definite
+function onAction() {
+ // Questo viene eseguito quando l'evento viene attivato
+}
+$('#btn').click(onAction); // Invoca onAction al click
+
+// Alcuni altri eventi comuni sono:
+$('#btn').dblclick(onAction); // Doppio click
+$('#btn').hover(onAction); // Al passaggio del mouse
+$('#btn').focus(onAction); // Al focus
+$('#btn').blur(onAction); // Focus perso
+$('#btn').submit(onAction); // Al submit
+$('#btn').select(onAction); // Quando un elemento è selezionato
+$('#btn').keydown(onAction); // Quando un tasto è premuto (ma non rilasciato)
+$('#btn').keyup(onAction); // Quando viene rilasciato un tasto
+$('#btn').keypress(onAction); // Quando viene premuto un tasto
+$('#btn').mousemove(onAction); // Quando il mouse viene spostato
+$('#btn').mouseenter(onAction); // Il mouse entra nell'elemento
+$('#btn').mouseleave(onAction); // Il mouse lascia l'elemento
+
+
+// Questi possono anche innescare l'evento invece di gestirlo
+// semplicemente non passando alcun parametro
+$('#btn').dblclick(); // Innesca il doppio click sull'elemento
+
+// Puoi gestire più eventi mentre usi il selettore solo una volta
+$('#btn').on(
+ {dblclick: myFunction1} // Attivato con doppio clic
+ {blur: myFunction1} // Attivato al blur
+);
+
+// Puoi spostare e nascondere elementi con alcuni metodi di effetto
+$('.table').hide(); // Nascondi gli elementi
+
+// Nota: chiamare una funzione in questi metodi nasconderà comunque l'elemento
+$('.table').hide(function(){
+ // Elemento nascosto quindi funzione eseguita
+});
+
+// È possibile memorizzare selettori in variabili
+var tables = $('.table');
+
+// Alcuni metodi di manipolazione dei documenti di base sono:
+tables.hide(); // Nascondi elementi
+tables.show(); // Mostra elementi
+tables.toggle(); // Cambia lo stato nascondi/mostra
+tables.fadeOut(); // Fades out
+tables.fadeIn(); // Fades in
+tables.fadeToggle(); // Fades in o out
+tables.fadeTo(0.5); // Dissolve in opacità (tra 0 e 1)
+tables.slideUp(); // Scorre verso l'alto
+tables.slideDown(); // Scorre verso il basso
+tables.slideToggle(); // Scorre su o giù
+
+// Tutti i precedenti prendono una velocità (millisecondi) e la funzione di callback
+tables.hide(1000, myFunction); // nasconde l'animazione per 1 secondo quindi esegue la funzione
+
+// fadeTo ha un'opacità richiesta come secondo parametro
+tables.fadeTo(2000, 0.1, myFunction); // esegue in 2 sec. il fade sino ad una opacità di 0.1 opacity e poi la funzione
+
+// Puoi ottenere un effetti più avanzati con il metodo animate
+tables.animate({margin-top:"+=50", height: "100px"}, 500, myFunction);
+// Il metodo animate accetta un oggetto di css e valori con cui terminare,
+// parametri opzionali per affinare l'animazione,
+// e naturalmente la funzione di callback
+
+///////////////////////////////////
+// 3. Manipolazione
+
+// Questi sono simili agli effetti ma possono fare di più
+$('div').addClass('taming-slim-20'); // Aggiunge la classe taming-slim-20 a tutti i div
+
+// Metodi di manipolazione comuni
+$('p').append('Hello world'); // Aggiunge alla fine dell'elemento
+$('p').attr('class'); // Ottiene l'attributo
+$('p').attr('class', 'content'); // Imposta l'attributo
+$('p').hasClass('taming-slim-20'); // Restituisce vero se ha la classe
+$('p').height(); // Ottiene l'altezza dell'elemento o imposta l'altezza
+
+
+// Per molti metodi di manipolazione, ottenere informazioni su un elemento
+// restituirà SOLO il primo elemento corrispondente
+$('p').height(); // Ottiene solo la prima altezza del tag 'p'
+
+// È possibile utilizzare each per scorrere tutti gli elementi
+var heights = [];
+$('p').each(function() {
+ heights.push($(this).height()); // Aggiunge tutte le altezze del tag 'p' all'array
+});
+
+
+```