suchen

Heim >Web-Frontend >js-Tutorial >Eine kurze Analyse der Unterschiede zwischen html(), text() und val() in JQuery_jquery

Eine kurze Analyse der Unterschiede zwischen html(), text() und val() in JQuery_jquery

WBOY
WBOYOriginal
2016-05-16 16:38:091408Durchsuche

1.HTML

html(): Ruft den HTML-Inhalt des ersten passenden Elements ab. Diese Funktion kann nicht mit XML-Dokumenten verwendet werden. Kann aber für XHTML-Dokumente verwendet werden

html(val): Legen Sie den HTML-Inhalt jedes passenden Elements fest. Diese Funktion kann nicht mit XML-Dokumenten verwendet werden. Es kann aber für XHTML-Dokumente verwendet werden.

2.TEXT

text(): Den Inhalt aller passenden Elemente abrufen.

Das Ergebnis ist der Text, der sich aus den in allen passenden Elementen enthaltenen Textinhalten zusammensetzt. Diese Methode funktioniert sowohl für HTML- als auch für XML-Dokumente.

text(val): Legt den Textinhalt aller übereinstimmenden Elemente fest

Ähnlich wie html(), kodiert jedoch HTML (ersetzen Sie „f149dc6bf831fc1a1cb4bb71ef737d5a“ durch entsprechende HTML-Entitäten).

3.VAL

val(): Ermittelt den aktuellen Wert des ersten passenden Elements.

val(val): Legen Sie den Wert jedes passenden Elements fest.

Der obige Inhalt wurde aus dem JQuery-Hilfedokument kopiert, sodass ich nicht zu viel Unsinn mache. Hier sind einige Übungen, die ich gemacht habe. Der Code lautet wie folgt:

Während der Übungen habe ich einen weiteren Unterschied zwischen HTML und Text entdeckt

Wenn

html() den Inhalt eines Elements entfernt, kann auch das Format unter dem ausgewählten Element abgerufen werden.

Zum Beispiel: 17670b365f245f4926c7f388552cd260a4b561c25d9afb9ac8dc4d70affff4195a8028ccc7a7e27417bff9f05adf5932Weniger schreiben, mehr tun72ac96585ae54b6ae11f849d2649d9e60d36329ec37a2cc24d42c7229b69747a16b28748ea4df4d9c2150843fecfba68

Wenn wir var strHTML = $("#divShow").html(); verwenden, um es zu erhalten,

Das Ergebnis ist:a4b561c25d9afb9ac8dc4d70affff4195a8028ccc7a7e27417bff9f05adf5932Weniger schreiben, mehr tun72ac96585ae54b6ae11f849d2649d9e60d36329ec37a2cc24d42c7229b69747a

Wenn wir var strHTML2 = $("#divShow b i").html(); verwenden, um es zu bekommen

Das Ergebnis ist „Weniger schreiben, mehr tun“

Und Text hat nicht die erste Situation,

Wenn wir var strText = $("#divShow").text();

