jQuery - Obtenir du contenu et des attributs


jQuery contient des méthodes puissantes pour modifier et manipuler des éléments et des attributs HTML.


Manipulation DOM jQuery

Une partie très importante de jQuery est la possibilité de manipuler le DOM.

jQuery est livré avec un tas de méthodes liées au DOM qui facilitent l'accès et la manipulation des éléments et des attributs.

DOM = Document Object Model

Le DOM définit une norme d'accès aux documents HTML et XML :

"Le modèle d'objet de document (DOM) du W3C est une interface indépendante de la plate-forme et du langage qui permet aux programmes et aux scripts d'accéder et de mettre à jour dynamiquement le contenu, la structure et style d'un document."


Obtenir le contenu - text(), html() et val()

Trois méthodes jQuery simples mais utiles pour la manipulation du DOM sont :

  • text()- Définit ou renvoie le contenu textuel des éléments sélectionnés
  • html()- Définit ou renvoie le contenu des éléments sélectionnés (y compris le balisage HTML)
  • val()- Définit ou renvoie la valeur des champs de formulaire

L'exemple suivant montre comment obtenir du contenu avec jQuery text()et les html()méthodes :

Exemple

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

L'exemple suivant montre comment obtenir la valeur d'un champ de saisie avec la val()méthode jQuery :

Exemple

$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});


Obtenir des attributs - attr()

La méthode jQuery attr()est utilisée pour obtenir les valeurs des attributs.

L'exemple suivant montre comment obtenir la valeur de l'attribut href dans un lien :

Exemple

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

Le chapitre suivant explique comment définir (modifier) ​​les valeurs de contenu et d'attribut.


Exercices jQuery

Testez-vous avec des exercices

Exercer:

Utilisez une méthode jQuery pour renvoyer le contenu textuel d'un élément <div>.

$("div").();


Référence HTML jQuery

Pour un aperçu complet de toutes les méthodes jQuery HTML, veuillez consulter notre Référence jQuery HTML/CSS .