Ajouter JQuery en HTML

1. Utiliser le CDN JQuery pour inclure JQuery dans HTML
2. Téléchargez le JQuery et incluez-le dans HTML

Cet article vous guidera dans l’ajout ou l’écriture de code jQuery sur une page HTML.

Utiliser le CDN JQuery pour inclure JQuery dans HTML

JQeury est l’une des bibliothèques JavaScript les plus populaires.

La bibliothèque simplifie beaucoup de travail sur un site Web avec des fonctionnalités telles que la traversée et la manipulation DOM, la manipulation CSS, la gestion des événements, les animations et les appels AJAX. Nous pouvons écrire moins et faire plus en utilisant jQuery, ce qui est le principal avantage.

Nous pouvons effectuer des opérations avec moins de code en utilisant jQuery plutôt que le JavaScript habituel. Maintenant, nous allons aborder comment nous pouvons utiliser jQuery sur une page HTML.

Le moyen le plus courant d’inclure jQuery dans un document HTML consiste à utiliser le réseau de distribution de contenu (CDN). Un CDN est un réseau de serveurs qui fournit le contenu demandé aux utilisateurs finaux en mettant en cache le contenu dans l’emplacement réseau le plus proche de l’utilisateur.

De cette façon, l’utilisateur recevra les données demandées rapidement et avec précision. Nous pouvons obtenir le CDN jQuery à partir de diverses sources telles que Google CDN et Microsoft CDN.

Nous pouvons inclure l’URL jQuery CDN dans la balise script et utiliser jQuery en HTML. Nous pouvons soit écrire le jQuery dans un fichier .js séparé et l’inclure dans le fichier HTML, soit écrire le jQuery dans la balise script.

Tout d’abord, rendez-vous sur le site Web JQuery CDN et choisissez la dernière version stable de jQuery. Pour la démonstration, nous utilisons la version non compressée.

Ensuite, le site Web affichera la balise indiquée ci-dessous.

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

Ensuite, copiez la balise et placez-la dans le fichier HTML. Ensuite, créez une balise p avec l’id text et n’écrivez rien entre les balises.

Sous la balise p, créez un bouton avec l’id button et écrivez le texte Click here dans l’attribut value. La partie HTML est terminée, et maintenant nous allons écrire le jQuery.

Dans une balise script, écrivez la méthode jQuery ready(). Sélectionnez l’identifiant button et appelez la méthode click() à l’intérieur de la méthode.

Encore une fois, dans la méthode click(), sélectionnez l’identifiant text et appelez la méthode html(). Écrivez le texte clicked comme paramètre html().

Dans cette section, nous allons découvrir ces différentes méthodes jQuery. La méthode ready() contient toutes les autres méthodes.

L’autre contenu à l’intérieur de la méthode sera exécuté lorsque le DOM se chargera complètement. De même, la méthode click() s’exécute lorsque l’élément sélectionné est cliqué. La méthode html() définit le contenu de l’élément sélectionné.

Dans l’exemple ci-dessous, un texte apparaîtra indiquant clicked lors du clic sur le bouton. De cette façon, nous pouvons utiliser jQuery dans un document HTML en utilisant le CDN.

Exemple de code :

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

<p id="text"> </p>
<input type='button' id='button' value='Click here' />

<script>
$(document).ready(function(){
 $('#button').click(function(){
 $('#text').html("clicked");
 });
});
</script>

Téléchargez le JQuery et incluez-le dans HTML

L’autre façon d’écrire jQuery en HTML consiste à télécharger le fichier jQuery et à l’inclure dans le fichier HTML.

Nous pouvons télécharger le fichier à partir du lien ici. Nous écrirons le code jQuery en HTML après avoir inclus le fichier .js téléchargé dans la balise script.

Par exemple, téléchargez le fichier jQuery à partir du lien indiqué ci-dessus. Ensuite, dans le fichier HTML, écrivez le chemin du fichier jQuery dans l’attribut src de la balise script.

C’est le seul changement que nous devons apporter à l’exemple de la méthode ci-dessus. Nous utiliserons le même code HTML et jQuery pour la démonstration.

Lorsque nous cliquons sur le bouton, cela se traduira par le texte clicked comme dans l’exemple ci-dessus. De cette façon, nous pouvons télécharger le fichier jQuery et l’inclure dans HTML.

Exemple de code :

<script src="jquery-3.6.0.min.js"></script>
<p id="text"> </p>
<input type='button' id='button' value='Click here' />

<script>
$(document).ready(function(){
 $('#button').click(function(){
 $('#text').html("clicked");
 });
});
</script>