mirror of
https://github.com/adambard/learnxinyminutes-docs.git
synced 2024-11-22 21:52:31 +03:00
[jquery/it-IT] Add italian language for jquery
This commit is contained in:
parent
195c17ab2d
commit
78f6def56f
131
it-it/jquery-it.html.markdown
Normal file
131
it-it/jquery-it.html.markdown
Normal file
@ -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
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
```
|
Loading…
Reference in New Issue
Block a user