Come impostare e iniziare a usare jQuery?

Come impostare e iniziare a usare jQuery?
JQuery è una delle librerie Javascript più utilizzate del tempo corrente, JQuery consente ai suoi utenti di svolgere funzioni che normalmente richiedono molte righe di codice con solo poche brevi frasi di JavaScript. Gli sviluppatori di jQuery hanno avvolto importanti funzionalità che uno sviluppatore web richiede abbastanza spesso in diverse funzioni che può quindi implementare semplicemente chiamando la funzione e seguendo una sintassi specifica.

Ma come impostare jQuery nel tuo progetto? Bene, ci sono 3 modi principali per importare jQuery nel tuo progetto. Questi 3 metodi sono:

  • Scarica jQuery e aggiungendolo nel tuo file HTML come script
  • Utilizzando un jQuery ospitato CDN nel tuo progetto
  • Se stai lavorando a un progetto Nodejs, puoi installare jQuery dal NPM

Esaminiamo tutti e tre questi metodi

Metodo 1: download e collegamento di jQuery nel tuo progetto

Il primo e il modo più standard di istituire e utilizzare jQuery è passare al loro sito ufficiale.

Sul sito Web di JQuery, ci sono due diverse versioni disponibili per il download, una delle versioni è nota come "Versione di produzione"E l'altro è noto come"Versione di sviluppo". La principale differenza tra entrambe queste versioni è che quella di produzione è compressa ed è il più adatto per i siti Web dal vivo mentre quello di sviluppo è una versione non compressa per testare anche funzionalità e funzionalità beta appena rilasciate.

Una volta scaricata la versione, sembri adeguato, devi includere il file jQuery nell'HTML con il tag script Perché, alla fine della giornata, JQuery è la biblioteca di JavaScript.

Per questo collegamento usi le seguenti righe di codice:



E con questi ora sei pronto a scrivere il codice jQuery nel tuo sito Web.

Metodo 2: utilizzando un jQuery ospitato CDN nel tuo progetto

CDN sta per la rete di consegna dei contenuti ed è possibile utilizzare jQuery ospitato su una CDN, ad esempio, La CDN di Google. Vai a Google e cerca "JQuery CDN Google" e otterrai un link a JQuery di Google CDN come mostrato di seguito:

Copia questo link e incollalo all'interno del tuo file html sotto il tag script, sembrerà così



L'uso di un jQuery ospitato CDN ha i suoi vantaggi, in primo luogo e il vantaggio principale di usarlo è che la tua jQuery è sempre aggiornata. E in secondo luogo, la maggior parte dei browser si è imbattuto in un jQuery ospitato dalla CDN mentre naviga su Internet, quindi quando il cliente arriva sul tuo sito Web, il loro browser non ha bisogno di scaricare il jQuery in quanto è già presente nella sua memoria cache.

Metodo 3: utilizzando NPM per installare jQuery

JQuery è disponibile anche sulla libreria NPM e quindi può essere installato in un progetto Nodejs utilizzando la seguente riga nel terminale dell'editor di codice:

NPM Installa jQuery

E se stai lavorando su una CLI a base di filo, puoi installare jQuery utilizzando la seguente riga:

Filato Aggiungi jQuery

E questo è tutto su come impostare jQuery, ora puoi scrivere il tuo codice con jQuery incluso al suo interno.

Usando jQuery

Per dimostrare l'uso di jQuery, creare un nuovo file HTML e aggiungere le seguenti righe in quel file:


Sono un campo di testo


Con questi otterrai il seguente output sul browser:

Ora, crea un tag di script e scrivi le seguenti righe jQuery al suo interno per modificare il colore di sfondo del campo di testo:

Con queste righe osserverai il seguente cambiamento nell'output:

Ecco, hai configurato e usato correttamente jQuery.

Conclusione

JQuery è una libreria javascript indispensabile quando si tratta di siti Web di codifica a causa del fatto che questo risparmia tonnellate di tempo per lo sviluppatore. jQuery contiene operazioni usate di frequente per lo sviluppo web che richiedono diverse righe di codice avvolte all'interno di una funzione che può quindi essere utilizzata utilizzando la quantità minima di codice. JQuery può essere incluso all'interno del nostro progetto in tre modi diversi e abbiamo coperto tutti e tre questi modi in questo post.