Catégories à fermer


Aller en bas
Miettes
Miettes
Râleuse
Informations :
► En ligne de 9h à 18h en semaine
Peu présente le reste du temps
----
Idea Viens papoter avec nous sur le discord

Pseudo Discord : Miettes
Messages : 2312

[JavaScript] Les bases du jQuery Empty [JavaScript] Les bases du jQuery

le Mer 18 Sep - 6:22

Javascript

Les bases du jQuery

Hello hello Smile

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

Pré-requis

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>

Idea 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é Smile
   
Des commentaires

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 */

Cibler un élement

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

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>

Arrow Je ciblerai l'élement "img" de cette façon :
Code:
$('.postprofile-avatar a img')

Jouons avec les attributs un élement

Lire un attribut

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')

Arrow 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');

Editer un attribut

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" />

Arrow 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 Smile 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>

Idea 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 ^^

Supprimer un attribut

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');

Arrow 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>

Jouons avec les class un élement

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');

Arrow 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');

Arrow Toujours sur ce même code, j'aimerai supprimer la classe "postprofile-avatar" de la div :
Code:
$('.postprofile-avatar').removeClass('postprofile-avatar');
     
Tester son javascript en "direct"

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:
[JavaScript] Les bases du jQuery Consol10

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 Smile

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

Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum



Le forum a ouvert ses portes le 30 mars 2019.

A l'époque, seules Miettes et Mäven y étaient présentes. A présent, il y a @membres_enregistres@ Tambouilleurs sur le forum. La dernière personne à nous avoir rejoint est @dernier_membre@.

D'ailleurs, les Tambouilleurs sont plutôt bavards. Eh oui, ils ont déjà posté @messages@ messages dont tutoriels et bidules en Libre-service.

Actuellement, il y a @enregistres@ membres connectés,
et @invites@ visiteurs sur La Tambouille

@@membres_connectes?Qui est là ?
@membres_connectes$, @.$Personne n'est en ligne.@@

@@derniers_membres_connectes?Tambouilleurs connectés au cours des 24 dernières heures : @derniers_membres_connectes$, @$Personne n'était là ces dernières heures.@@

Post-It des Râleuses