jQuery è un framework JavaScript che funziona molto velocemente con una dimensione molto piccola del codice della libreria JavaScript. Può facilmente implementare molti effetti di animazione JavaScript operando oggetti DOM, elaborando eventi e gestendo le interazioni Ajax. jQuery può semplificare il codice sorgente JavaScript per migliorare la velocità di sviluppo e le prestazioni di esecuzione del codice JavaScript., In questo articolo, ti dirò come aggiungere il link jQuery sia nel file html che nel file javascript e come usare jQuery per implementare alcune animazioni di base con esempi.
Aggiungi il collegamento jQuery nel file Html.
La prima cosa che devi fare è scaricare il file js della libreria jQuery e aggiungerlo al tuo file html.
- Apri un browser web e vai alla pagina di download del file js della libreria jQuery http://jquery.com/download/. Trova il link per il download del file js della libreria jQuery, fai clic con il pulsante destro del mouse, nell’elenco dei menu a comparsa fai clic su Salva collegamento come menu.,
- Sopra azione salverà il file js libreria jQuery in una cartella locale, è possibile salvarlo in qualsiasi cartella( ad esempio la cartella lib progetto come sotto immagine).
- Successivamente è necessario aggiungere il link jQuery nel file di pagina html come sotto il codice sorgente. Sotto il codice sorgente dovrebbe essere aggiunto nella sezione head del file html di destinazione.,
<script type="text/javascript" src="https://www.dev2qa.com/how-to-append-jquery-link-in-html-correctly-with-examples/./lib/jquery-3.3.1.min.js"></script>
- Sopra il codice sorgente includerà jQuery lib js che viene salvato nella tua macchina locale, non è un modo ottimizzato perché il link jQuery leggerà il file sorgente jQuery dal tuo server Web per ogni richiesta, questo costerà un sacco di utilizzo della larghezza di banda e risorse del computer.
- Un modo migliore per aggiungere il collegamento jQuery nel file html è includere la versione online di jQuery CDN. In questo modo può rendere il processo di append jQuery più veloce e stabile. Questo può anche ridurre l’utilizzo della larghezza di banda del tuo sito web. Di seguito il codice sorgente aggiungerà il collegamento jQuery da jQuery CDN di Google.,
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
- Ora hai imparato come aggiungere il link jQuery in html. Successivamente ti mostrerò come aggiungere il link jQuery nel file javascript.
Aggiungi il collegamento jQuery nel file JavaScript.
Se si aggiunge il collegamento jQuery nel codice sorgente html, è necessario aggiungere sotto il codice in ogni sezione head del file html. Lo svantaggio di questo metodo è che se si desidera utilizzare una nuova versione di jQuery è necessario aggiornare tutti i file html uno per uno manualmente, questo non è un buon metodo.,
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Per risolvere il problema precedente, è possibile aggiungere il collegamento jQuery in un file javascript ( ad esempio include-jquery.js), e quindi includere quel file js nelle pagine html. Quindi, se si desidera utilizzare una nuova versione di jQuery lib, è sufficiente aggiornare include-jquery.file js. Di seguito sono riportati alcuni esempi.
In questo esempio, c’è un collegamento<a> nella pagina html, quando si fa clic sul collegamento, si aprirà una finestra di avviso, quindi il testo del collegamento svanirà. Sotto il video mostra l’effetto.
Tutti gli esempi qui sotto usano test.,file html, contiene solo un collegamento<a>.
<a href="">click this link</a>
2.1 Utilizzare il documento.writeln () Funzione per aggiungere collegamento jQuery nel file JavaScript.
Aggiungi sotto il codice js nel include-jquery.file js, e quindi importare il include-jquery.file js in prova.HTML.
includere-jquery.js
usa-jquery-quando-jquery-è-caricato.js
prova.html
2.2 Aggiungi jQuery Creando un elemento script in un altro file JavaScript.
crea-js-elemento-da-includere-jquery-js-file.js
usa-jquery-quando-jquery-è-caricato.js
prova.,html
<script src="https://www.dev2qa.com/how-to-append-jquery-link-in-html-correctly-with-examples/./create-js-element-to-include-jquery-js-file.js"></script><a href="">click this link</a>
Puoi vedere il test.codice sorgente del file html in Chrome per trovare gli elementi di script aggiunti.
Esempio jQuery.
Questo esempio contiene due file html, hellow-world-alert.html e ciao-mondo-aggiungi-numero.HTML.
3.1 Esempio di avviso jQuery Hello World.
Nel primo esempio, verrà visualizzata una finestra di avviso quando la pagina viene caricata., C’è anche un pulsante con il testo “Welcome to jQuery world” nella pagina, quando si fa clic sul pulsante, mostrerà due finestre di avviso, il testo della prima finestra di avviso è “Fai clic sul pulsante”, il testo della seconda finestra di avviso è il testo originale del pulsante, quindi imposterà il testo del pulsante su “Wish you like jQuery:)” e cambierà il colore del testo e dello sfondo del pulsante.
ciao-mondo-avviso.html
3.2 jQuery Ciao mondo Aggiungere numero di esempio.
Questo esempio utilizza jQuery per impostare lo stile css del tag Html P., Si associa anche l’evento mossa del mouse del tag div, quando il mouse si muove nel tag div, il numero aumenterà.
ciao-mondo-aggiungi-numero.html