Easy-Micro


LANGAGE JavaScript
Modifier 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');

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.

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() {
var test = $('a').attr('href');
document.write(test);
});
</script>

Dans la deuxième instruction, la valeur "2em" 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 font-size (ou la créer si elle n'existe pas) de tous les éléments retournés par le sélecteur. La deuxième méthode est donc un setter.

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 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();
et pour afficher ce texte sur l'écran : alert($('p').text());

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

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


Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Samedi 23 février 2019 - Semaine 08 - Saint Lazare (Demain: Saint Modeste)
Aujourd'hui, c'est l'anniversaire de Louis Bertignac (1954-65 ans), musicien français (guitariste du groupe de rock français Téléphone). Autre 23 février: 1468 - Mort de Gutenberg, inventeur de l'imprimerie.
Haut de page Easy-Micro