Was ist der Unterschied zwischen text(), val() und html() in jquery?-js-Tutorial-php.cn

Was ist der Unterschied zwischen text(), val() und html() in jquery?

青灯夜游

Freigeben： 2022-12-30 11:12:06

Original

3093 Leute haben es durchsucht

Der Unterschied zwischen text(), val() und html() in jquery: text() wird für den Zugriff auf den Textinhalt von HTML-Elementen verwendet. html() kann nicht nur für den Zugriff auf den Textinhalt von HTML-Elementen verwendet werden. aber auch Zugriff auf HTML-Inhalte; val() wird nur verwendet, um auf den Inhalt von Eingabeelementen zuzugreifen.

Was ist der Unterschied zwischen text(), val() und html() in jquery?

Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.12.4-Version, Dell G3-Computer.

Gemeinsame Punkte: text(), html() und val() werden zum Speichern und Abrufen des Werts von HTML-Elementen verwendet.

Unterschied:

text() wird verwendet, um auf den Textinhalt von HTML-Elementen zuzugreifen
html() kann nicht nur für den Zugriff auf den Textinhalt von HTML-Elementen verwendet werden, sondern auch für den Zugriff auf HTML-Inhalte
val() Wird verwendet, um auf den Inhalt des Eingabeelements zuzugreifen.

text() Definition und Verwendung

text() Methode Methode legt den Textinhalt des ausgewählten Elements fest oder gibt ihn zurück. Wenn ein Unter-Tag vorhanden ist, Fügen Sie es in das Unter-Tag ein. Der Text wird zusammen zurückgegeben, was dem inneren Text von js entspricht. Gibt nur den Textinhalt innerhalb des Etiketts aus, was mit der innerText-Methode von js identisch ist.

Definition und Verwendung von html()

html()-Methode gibt den Inhalt (inneres HTML) des ausgewählten Elements zurück oder legt ihn fest , einschließlich Tags. Wenn Unter-Tags vorhanden sind, werden das Unter-Tag selbst und der Text innerhalb des Unter-Tags zusammen zurückgegeben.

Entspricht innerHTML von js.Wenn diese Methode keine Parameter festlegt, wird der aktuelle Inhalt des ausgewählten Elements zurückgegeben.

<!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>

Nach dem Login kopieren

Das Ergebnis des Druckens über die Konsole

Drucken Sie den Textinhalt im aktuellen Tag. Wenn ein Untertag vorhanden ist, drucken Sie den Untertag selbst und den Text im Untertag zusammen. Dies ähnelt dem innerHTML von js

Hinweise zur Verwendung von text() und html():

Durch die beiden obigen Beispiele wissen wir, dass Elemente, die im Dokumentobjekt (dom) vorhanden sind, wie z. B. p, ihre Textwerte über text( erhalten können) ) und html() , was passiert also, wenn dieses Element nicht im Dokumentobjekt (dom) existiert, wir aber seinen Textwert über text() und html() erhalten?

Das h1-Element existiert nicht in dom, wir fügen den folgenden Code hinzu:

<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>

Nach dem Login kopieren

Das Folgende ist das Druckergebnis: $('h1').text() druckt eine leere Zeichenfolge, $('h1'), html () gibt undefiniert aus

val() Definition und Verwendung Die Methode

val() gibt den Wert des ausgewählten Elements zurück oder legt ihn fest. Der Wert des

-Elements wird über das Value-Attribut festgelegt. Diese Methode wird hauptsächlich für Eingabeelemente verwendet.

Die Methode wird hauptsächlich verwendet, um den Wert des Formularelements abzurufen.

Wenn diese Methode keine Parameter festlegt, gibt sie den aktuellen Wert des ausgewählten Elements zurück.

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

Nach dem Login kopieren

Drucken der Ergebnisse über die Konsole

val() wird verwendet, um die Daten im Formular auszugeben. Es ist ersichtlich, dass der Text in den p- und span-Tags auch nicht ausgegeben wird Tag-Platzhalter

Es wird auch nicht ausgegeben, daher sollte dieser Wert nur für das Wertattribut des Tags gelten. Wie wäre es also mit dem Festlegen des Werts mit val()? Wir fügen dem einzurichtenden Skript-Tag drei Codezeilen hinzu zwei Eingabefelder und ein Botton-Wert

<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>

Nach dem Login kopieren

Werfen wir einen Blick auf den vom Browser dargestellten Effekt und die HTML-Struktur:

Für das Eingabefeld wird der durch val() festgelegte Wert im Textfeld angezeigt, und sein eigener Wert wurde nicht geändert; für button bedeutet das Festlegen des Werts über val() tatsächlich, dass dem Wertattribut ein Wert zugewiesen wird

Weitere Kenntnisse in Bezug auf die Programmierung finden Sie unter:

Einführung in die Programmierung

! !

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen text(), val() und html() in jquery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!