Das Ergebnis ist „Weniger schreiben, mehr tun“

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <base href="<%=basePath%>">
 <script src="js/jquery.js" type="text/javascript"></script>
  <!--
  <script src="http://code.jquery.com/jquery-latest.js"></script>
   -->
  <title> 获取或设置元素的内容</title>
  <style type="text/css">
    body{font-size:15px;text-align:center}
    div{border:solid 0px #666;padding:5px;width:220px;margin:5px}
  </style>
  <script type="text/javascript">
    $(function() {
      var strHTML = $("#divShow").html();// 获取HTML 内容(包含div下面的两个格式)
      var strHTML2 = $("#divShow b i").html(); //获取HTML内容
      var strHTML3 = $("div").html();
      var strText = $("#divShow").text();// 获取文本内容
      var strText2 = $("div").text();
     
      $("#divHTML").html(strHTML);// 设置HTML 内容
      $("#divHTML2").html(strHTML2); //设置HTML内容
      $("#divHTML3").html(strHTML3); //设置HTML内容
      $("p").html(strHTML);
     
      $("#divText").text(strText);// 设置文本内容
      $("#divText2").text(strText2);// 设置文本内容
      $("a").text(strText);
     
      $("select").change(function() { // 设置列表框change 事件
       // 获取列表框所选中的全部选项的值
       alert($("select").val());
       var strSel = $("select").val().join(",");
       $("input").val(strSel); // 显示列表框所选中的全部选项的值
      })
    })
  </script>
 </head>
 <body>
  <table border="1" bordercolor="#A9A9A9" cellspacing="0">
  <tr><td>******************************</td><td>*******************************************</td></tr>
  <tr>
  <td><div id="divShow"><b><i>Write Less Do More</i></b></div></td>
    <td>这是原内容</td>
  </tr>
  <tr>
  <td><div id="divShow"><b><i>Write XXXX Do XXXX</i></b></div></td>
    <td>这是原内容</td>
  </tr>
<tr><td>******************************</td><td>*******************************************</td></tr>
  <tr>
    <td><div id="divHTML">1</div></td>
    <td>获取原内容(连带内容的格式)后以html方式输出</td>
  </tr>
  <tr>
    <td><div id="divHTML2">2</div></td>
    <td>获取原内容(不带内容的格式)后以html方式输出</td>
  </tr>
  <tr>
    <td><div id="divHTML3">3</div></td>
    <td>获取原内容(获取第一个匹配元素的内容)后以html方式输出</td>
  </tr>
  <tr>
    <td><p></p></td>
    <td>HTML方式设置段落的文本</td>
  </tr>
  <tr>
    <td><p></p></td>
    <td>如果这个也有内容了，就是设置每个匹配元素的内容</td>
  </tr>
<tr><td>******************************</td><td>*******************************************</td></tr>
  <tr>
  <td><div id="divText">4</div></td>
  <td>获取原内容后以text方式输出</td>
  </tr>
  <tr>
  <td><div id="divText2"></div></td>
  <td>获取原内容(获取所有匹配元素的内容)后以text方式输出</td>
  </tr>
  <tr>
    <td><a></a></td>
    <td>TEXT方式设置段落的文本</td>
  </tr>
  <tr>
    <td><a></a></td>
    <td>如果这个也有内容了，就是设置每个匹配元素的内容</td>
  </tr>
  <tr><td>******************************</td><td>*******************************************</td></tr>
  <tr>
  <td>
  
  <select multiple="multiple"style="height:96px;width:85px">
      <option value="1">Item 1</option>
      <option value="2">Item 2</option>
      <option value="3">Item 3</option>
      <option value="4">Item 4</option>
      <option value="5">Item 5</option>
      <option value="6">Item 6</option>
    </select>
    <select>
      <option value="7">Item 7</option>
      <option value="8">Item 8</option>
      <option value="9" selected>Item 9</option>
    </select>
  </td>
  <td>
  </td>
  </tr>
  <tr>
  <td><input ></input></td>
  <td><input ></input></td>
  </tr>
  </table>
 </body>
</html>
Sie können es auch selbst überprüfen. Das obige ist ein Experiment, das ich durchgeführt habe. Die JQuery ist 1.6

Zusammenfassend:

.html() wird verwendet, um das HTML-Tag des Elements

zu lesen und zu ändern .text() wird verwendet, um den Klartextinhalt des Elements zu lesen oder zu ändern
.val() wird verwendet, um den Wert eines Formularelements zu lesen oder zu ändern.

Vergleich der Funktionen dieser drei Methoden

.html(), .text() und .val() werden alle zum Lesen des Inhalts des ausgewählten Elements verwendet; nur .html() wird zum Lesen des HTML-Inhalts des Elements (einschließlich seines HTML-Tags) verwendet ), .text() wird verwendet, um den Klartextinhalt des Elements einschließlich seiner Nachkommenelemente zu lesen, und .val() wird verwendet, um den Wert „value“ des Formularelements zu lesen. Unter diesen können die Methoden . und .text() nicht für Formularelemente verwendet werden, und .val() kann nur für Formularelemente verwendet werden. Wenn die Methode .html() für mehrere Elemente verwendet wird, gilt nur das erste Element wird gelesen; Die Methode .val() ist dieselbe wie .html(), wenn sie auf mehrere Elemente angewendet wird, kann nur der Wert „value“ des ersten Formularelements gelesen werden, .text() unterscheidet sich jedoch davon Wenn .text() auf mehrere Elemente angewendet wird, wird der Textinhalt aller ausgewählten Elemente gelesen.


.html(htmlString), .text(textString) und .val(value) werden alle verwendet, um den Inhalt des ausgewählten Elements zu ersetzen. Wenn die drei Methoden gleichzeitig für mehrere Elemente verwendet werden, werden sie ersetzt . Der Inhalt aller ausgewählten Elemente.


.html(), .text() und .val() können alle den Rückgabewert der Rückruffunktion verwenden, um den Inhalt mehrerer Elemente dynamisch zu ändern.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Verwenden Sie js, um Parameter über die URL zu übergeben und Daten von einer Seite auf eine andere zu übertragen. Javascript-KenntnisseNächster Artikel：Verwenden Sie js, um Parameter über die URL zu übergeben und Daten von einer Seite auf eine andere zu übertragen. Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen