Come abbiamo detto, jQuery può essere pensato come una libreria "seleziona e fai". Abbiamo parlato parecchio della selezione, quindi ora parliamo di alcune azioni. Ricorda che il modello è sostanzialmente simile a questo:
// Select something! $(".something") // Do something! .hide();Piuttosto che lavorare con esempi più teorici, ci spostiamo direttamente in qualcosa di reale. Abbiamo trovato questa penna di Drew Barontini e l'abbiamo biforcuta.
Vedi il modulo della carta di credito della penna di Chris Coyier (@chriscoyier) su CodePen
Nel nostro esempio, abbiamo nascosto il modulo della carta di credito per impostazione predefinita. Quindi abbiamo creato un collegamento su cui puoi fare clic per scorrere verso l'alto e verso il basso il modulo della carta di credito. Noi selezioniamo il collegamento, quindi fare uno slideToggle sul modulo. Seleziona e fai!
Non abbiamo ancora parlato molto degli eventi, ma questa è una parte enorme di jQuery. Un evento è qualcosa come i clic del mouse, la pressione di un tasto, lo scorrimento, ecc. La parte "fai" di "seleziona e fai" si verifica spesso dopo un evento. Non preoccuparti, parleremo molto degli eventi prima che questa serie finisca. Per ora, sappi solo che on () è il modo migliore / standard per associare eventi in jQuery. Bind, che significa "guarda questo evento su questo elemento o insieme di elementi".
Il piano di base:
$("#link-that-toggles").on("click", function() ( $("#thing-to-toggle").slideToggle(); ));Nel nostro esempio, il collegamento era letteralmente un collegamento.
toggle
Il modo in cui i link hash funzionano di default in qualsiasi browser è che la finestra scorrerà verso il basso fino all'elemento con l'ID che corrisponde a quel link hash. A volte va bene. Mi piace come crea una connessione semantica tra quel collegamento e quell'elemento. Quindi, senza JavaScript, il collegamento ha ancora essenzialmente senso (specialmente se lo dai un titolo intelligente).
Ma a volte, quel comportamento di salto del link hash è un peccato. Possiamo prevenirlo in JavaScript usando preventDefault. Come questo:
$("#link-that-toggles").on("click", function(event) ( $("#thing-to-toggle").slideToggle(); event.preventDefault(); ));Ne parleremo di più in arrivo.
Naturalmente, la documentazione di jQuery è una risorsa fantastica per tutti gli aspetti "do" di jQuery (metodi).
Penso che la comprensione di base di questo "seleziona e fai" e degli eventi apre davvero un mondo di comprensione in JavaScript. So che ha fatto per me. Alla fine di questo screencast diamo uno sguardo al design attuale di CSS-Tricks e vediamo dove JavaScript è chiaramente utilizzato per reagire ad alcuni eventi di clic e cambiare l'interfaccia utente. Cose molto simili a ciò che stavamo facendo nella demo precedente. Ad esempio, impostare una classe attiva sugli elementi su cui fai clic, in questo modo:
Guarda la penna d6f7161a5931397b4f24195a315d52f3 di Chris Coyier (@chriscoyier) su CodePen