1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
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
});
```
|
