Share
I lettori accaniti di Envato Tuts + provengono da una vasta gamma di background in termini di esperienza, cultura e ciò che stanno cercando di imparare. Quando si parla di tecnologia, è facile dare per scontato chi è appena agli inizi, soprattutto se hai fatto qualsiasi tipo di sviluppo per un lungo periodo di tempo.
Detto questo, una delle cose belle di diventare uno sviluppatore è che una volta che hai imparato una lingua e una serie di competenze particolari, è facile tradurle in altre aree di sviluppo.
Nel tentativo di assicurarci di raggiungere il più vasto pubblico possibile, puntiamo a pubblicare contenuti diretti direttamente ai principianti che sono curiosi su una determinata lingua, piattaforma o applicazione.
E in questo articolo, ci concentreremo esclusivamente su jQuery. In particolare, daremo uno sguardo di alto livello a tutto ciò che offre jQuery e come può aiutarci, e rivedremo alcuni dei progetti che sono stati raggiunti anche dalla libreria iniziale.
Scopri JavaScript: la guida completa
Abbiamo creato una guida completa per aiutarti a imparare JavaScript, sia che tu stia appena iniziando come sviluppatore web o che desideri esplorare argomenti più avanzati.
Rilasciato per la prima volta nel 2006 da John Resig, jQuery si è rivelato una libreria JavaScript multipiattaforma che rendeva più facile scrivere soluzioni lato client.
Nel momento in cui è stato rilasciato, è stato particolarmente utile a causa delle incoerenze che esistevano tra le implementazioni di JavaScript in Internet Explorer, Firefox e infine Google Chrome (che non è stato rilasciato fino al 2008)..
Come definito da Wikipedia:
jQuery è una libreria JavaScript multipiattaforma progettata per semplificare lo scripting lato client di HTML. jQuery è la libreria JavaScript più diffusa attualmente in uso, con l'installazione sul 65% dei primi 10 milioni di siti con traffico più elevato sul Web. jQuery è un software open source gratuito concesso in licenza con la licenza MIT.
Inoltre, il sito web di jQuery dice:
jQuery è una libreria JavaScript veloce, piccola e ricca di funzionalità. Rende le cose come attraversamento di documenti HTML e manipolazione, gestione degli eventi, animazione e Ajax molto più semplice con un'API facile da usare che funziona su una moltitudine di browser. Con una combinazione di versatilità ed estensibilità, jQuery ha cambiato il modo in cui milioni di persone scrivono JavaScript.
Ma cosa significa questo per noi sviluppatori? Forse il modo migliore per noi di capire cosa offre tutta la biblioteca è di esaminare ciò che afferma di offrire.
Quando un browser esegue il rendering di una pagina Web, è una rappresentazione visiva di ciò che è noto come DOM (o modello di oggetto del documento). Questo modello può essere modellato concettualmente come una struttura di dati dell'albero in cui vi sono determinati nodi ciascuno con radici e foglie.
Ad esempio, vedi questa immagine come fornita dal Web Step Book:
Quando lavori con jQuery, puoi facilmente attraversare il contenuto del DOM per raggiungere o trovare i nodi, gli elementi o i valori che stai cercando di recuperare.
Questo significa che se stai cercando il testo di a div elemento che ha un ID univoco, è facile da fare.
Accentsconagua
/ ** * Questo codice cerca un div con l'ID di "my unique element" * e quindi lo rimuove dalla vista. * / $ ('div # my-unique-element') .hide ();Se stai cercando di scorrere tutti i campata elementi, puoi farlo anche tu:
/ ** * Questo è il modo di base per configurare un ciclo in jQuery. * Prenderà tutti gli elementi span sulla pagina e poi * ti permetterà di scorrere attraverso di essi. * / $ ('span') .each (function () // Elabora l'elemento span qui);Rivedremo questa particolare funzionalità un po 'di più nella prossima sezione, in quanto mostrerà parte del lavoro aggiuntivo che puoi fare per manipolare la pagina.
Certo, questi esempi sono semplici e cose può diventa più complicato, specialmente quando introduciamo il metodo di concatenamento. Per esempio:
$ excerpt.on ('keydown', function (evt) if ((17 === evt.keyCode || 91 === evt.keyCode) || 86 === evt.keyCode) if (-1 = == $ .inArray (evt.keyCode, keymap)) keymap.push (evt.keyCode);). on ('keyup', function () if (user_has_pasted_content (keymap)) resize_textarea (this) ; keymap = [];);A questo punto, non dovresti sapere cosa sta succedendo con il codice, ma è pensato per mostrarti quanto può essere utile jQuery in determinate situazioni attraverso l'uso delle funzioni di supporto e il concatenamento del metodo.
Basti pensare che la potenza di jQuery risiede nella sua capacità di interrogare il DOM (da cui il nome jQuery) e quindi apportarvi modifiche mediante l'uso di un'API ben documentata (che è piena di esempi su come utilizzare ciascuna funzione).
Si potrebbe obiettare che tutto il resto proviene solo da questa caratteristica. Detto questo, continuiamo a guardare un po 'come appare.
Quando si tratta di manipolare realmente il DOM, jQuery ha Un sacco di funzioni che ci permettono di cambiare ciò che i nostri visitatori vedono.
Alcune di queste funzioni sono semplici, come permetterci di farlo mostrare o nascondere elementi che non sono visibili ogni volta che una pagina viene caricata. Altre funzioni ci permettono di creare nuovi elementi e aggiungere loro a un elemento esistente, o anteporre loro di fronte a un'intera lista.
Se stai cercando di scorrere tutti i campata elementi per aggiungere un attributo di classe a loro, puoi farlo anche tu:
/ ** * Questo è il modo di base per configurare un ciclo in jQuery. * Prenderà tutti gli elementi span nella pagina e poi * aggiungerà un attributo di classe personalizzato. * / $ ('span') .each (function () $ (this) .addClass ('my-custom-class'););Questo a malapena fa scalpore sulla superficie di ciò che la funzionalità di manipolazione del DOM è disponibile in jQuery. Osservando l'API, sotto la sezione Manipolazione, puoi vedere quante opzioni ci sono disponibili (insieme a buoni esempi).
Per dare ulteriori esempi, possiamo anche:
Ricorda che una delle cose che rendono jQuery una soluzione attraente per così tanti sviluppatori è che tutte le funzioni e gli esempi che stiamo guardando in questo articolo sono compatibili con i browser.
Se sei nuovo di zecca per JavaScript, quindi una cosa che è fondamentale per capire come funziona con la pagina che viene visualizzata nel browser web è che risponde a vari eventi.
Cioè, quando un utente fa clic su un elemento, esegue una sequenza di tasti o fa clic con il mouse, il browser genera un segnale corrispondente all'evento che si è verificato. Questo è ciò che ci consente di sfruttare l'interazione dell'utente con il browser.
In particolare, ogni volta che un utente fa qualcosa alla pagina, possiamo rispondere utilizzando un evento personalizzato. Il problema è che non tutti i browser implementano gli eventi nello stesso modo (è per questo che c'è bisogno di una specifica, ma questo è il contenuto di un altro post).
Fortunatamente, jQuery rende tutto più semplice definendo un nome coerente per tutti gli eventi in modo tale che possiamo usare lo stesso nome per un evento a cui stiamo cercando di rispondere e funzionerà su tutti i principali browser.
Quando jQuery è uscito, Flash era ancora relativamente popolare e le animazioni generali sul web non erano completamente morte.
Quando parliamo di animazione nel contesto di jQuery, però, non stiamo parlando dello stesso tipo di effetti o comportamenti che siamo abituati a vedere con la tecnologia precedente. Invece, stiamo parlando di effetti che danno agli utenti un feedback qualcosa è successo sullo schermo. Inoltre, è meno invasivo e può aggiungere un bel senso di stile a una pagina o un'applicazione quando viene utilizzata correttamente (tuttavia, qualsiasi cosa può essere abusata).
È possibile visualizzare l'intera API degli effetti in questa pagina, ma vale la pena notare che gli effetti di jQuery possono variare da manipolazione di dissolvenza in entrata e dissolvenza di elementi o elementi di scorrimento in vista a qualcosa di più complesso come manipolare la coda di effetti registrati sparare contro un elemento.
Certo, quest'ultimo caso presuppone che tu abbia un po 'di esperienza con l'API degli effetti, ma è qualcosa che viene naturalmente dato abbastanza tempo con la libreria e la documentazione.
Se non hai familiarità con Ajax, è essenzialmente un modo in cui una pagina web può effettuare una chiamata al server, gestire la risposta e aggiornare una porzione di una pagina senza dover aggiornare l'intera pagina. Sebbene la tecnologia sia già in circolazione da un po 'di tempo, è ancora qualcosa di veramente interessante e può fornire alcune funzionalità davvero accurate nel contesto di una pagina o di un'applicazione web se utilizzata in modo appropriato ed efficace.
Sebbene il supporto per Ajax non sia così grave come lo era cinque o dieci anni fa, l'implementazione dell'API attraverso i browser può variare leggermente. Ciò significa che abbiamo il compito di scrivere codice Ajax specificamente per un browser fornito da Microsoft, fornito da Google, fornito da Apple, fornito da Chrome e così via.
Almeno, questo è il caso senza jQuery. Grazie al supporto per Ajax, possiamo sfruttare Ajax in molti modi diversi senza dover entrare nelle inconsistenze cross-browser. In realtà, è banalmente facile da gestire OTTENERE e INVIARE richieste pur avendo anche la possibilità di effettuare chiamate molto più avanzate usando il $ .ajax metodo.
Una volta che ti sei abituato ad avere l'API disponibile nel nucleo della tua applicazione oa tua disposizione, è difficile immaginare di non lavorare con esso (o con qualcosa di simile).
Una caratteristica offerta da molti framework e librerie server-side è la possibilità di creare estensioni al corebase principale. Le moderne librerie e framework client-side lo consentono, e jQuery non è diverso.
Supponiamo, ad esempio, di lavorare in una particolare nicchia in cui ti ritrovi a creare la stessa funzionalità per ogni progetto. O se hai un prodotto che stai vendendo e hai un po 'di codice personalizzato che deve essere integrato con jQuery, ma potrebbe richiedere parametri diversi a seconda del progetto.
Cosa fai allora??
Fortunatamente, jQuery supporta i plugin. Ciò significa che noi, come sviluppatori, non solo abbiamo la capacità di attingere a plug-in che altri hanno scritto (alcuni dei quali sono disponibili sul sito web di jQuery, altri sono disponibili su GitHub), ma siamo anche in grado di sviluppare i nostri plugin.
Possiamo quindi riutilizzare questo codice nei nostri progetti o renderli disponibili su siti come GitHub per consentire ad altri di offrire contributi, correzioni, funzionalità e così via.
Sin dal suo inizio, jQuery è diventato più di una semplice libreria JavaScript che ci offre la possibilità di eseguire operazioni sia semplici che potenti in un modo compatibile multipiattaforma.
Oltre alla libreria principale, jQuery ha portato anche a due altri progetti degni di nota che vale la pena menzionare prima di concludere questo articolo. Anche se non esamineremo i dettagli di ciò che ciascun progetto offre, prenderemo una visione ad alto livello di ogni progetto, se non altro per essere consapevoli di ciò che è a nostra disposizione se avessimo bisogno di questo per il lavoro futuro.
Dalla homepage dell'interfaccia utente jQuery:
L'interfaccia utente di jQuery è un set completo di interazioni, effetti, widget e temi dell'interfaccia utente creati sulla libreria JavaScript di jQuery. Sia che tu stia sviluppando applicazioni web altamente interattive o che tu debba semplicemente aggiungere un selettore di date a un controllo di modulo, l'interfaccia utente di jQuery è la scelta perfetta.
Questa libreria è stata pubblicata per la prima volta nel 2007, circa un anno dopo la stessa jQuery. Funziona come una libreria complementare di jQuery in quanto sfrutta la compatibilità multipiattaforma della libreria per aiutare a creare widget che possono essere utilizzati in un sito Web.
Molti dei widget includono funzionalità di uso comune. Per esempio:
Ci sono anche funzioni avanzate come effetti, utilità e interazioni. Tutto ciò che abbiamo trattato finora (oltre a ciò che non abbiamo) include un'ampia varietà di callback, attributi e funzioni che ci permettono di interagire con loro nella misura massima.
Tutte le funzionalità di cui sopra offrono anche vari temi per assicurarsi che si adattano l'aspetto del tuo sito web. Infine, tutte le funzionalità descritte qui e incluse nel sito sono ben documentate.
Dalla homepage di jQuery Mobile:
jQuery Mobile è un sistema di interfaccia utente basato su HTML5 progettato per rendere i siti Web reattivi e le app accessibili su tutti i dispositivi smartphone, tablet e desktop.
Questa libreria è l'introduzione più recente nella famiglia di librerie rilasciata nel 2010 (con l'ultima versione stabile del 2014).
Proprio come la sua controparte UI, offre un'API ben documentata e temi personalizzati che sono l'ideale per i vari dispositivi che il tuo progetto potrebbe avere come target.
Mentre le due librerie precedenti offrono una serie di funzionalità multipiattaforma che ci consentono di scrivere jQuery e widget di accompagnamento in modo relativamente semplice, jQuery Mobile include un framework CSS che ci consente di progettare interfacce utente ideali per la natura del nostro rispettivo progetto.
Il framework include:
Da lì, la libreria offre ciò che ti aspetteresti da un progetto orientato a rendere lo sviluppo web molto più semplice per i vari dispositivi mobili. Questi includono cose come:
Infine, il numero di browser ancora disponibili e utilizzati in natura è elevato. Anche se abbiamo assistito a una diminuzione dell'utilizzo di versioni precedenti di Internet Explorer e dell'adozione più ampia di Chrome, alcuni utenti continuano ad attaccare con i browser più vecchi per una serie di motivi.
A volte, questi utenti si trovano su browser meno recenti a causa della natura della loro intranet aziendale. A volte ha a che fare con i dispositivi mobili e / o telefoni che sono stati assegnati per il loro lavoro. E a volte ha semplicemente a che fare con l'incapacità di aggiornare a qualcosa di meglio.
Non importa, però. jQuery Mobile offre supporto per la maggior parte dei browser e dei sistemi operativi attualmente disponibili. Se non sei sicuro che la piattaforma che stai targeting sia supportata dalla libreria, puoi sempre controllare la pagina di supporto del browser.
Capire cosa è jQuery (e cosa non lo è) e come è correlato a JavaScript è importante per sapere cosa si sta facendo per te e cosa puoi fare quando hai bisogno di lavorare con la libreria.
Come accennato in precedenza, alcuni potrebbero obiettare che è necessario imparare prima JavaScript e poi imparare jQuery; altri potrebbero sostenere che l'apprendimento di jQuery è un ottimo modo per lavorare a ritroso su JavaScript.
In ogni caso, jQuery è una libreria di lunga data nell'economia di JavaScript ed è utilizzata in numerosi progetti molto popolari (come WordPress), in modo da apprenderla ti darà un vantaggio in molti modi diversi.
JavaScript è diventato una delle lingue di fatto di lavorare sul web. Non è senza le sue curve di apprendimento, e ci sono un sacco di quadri e librerie per tenerti occupato, pure. Se stai cercando ulteriori risorse da studiare o da utilizzare nel tuo lavoro, dai un'occhiata a ciò che abbiamo a disposizione sul mercato Envato.
Se ciò non bastasse, c'è un sacco di documentazione e codice open source disponibile per te da recensire e leggere. Ci sono anche plugin ampiamente disponibili e un blog attivo per tenerti d'occhio con tutte le novità che si verificano con lo sviluppo della biblioteca.
Per coloro che sono interessati a JavaScript (in particolare nel contesto di WordPress), sentitevi liberi di seguirmi sul mio blog e / o Twitter su @tommcfarlin. Puoi prendere tutti i miei corsi e tutorial nella pagina del mio profilo, pure.
Non esitare a lasciare qualsiasi domanda o commento nel feed qui sotto e cercherò di rispondere a ciascuno di essi.
