Quelle est la différence entre text(), val() et html() dans jquery-js tutoriel-php.cn

Quelle est la différence entre text(), val() et html() dans jquery

青灯夜游

Libérer： 2022-12-30 11:12:06

original

3096 Les gens l'ont consulté

La différence entre text(), val() et html() dans jquery : text() est utilisé pour accéder au contenu textuel des éléments html ; html() ne peut pas seulement être utilisé pour accéder au contenu textuel. des éléments html, il peut également être utilisé pour accéder au contenu html ; val() n'est utilisé que pour accéder au contenu des éléments d'entrée.

Quelle est la différence entre text(), val() et html() dans jquery

L'environnement d'exploitation de ce tutoriel : système Windows 7, jquery version 1.12.4, ordinateur Dell G3.

Points communs : text(), html(), val() trois méthodes sont utilisées pour stocker et récupérer la valeur des éléments html.

Différence :

text() est utilisé pour accéder au contenu textuel des éléments HTML
html() peut non seulement être utilisé pour accéder au contenu textuel de Éléments HTML, il peut également être utilisé pour accéder au contenu HTML
val() est utilisé pour accéder au contenu des éléments d'entrée

définition et utilisation de text()

text() La méthode définit ou renvoie le contenu textuel de l'élément sélectionné. S'il existe une sous-balise, le texte de la sous-balise est renvoyé. ensemble, ce qui équivaut au innerText de js

Le code est le suivant

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./js/jquery-1.12.4.js"></script>
    <title>Document</title>
</head>
<body>
    <p id="p1">p有文本内容</p>
    <p id="p2">
        p2内的文本
        <span>span内有文本内容</span>
    </p>
    <input type="text" id="input1" value="这是一个input标签">
    <input type="text" name="" id="input2" placeholder="能成功获取">
    <button id="button1" value="这是一个button标签"></button>
   
 <script>
        console.log($("#p1").text());
        console.log($("#p2").text());
        console.log($("#p2 span").text()) ;
        console.log($("#input1").text());
        console.log($("#input2").text());
        console.log($("#button1").text());
 </script>

</body>
</html>

Copier après la connexion

Le résultat imprimé par console

Il peut on voit que text() ne génère que le contenu du texte dans la balise, et js La méthode innerText est la même que la définition et l'utilisation de

html(). La méthode html() renvoie ou définit le contenu de l'élément sélectionné (HTML interne), y compris les balises. S'il y a des sous-balises, renvoyez la sous-balise elle-même et le texte dans la sous-balise

, qui est équivalent au innerHTML

de js si la méthode. ne définit pas de paramètres, il renvoie le contenu actuel de l'élément sélectionné.

<body>
    <p id="p1">p有文本内容</p>
    <p id="p2">
        p2内的文本
        <span>span内有文本内容</span>
    </p>
    <input type="text" id="input1" value="这是一个input标签">
    <input type="text" name="" id="input2" placeholder="能成功获取">
    <button id="button1" value="这是一个button标签"></button>
    <script>
        console.log($("#p1").html());
        console.log($("#p2").html());
        console.log($("#p2 span").html());
        console.log($("#input1").html());
        console.log($("#input2").html());
        console.log($("#button1").html());
    </script>
</body>

Copier après la connexion

Le résultat imprimé via la console

Imprimez le contenu du texte dans la balise actuelle. S'il y a une sous-balise, combinez la sous-balise. lui-même et Imprimer le texte ensemble

Ceci est similaire à innerHTML de js

Notes sur l'utilisation de text() et html() :

Par Dans les deux exemples ci-dessus, nous savons que l'élément qui existe dans l'objet document (dom), tel que p, peut obtenir sa valeur texte via text() et html() Ensuite, si cet élément n'existe pas dans l'objet document (). dom), mais on passe text() et html() pour obtenir sa valeur texte, que va-t-il se passer ?

L'élément h1 n'existe pas dans dom, on ajoute le code suivant :

console.log($(&#39;h1&#39;)) 
console.log($(&#39;h1&#39;).text()) //空字符串
console.log($(&#39;h1&#39;).html()) //undefined

Copier après la connexion

Voici le résultat de l'impression : $('h1').text() imprime la chaîne vide, $('h1' ),html() imprimer undéfini

val() Définition et utilisation<🎜 Méthode >val() Renvoie ou définit la valeur de l'élément sélectionné. La valeur de l'élément

est définie via l'attribut value. Cette méthode est principalement utilisée pour les éléments d'entrée. La méthode

est principalement utilisée pour obtenir la valeur de l'élément de formulaire

Si cette méthode ne définit pas de paramètres, elle renvoie la valeur actuelle de l'élément sélectionné.

<body>
    <p id="p1">p有文本内容</p>
    <p id="p2">
        p2内的文本
        <span>span内有文本内容</span>
    </p>
    <input type="text" id="input1" value="这是一个input标签1">
    <input type="text" name="" id="input2" value="这是一个input标签2" placeholder="能成功获取">
    <button id="button1" value="这是一个button标签"></button>
    <script>
        console.log($("#p1").val());
        console.log($("#p2").val());
        console.log($("#p2 span").val());
        console.log($("#input1").val());
        console.log($("#input2").val());
        console.log($("#button1").val());
    </script>
</body>

Copier après la connexion

Imprimer les résultats via la console

val() est utilisé pour afficher les données sous le formulaire. Les balises p et span ne sont pas les mêmes. Elles n'ont pas été sorties. J'ai également testé le nouvel espace réservé de balise H5

et elles n'ont pas non plus été sorties, donc cette valeur ne devrait être que pour l'attribut value de la balise <🎜. >

Alors qu'en est-il de la définition de la valeur avec val()

Nous ajoutons trois lignes de code à la balise de script pour définir la valeur de deux zones de saisie et d'un bouton

	$(&#39;#input1&#39;).val(&#39;123&#39;);
	$(&#39;#input2&#39;).val(&#39;123&#39;);
	$(&#39;#button1&#39;).val(&#39;123&#39;);

Copier après la connexion

Allons. jetez un œil à l'effet et à la structure HTML présentés par le navigateur :

Pour la zone de saisie, la valeur définie via val() est affichée dans la zone de texte, et sa la propre valeur n'a pas été modifiée ; pour le bouton, définir la valeur via val() est en fait dans Attribuer une valeur à l'attribut value

Pour plus de connaissances sur la programmation, veuillez visiter :