Easy-Micro

LANGAGE JavaScript
Methodes JQuery
Modifier le contenu d'un élément avec JQuery

Lire (getters) et modifier (setters)

Plutôt que de différencier les méthodes chargées de lire (soit getters, de l'anglais to get qui signifie "obtenir") et de modifier (soit setters, de l'anglais to set qui signifie "définir") les valeurs HTML ou CSS, les concepteurs de jQuery ont choisi de leur donner le même nom. Mais alors, comment les différencier, me direz-vous ? C'est très simple, puisqu'il suffit d'observer les paramètres de la fonction. Raisonnons sur un exemple pour mieux comprendre de quoi il retourne. Observez les deux instructions suivantes :

$('h2').css('font-size');
$('h2').css('font-size','2em');

$('body').css('background-color', 'orange');

Dans la première instruction, aucune valeur n'est précisée. Il est impossible de modifier la valeur de la propriété CSS font-size. La première méthode est donc un getter ; elle retourne la valeur de la propriété font-size.

Dans les deux autres instructions, une valeur est précisée dans les paramètres de la méthode css(). Cette valeur sera utilisée pour mettre à jour la propriété CSS (ou la créer si elle n'existe pas) de tous les éléments retournés par le sélecteur. Les deux autres méthodes sont donc des setters.

Exemple de getter qui récupère et affiche la valeur du premier attribut href d'un lien
<a href="http://api.jquery.com">API jQuery</a>

<script>
      $(function() {
        let test = $('a').attr('href');
        document.write(test);
      });
</script>

Les méthodes setters peuvent se présenter sous trois formes différentes : 
$('#logo').attr('src','logo.gif');
$('#logo').attr({src: 'logo.gif', alt: 'Logo de la société', width: '200px'});
$("a").attr({target:function(){…}});

  1. Affecter la valeur à un attribut
  2. Crée (s'ils n'existent pas) ou modifie (s'ils existent) plusieurs attributs dans l'élément d'identifiant logo
  3. Utilise une fonction JavaScript pour créer ou modifier l'attribut target des balises <a> du document
Source : openclassrooms.com

L'attribut class

Trois méthodes consacrées aux classes vont vous permettre de modifier les classes :
  1. addClass() ajoute une classe dans les éléments sélectionnés
  2. removeClass() supprime (si elle existe) une classe des éléments sélectionnés
  3. toggleClass() accomplit deux actions : si la classe spécifiée n'existe pas dans les éléments sélectionnés, elle y est ajoutée. Si elle existe, elle est supprimée.

Exemple simple :
$('#monidentifiant').addClass('rouge');
Exemple multiple :
$('#monidentifiant').removeClass('vert').addClass('rouge');

text() et html()

text() retourne/modifie la valeur textuelle stockée dans l'élément ;
html() retourne/modifie le code HTML stocké dans l'élément.

Pour récupérer le texte stocké dans les deux paragraphes : 
$('p').text();

Pour afficher ce texte sur l'écran : 
alert($('p').text());

Affiche le code HTML du premier paragraphe 
alert($('p').html());

Changer le contenu du premier paragraphe :
$('p:first').html('<a href="http://www.google.com">Moteur de recherche Google</a>');

Méthodes jQuery dédiées au contenu

  • .html() : remplace le contenu HTML de la page
  • .text() : remplace le texte de la page
  • .replaceWith() : remplace le(s) élément(s) sélectionné(s) entièrement, pas juste le texte ou le HTML à l'intérieur
  • .remove() : supprime les éléments de la page
  • .before() : insère du contenu avant le(s) élément(s) sélectionné(s)
  • .after() : insère du contenu après le(s) élément(s) sélectionné(s)
  • .prepend() : insère du contenu à l'intérieur du/des élément(s) sélectionné(s) (après la balise HTML ouvrante)
  • .append() : insère du contenu à l'intérieur du/des élément(s) sélectionné(s) (avant la balise HTML fermante)
  • .attr() : définit un attribut et sa valeur ou simplement récupère sa valeur
  • .removeAttr() : supprime un attribut, RIP
  • .addClass() : ajoute une nouvelle classe à/aux élément(s) sélectionné(s) (sans remplacer sa classe actuelle)
  • .removeClass() : supprime une classe du/des élément(s) sélectionné(s)
  • .css() : mon préféré. Récupère ou définit les propriétés CSS d'un élément, même plusieurs propriétés à la fois.

Parcourir le DOM

  • .find() : trouve un/des élément(s) correspondant au paramètre dans la sélection actuelle
  • .parent() : accède au parent direct d'un/des élément(s) ou à ses parents si on utilise .parents()
  • .children() : accède aux enfants de(s) élément(s)

Taille et position

  • .height() : hauteur d'un cadre sans les marges intérieures, extérieurs ni les bords
  • .width (): largeur d'un cadre sans les marges intérieures, extérieurs ni les bords
  • .innerHeight() : hauteur en comptant les marges intérieures
  • .innerWidth() : largeur en comptant les marges intérieures
  • .outerHeight() : hauteur en comptant les marges intérieures et les bords
  • .outerWidth() : largeur en comptant les marges intérieures et les bords
  • .outerHeight(true) : même méthode que ci-dessus, mais en envoyant le paramètre true, vous incluez également les marges extérieures.
  • .outerWidth(true) : même méthode que ci-dessus, mais en envoyant le paramètre true, vous incluez également les marges extérieures.

Positionnement

  • .offset() : définit les coordonnées d'un élément relativement au coin en haut à gauche de l'objet document
  • .position() : définit les coordonnées d'un élément relativement à son parent direct, ce qui peut être utile pour positionner des éléments au sein du même élément DOM. Mais vous utiliserez probablement .offset plus souvent.

< Page précédente JAVASCRIPT Page suivante >