[JavaScript] Les bases du jQuery

Hello hello

Dans ce tutoriel, nous allons essayer de voir ensemble les bases du javascript et plus précisément les bases du jQuery.


Pour commencer, il me parait indispensable, avant d'attaquer le javascript d'avoir des connaissances de bases en HTML & CSS.
       
Ensuite, pour pouvoir utiliser du jQuery sur une page web, il faut que la bibliothèque jQuery soit appelée sur ta page. Pour cela, je te conseille de passer par Google qui met à disposition des bibliothèques. Cela te permettra d'avoir toujours une version récente.

A l'heure où j'écris ce tutoriel, c'est cette version que nous allons utiliser :

Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Du coup, sur une page de base HTML, juste avant la balise fermante :

Code:

</body>

tu auras ceci :

Code:


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
    <script>

    ; (function () {
        // Le code javascript sera ici
    })();

    </script>

Il est à noter que sur les forums ForumActifs, la bibliothèque jQuery est appelée par défaut. Pas de manipulation à faire de ce côté
   

Pour s'y retrouver dans notre code, il est possible, tout comme en HTML et CSS d'utiliser des commentaires. En javascript, tu as 2 façons de les écrire :

Code:

// Sur une seule ligne

/* Si tu as du texte à écrire
sur plusieurs lignes, il sera
plus judicieux d'utiliser
cette écrire */

Entrons dans le vif du sujet avec la base de la base

En javscript, on cible comme en css et il nous suffit d'entourer ensuite tout ça par :

Code:

$('XXX')

qui veut dire : je vais appliquer du jquery sur l'élement "XXX"

Supposons que j'ai ce code :

Code:

<div class="postprofile-avatar">
 <a href="/u2">
 <img src="https://i.servimg.com/u/f60/15/82/71/87/avatar10.png" alt="Mäven" style="max-width: 200px; max-height: 600px">
 </a>
</div>

Je ciblerai l'élement "img" de cette façon :

Code:

$('.postprofile-avatar a img')

On peut accéder à n'importe quel attribut d'un élement en utilisant la fonction jQuery :

Code:

.attr('XXX')

qui s'utilise donc comme ça :

Code:

$('element').attr('XXX')

Par exemple, si on reprend notre code précédent, je peux récupérer le alt de l'image en écrivant :

Code:

$('.postprofile-avatar a img').attr('alt');

En plus de récupérer la valeur de l'attribut, tu peux le changer :

Code:

$('balise').attr('XXX', 'valeur');

ce qui rendra dans le html :

Code:

<balise XXX="valeur" />

Imaginons que je veuille remplacer le texte du "alt" par "Ceci est mon nouveau alt.". Il me suffit d'écrire :

Code:

$('.postprofile-avatar a img').attr('alt', 'Ceci est mon nouveau alt.');

En plus les "lire" et de les modifier, on peut en ajouter Le principe est le même que si tu voulais l'éditer, par exemple :
• mon code de départ :

Code:

<element class="ma-classe" id="mon-id">Code de test</element>

• mon js :

Code:

$('element').attr('data-info', 'C\'est un nouvel attribut');

• résultats :

Code:

<element class="ma-classe" id="mon-id" data-info="C'est un nouvel attribut">Code de test</element>

Comme tu peux le voir ici, j'ai écrit \' au lieu de '. Si je ne le faisais pas, le js aurait cru que j'avais refermé mon attribut, un peu comme si tu faisais en html :

Code:

<img src="#" alt="C'est l'image de "pseudo"" />

pour le navigateur, le alt n'est pas :
C'est l'image de "pseudo"
mais
C'est l'image de

et le html généré dans la console sera :

Code:

<img src="#" alt="C'est l'image de " pseudo"" />

ce qui est cracra ^^


On a donc vu qu'on peut ajouter et modifier un attribut. Et bien on peut aussi en supprimer avec cette méthode :

Code:

$('element').removeAttr('XXX');

Toujours dans le cas du départ, suppposons que je veuille supprimer le style de l'image :

Code:

$('.postprofile-avatar a img').removeAttr('style');

Mon nouveau code HTML sera donc :

Code:

<div class="postprofile-avatar">
 <a href="/u2">
 <img src="https://i.servimg.com/u/f60/15/82/71/87/avatar10.png" alt="Mäven">
 </a>
</div>

Même si la class d'un élément est un attribut, en jQuery, il existe une méthode pour la manipuler :

On peut donc :
• en ajouter :

Code:

$('element').addClass('XXX');

• en supprimer :

Code:

$('element').removeClass('XXX');

• vérifier si une classe existe :

Code:

$('element').hasClass('XXX');

J'aimerai ajouter la class "avatar-raleuse" à la balise image du code suivant :

Code:

<div class="postprofile-avatar">
  <a href="/u2">
      <img src="https://i.servimg.com/u/f60/15/82/71/87/avatar10.png" alt="Mäven" style="max-width: 200px; max-height: 600px">
  </a>
</div>

Je vais donc écrire :

Code:

$('.postprofile-avatar a img').addClass('avatar-raleuse');

Toujours sur ce même code, j'aimerai supprimer la classe "postprofile-avatar" de la div :

Code:

$('.postprofile-avatar').removeClass('postprofile-avatar');

     

Les navigateurs web nous donnent la possibilité d'exécuter du javascript dans leur outil de débogage. Pour cela, quand tu es sur ta page html, il te suffit de cliquer sur F12, et d'aller dans l'onglet "console".

Spoiler:

Par exemple, ici, j'ai voulu afficher toutes les images qui était dans une balise "lien" qui a pour attribut "href" "/u2" et qui se trouve dans une div qui a pour class "postprofile-avatar". Je vois tous les éléments s'afficher dans la console.

---

Tu connais à présent les manipulations de bases en jQuery

Si tu as des questions ou remarques, n'hésite pas à nous les faire à la suite de ce tutoriel