JQuery_jquery の html()、text()、val() の違いの簡単な分析-jsチュートリアル-php.cn

JQuery_jquery の html()、text()、val() の違いの簡単な分析

WBOY

リリース： 2016-05-16 16:38:09

オリジナル

1386 人が閲覧しました

1.HTML

html(): 最初に一致した要素の HTML コンテンツを取得します。この関数は XML ドキュメントでは使用できません。ただし、XHTML ドキュメントには使用できます

html(val): 一致する各要素の HTML コンテンツを設定します。この関数は XML ドキュメントでは使用できません。ただし、XHTML ドキュメントには使用できます。

2.テキスト

text(): 一致するすべての要素のコンテンツを取得します。

結果は、一致するすべての要素に含まれるテキストコンテンツを結合したテキストです。この方法は、HTML ドキュメントと XML ドキュメントの両方で機能します。

text(val): 一致するすべての要素のテキスト内容を設定します

html() と似ていますが、HTML をエンコードします (「<」と「>」を対応する HTML エンティティに置き換えます)。

3.VAL

val(): 最初に一致した要素の現在の値を取得します。

val(val): 一致する各要素の値を設定します。

上記の内容は JQuery ヘルプドキュメントからコピーしたものなので、あまり意味のないことには触れません。ここに私が行ったいくつかの演習があります。コードは次のとおりです:

演習を行っているときに、HTML とテキストの別の違いを発見しました

html() が要素のコンテンツを削除すると、選択した要素の下の形式も取得できます。

例:

var strHTML = $("#divShow").html(); を使用して取得する場合、

結果は次のとおりです:書く量を減らし、作業量を増やします

var strHTML2 = $("#divShow b i").html(); を使用して取得する場合

結果は、Write Less Do More です

テキストには最初の状況がありません。

var strText = $("#divShow").text(); とすると、

結果は、Write Less Do More です

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

ログイン後にコピー

上記は私が行った実験です。

要約すると:

.html() は、要素
の HTML タグの読み取りと変更に使用されます。 .text() は、要素
のプレーンテキストコンテンツの読み取りまたは変更に使用されます。 .val() は、フォーム要素の値の読み取りまたは変更に使用されます。

これら 3 つの方法の機能の比較

.html()、.text()、および .val() はすべて、選択された要素のコンテンツを読み取るために使用されます。要素の HTML コンテンツ (その Html タグを含む) を読み取るために使用されるのは .html() のみです。 )、.text() は、その子孫要素を含む要素のプレーンテキストコンテンツを読み取るために使用され、.val() は、form 要素の「value」値を読み取るために使用されます。このうち、. および .text() メソッドはフォーム要素では使用できず、.val() メソッドはフォーム要素でのみ使用できます。また、.html() メソッドが複数の要素で使用される場合は、最初の要素のみが使用されます。要素が読み取られます。.val() メソッドは .html() と同じです。複数の要素に適用される場合、最初のフォーム要素の "value" 値のみを読み取ることができますが、.text() は異なります。 If .text () 複数の要素に適用すると、選択されたすべての要素のテキストコンテンツが読み取られます。

.html(htmlString)、.text(textString)、および .val(value) はすべて、選択した要素のコンテンツを置換するために使用されます。これら 3 つのメソッドが複数の要素で同時に使用された場合、それらは置換されます。 . 選択されたすべての要素の内容。

.html()、.text()、および .val() はすべて、コールバック関数の戻り値を使用して、複数の要素のコンテンツを動的に変更できます。