jQuery Academy · Leçon

Manipulations du DOM avec jQuery - 1

Manipulations du DOM avec jQuery

Leçon 1 sur 111 étapes

Manipulations du DOM avec jQuery - 1 est une leçon jQuery Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 1. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage jQuery Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours jQuery Academy comprend 1 leçons au total.

Introduction aux méthodes

Bonjour,

Jusqu'à présent, nous avons vu à quoi sert jQuery et comment utiliser le sélecteur.

Voyons maintenant les méthodes qui nous permettent de manipuler le DOM.

méthode text

méthode text()

Nous utilisons la méthode text() pour accéder au contenu d'un élément HTML.

Utilisez $ (selector).text() pour lire le contenu d'un élément.

De plus, la méthode text permet de mettre à jour le contenu d'un élément. Il suffit de transmettre le nouveau contenu à la méthode text en tant qu'argument.

<h1 id="hello">Hello Coddy</h1>		
<h2 id="target"></h2>

<script>
$(document).ready(function(){

/*
With the $ ('# hello') statement, 
we selected the element with hello id 
and set the element's content related
to the text method of this object to 
the variable named result.
*/
var result =  $('#hello').text();

/* 
We find the element with the 
target id in the DOM and assign the value 
of the result variable to the 
text method of this object. 
*/

$('#target').text(result);

/*
As a result, we have assigned 
the value of the h1 element 
to the h2 element.
*/
});
</script>

Question

méthode html

méthode html()

Notre prochaine méthode est html(). 

Comme son nom l'indique, elle renvoie l'élément entier plutôt que le seul contenu de l'élément que nous avons sélectionné.

Définissons ci-dessous un élément HTML exemple.

Deux éléments HTML dont les identifiants sont base et target sont définis. Ensuite, dès que le DOM est chargé. 

L'intégralité du contenu HTML de l'élément base a été copiée et ajoutée à l'élément dont l'identifiant est target

<div id="base">
    <p>Hello Coddy</p>
    <p>I'm p element</p>
  </div>		

<div id="target"></div>

<script>

/* 
Callback will run as son as 
the DOM is loaded
*/
$(document).ready(function(){
     //copy the base element HTML
     var baseHTML =  $('#base').html();
     /* update target element 
     by using baseHTML value
     */
     $('#target').html(baseHTML);
})
</script>

Sélecteur d'attribut

méthode attr()

Nous utilisons les attributs pour définir des comportements supplémentaires pour les éléments HTML.

La plupart du temps, nous pouvons vouloir accéder aux valeurs de ces attributs lorsque nous écrivons notre code JavaScript.

Dans ces cas, la méthode attr est utilisée.

Découvrons cette méthode à l'aide de l'exemple ci-dessous.

<a  href="https://www.coddykit.com"  
       target="_blank"
       title="CoddyKit Web App" class="base">
     Go CoddyKit
</a>		
<br/>
<span id="link-title"></span>

<script>

/*
Callback will run as son 
as the DOM is loaded
*/
$(document).ready(function(){

     //Read link's title attribute
     var linkTitle =  $('a').attr('title');

     /* update target element content 
         by using linkTitle value
     */
     $('#link-title').text(linkTitle);
})
</script>

Attribut

La définition de nouveaux attributs est similaire à l'utilisation des méthodes text() et html() que nous avons vues précédemment.

En transmettant un argument à la méthode attr() utilisée lors de la lecture, nous pouvons définir un nouvel attribut pour l'élément ciblé.

/* 
The target attribute of the element with 
my-link id has been passed the _blank value.
*/
// Mock for Judge0 Node environment
const element = { attr: function(name, value) { console.log(`Setting ${name} to ${value} for #my-link`); } };
const $ = (selector) => element;
$('#my-link').attr('target', '_blank');

removeAttr

removeAttr()

Nous avons appris à ajouter un attribut ;

voyons maintenant comment supprimer un attribut existant.

Pour cela, nous utiliserons la méthode removeAttr().

Examinons notre exemple.

/*
All elements
with tag a have been deleted.
*/
// Simulated DOM for Node.js
const elements = [
  { tag: 'a', target: '_blank' },
  { tag: 'a', target: '_self' },
  { tag: 'p' }
];
elements.forEach(el => {
  if (el.tag === 'a') delete el.target;
});
console.log(JSON.stringify(elements));

méthode val

méthode val()

Les formulaires sont indispensables aux applications web modernes. Nous utiliserons la méthode val() pour lire les données saisies par les utilisateurs dans les éléments du formulaire.


<input type="text" id="name" 
           name="yourname" 
           value="CoddyKit" />
  <p>
   Your name: <span id="target"></span>
 </p>
<script>

/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){

//copy the input elemens value
var yourName =  $('#name').val();

/* update target element 
    text by using yourName value
*/
  $('#target').text(yourName);
})

</script>

Avertissement

Dans notre leçon sur la gestion des événements, nous apprendrons à écouter chaque donnée saisie et à la refléter dans notre élément span.

Informations supplémentaires

Pour mettre à jour la valeur d'un champ de saisie, nous transmettons des arguments à la méthode val, comme vous pouvez vous en douter.

const $ = (selector) => ({
  val: (value) => console.log(`Set ${selector} to ${value}`)
});
$('#name').val('New value')

Félicitations

Félicitations 🎉

Nous avons commencé à apprendre les manipulations du DOM 

Dans la prochaine section, nous continuerons à apprendre les manipulations du DOM avec jQuery.

Manipulations du DOM avec jQuery - 1 — illustration 11
Gratuit pour commencer

Apprends JavaScript avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours
22
Leçons
48

Questions Fréquemment Posées

La leçon « Manipulations du DOM avec jQuery - 1 » est-elle gratuite ?

Oui — le texte complet de « Manipulations du DOM avec jQuery - 1 » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours jQuery Academy, passe à CoddyKit PRO. Le cours jQuery Academy comprend 1 leçons au total.

Qu'est-ce que j'apprendrai dans « Manipulations du DOM avec jQuery - 1 » ?

Manipulations du DOM avec jQuery Tu pratiques jQuery Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer jQuery Academy ?

Aucune expérience préalable n'est requise. jQuery Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 1.

Combien de temps prend la leçon « Manipulations du DOM avec jQuery - 1 » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon jQuery Academy ?

Oui. Chaque leçon jQuery Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

← Retour à jQuery Academy