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
|
---
category: framework
framework: 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
});
```
|
