Obtenir jQuery/Définir

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

jQuery fournit des méthodes efficaces pour manipuler les éléments HTML et les attributs.

Dans ce chapitre, nous expliquerons comment jQuery obtient et définit le contenu des éléments et les valeurs des attributs.

HTML DOM (Modèle d'objet de document)

Modèle d'objet de documentest généralement appeléDOMest une partie importante de l'interaction du site.

Modèle d'objet de documentReprésente un document HTML affiché dans une fenêtre.

C'est une interface qui permet à jQuery de manipuler le contenu, la structure et le style du site.

Méthode jQuery pour obtenir ou définir le contenu-html(), text() et val()

Avec jQuery, nous pouvons facilement manipuler les éléments HTML.

Nous avons les méthodes jQuery suivantes pour les opérations DOM:

• html()

• text()

• val()

La section suivante vous montrera comment utiliser chaque méthode.

Méthode jQuery html()

jQuery html()Méthode pour obtenir ou définir le contenu de l'élément sélectionné (innerHTML).

L'exemple suivant récupère le contenu du premier paragraphe au clic sur le bouton:

$("button").click(function(){
　　alert($("p").html()));
});

L'exemple suivant change le contenu de tous les paragraphes au clic sur le bouton:

$("button").click(function(){
　　$("p").html("Je veux dire:　<b>Hello　world</b>");
});

Méthode jQuery text()

jQuery text()Méthode pour obtenir ou définir le contenu du texte de l'élément sélectionné (innerHTML).

L'exemple suivant récupère le contenu de tous les paragraphes au clic sur le bouton:

$("button").click(function(){
　　alert($("p").text()));
});

L'exemple suivant change le contenu de tous les paragraphes au clic sur le bouton:

$("button").click(function(){
　　$("p").text("Je veux dire:　Hello　world");
});

Différences entre html() et text()

html()ettext()Les méthodes html() et text() peuvent toutes définir ou obtenir le contenu d'un élément HTML, mais il existe les différences suivantes:

html()：

• Définir ou obtenir le contenu de l'élément sélectionné (Texte+ Balises HTML）

• Lorsque l'on utilise la méthode html()ObtenirQuand il s'agit de contenu, il retourneContenu du premier élément sélectionné

text()：

• Définir ou obtenir le contenu de l'élément sélectionné (Texte uniquement）

• Lorsque l'on utilise la méthode text()ObtenirQuand il s'agit de contenu, il retournetous les éléments sélectionnéscontenu du texte

L'exemple suivant montre la différence entre les méthodes html() et text():

$("#btn1").click(function(){
　　$("p").html("Je veux dire:　<b>Hello　world</b>");
});
$("#btn2").click(function(){
　　$("p").text("Je veux dire:　<b>Hello　world</b>");
});

Méthode jQuery val()

jQuery val()Méthode pour obtenir ou définir la propriété value de l'élément de formulaire sélectionné.

Exemple suivant pour obtenir<input>Valeur du champ :

$("button").click(function(){
　　$("input:text").val();
});

L'exemple suivant configure<input>Valeur du champ :

$("button").click(function(){
　　$("input").val("Hello world");
});

jQuery récupère ou définit les attributs-attr()

jQuery attr()Cette méthode permet de récupérer ou de définir les attributs et les valeurs des éléments sélectionnés.

L'exemple suivant récupère l'image :srcValeur de l'attribut :

$("button").click(function(){
　　$("img").attr("src");
});

L'exemple suivant configure l'image :srcValeur de l'attribut :

$("button").click(function(){
　　$("img").attr("src", "logo_jquery.png");
});

L'exemple suivant configure plusieurs attributs et valeurs :

$("button").click(function(){
　　$("img").attr({
　　　　alt:　"Icône Seagull",
　　　　title:　"Image par Seagull",
　　　　width:　"350px",
　　　　height:　"300px"
　　});
});

Référence HTML de jQuery

Pour une référence complète des méthodes HTML, veuillez visiter notrejQuery HTML / Référence CSS.