淺析JQuery中的html(),text(),val()區(qū)別

更新時(shí)間：2014年09月01日 15:43:24 投稿：hebedich

jQuery中.html()用為讀取和修改元素的HTML標(biāo)簽，.text()用來(lái)讀取或修改元素的純文本內(nèi)容，.val()用來(lái)讀取或修改表單元素的value值。

1.HTML

html():取得第一個(gè)匹配元素的html內(nèi)容。這個(gè)函數(shù)不能用于XML文檔。但可以用于XHTML文檔

html(val):設(shè)置每一個(gè)匹配元素的html內(nèi)容。這個(gè)函數(shù)不能用于XML文檔。但可以用于XHTML文檔。

2.TEXT

text():取得所有匹配元素的內(nèi)容。一般用id區(qū)別

結(jié)果是由所有匹配元素包含的文本內(nèi)容組合起來(lái)的文本。這個(gè)方法對(duì)HTML和XML文檔都有效。

text(val):設(shè)置所有匹配元素的文本內(nèi)容

與 html() 類似, 但將編碼 HTML (將 "<" 和 ">" 替換成相應(yīng)的HTML實(shí)體).

3.VAL

val():獲得第一個(gè)匹配元素的當(dāng)前值。一般用來(lái)取input的value值。

val(val):設(shè)置每一個(gè)匹配元素的值。

上面的內(nèi)容是在JQuery的幫助文檔里拷貝的，也都不廢話多說(shuō)了。下面是自己做的一些練習(xí)，代碼如下：

在做練習(xí)的時(shí)候我發(fā)現(xiàn)了html和text的另一個(gè)不同的地方

html()去元素的內(nèi)容的時(shí)候，能將所選定的元素下面的格式也取到了。

如：<div id="divShow"><b><i>Write Less Do More</i></b></div>

如果我們用var strHTML = $("#divShow").html();取的話，

結(jié)果是：<b><i>Write Less Do More</i></b>

如果我們用var strHTML2 = $("#divShow b i").html();取的話

結(jié)果是Write Less Do More

而text沒(méi)有第一種情況，

如果我們var strText = $("#divShow").text();取的話

結(jié)果是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> 獲取或設(shè)置元素的內(nèi)容</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 內(nèi)容(包含div下面的兩個(gè)格式)
  var strHTML2 = $("#divShow b i").html(); //獲取HTML內(nèi)容
  var strHTML3 = $("div").html();
  var strText = $("#divShow").text();// 獲取文本內(nèi)容
  var strText2 = $("div").text();
  
  $("#divHTML").html(strHTML);// 設(shè)置HTML 內(nèi)容
  $("#divHTML2").html(strHTML2); //設(shè)置HTML內(nèi)容
  $("#divHTML3").html(strHTML3); //設(shè)置HTML內(nèi)容
  $("p").html(strHTML);
  
  $("#divText").text(strText);// 設(shè)置文本內(nèi)容
  $("#divText2").text(strText2);// 設(shè)置文本內(nèi)容
  $("a").text(strText);
  
  $("select").change(function() { // 設(shè)置列表框change 事件
  // 獲取列表框所選中的全部選項(xiàng)的值
  alert($("select").val());
  var strSel = $("select").val().join(",");
  $("input").val(strSel); // 顯示列表框所選中的全部選項(xiàng)的值
  })
 })
 </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>這是原內(nèi)容</td>
 </tr>
 <tr>
 <td><div id="divShow"><b><i>Write XXXX Do XXXX</i></b></div></td>
 <td>這是原內(nèi)容</td>
 </tr>
<tr><td>******************************</td><td>*******************************************</td></tr>
 <tr>
 <td><div id="divHTML">1</div></td>
 <td>獲取原內(nèi)容(連帶內(nèi)容的格式)后以html方式輸出</td>
 </tr>
 <tr>
 <td><div id="divHTML2">2</div></td>
 <td>獲取原內(nèi)容(不帶內(nèi)容的格式)后以html方式輸出</td>
 </tr>
 <tr>
 <td><div id="divHTML3">3</div></td>
 <td>獲取原內(nèi)容(獲取第一個(gè)匹配元素的內(nèi)容)后以html方式輸出</td>
 </tr>
 <tr>
 <td><p></p></td>
 <td>HTML方式設(shè)置段落的文本</td>
 </tr>
 <tr>
 <td><p></p></td>
 <td>如果這個(gè)也有內(nèi)容了，就是設(shè)置每個(gè)匹配元素的內(nèi)容</td>
 </tr>
<tr><td>******************************</td><td>*******************************************</td></tr>
 <tr>
 <td><div id="divText">4</div></td>
 <td>獲取原內(nèi)容后以text方式輸出</td>
 </tr>
 <tr>
 <td><div id="divText2"></div></td>
 <td>獲取原內(nèi)容(獲取所有匹配元素的內(nèi)容)后以text方式輸出</td>
 </tr>
 <tr>
 <td><a></a></td>
 <td>TEXT方式設(shè)置段落的文本</td>
 </tr>
 <tr>
 <td><a></a></td>
 <td>如果這個(gè)也有內(nèi)容了，就是設(shè)置每個(gè)匹配元素的內(nèi)容</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>

大家也都可以自己去驗(yàn)證下，上面是我做的實(shí)驗(yàn)，我用的JQuery是1.6

總結(jié)一下：

.html()用為讀取和修改元素的HTML標(biāo)簽
.text()用來(lái)讀取或修改元素的純文本內(nèi)容
.val()用來(lái)讀取或修改表單元素的value值。

這三個(gè)方法功能上的對(duì)比

.html(),.text(),.val()三種方法都是用來(lái)讀取選定元素的內(nèi)容；只不過(guò).html()是用來(lái)讀取元素的HTML內(nèi)容（包括其Html標(biāo)簽），.text()用來(lái)讀取元素的純文本內(nèi)容，包括其后代元素，.val()是用來(lái)讀取表單元素的"value"值。其中.和.text()方法不能使用在表單元素上,而.val()只能使用在表單元素上；另外.html()方法使用在多個(gè)元素上時(shí)，只讀取第一個(gè)元素；.val()方法和.html()相同，如果其應(yīng)用在多個(gè)元素上時(shí)，只能讀取第一個(gè)表單元素的"value"值，但是.text()和他們不一樣，如果.text()應(yīng)用在多個(gè)元素上時(shí)，將會(huì)讀取所有選中元素的文本內(nèi)容。

.html(htmlString),.text(textString)和.val(value)三種方法都是用來(lái)替換選中元素的內(nèi)容，如果三個(gè)方法同時(shí)運(yùn)用在多個(gè)元素上時(shí)，那么將會(huì)替換所有選中元素的內(nèi)容。

.html(),.text(),.val()都可以使用回調(diào)函數(shù)的返回值來(lái)動(dòng)態(tài)的改變多個(gè)元素的內(nèi)容。

下面是其他網(wǎng)友給出的實(shí)例：

假如html結(jié)構(gòu)如下

<div id="divTest" value='2'>
    這是div的內(nèi)容！
    <label id="lblText">
      這是label的內(nèi)容！
    </label>
    <div id="divTest2">
      第二個(gè)div內(nèi)容！
    </div>
  </div>

這是html文檔結(jié)構(gòu)，現(xiàn)在我們執(zhí)行下面js代碼看看所取得的是什么的東西

$("#divTest").html() //所取得內(nèi)容：這是div的內(nèi)容！<label id="lblText">這是label的內(nèi)容！</label> <div id="divTest2">第二個(gè)div內(nèi)容！</div>
$("#divTest").html("我要修改了！") //執(zhí)行修改
　　　　上面修改之后，我們接著獲取一下
$("#divTest").html() //所取得內(nèi)容：我要修改了！

注：html()方法可以用于XHTML文檔，但不能用于XML文檔！

2.text():取得所有匹配元素的內(nèi)容，結(jié)果是由所有匹配元素包含的文本內(nèi)容組合起來(lái)的文本，同理，text(val)是設(shè)置所有匹配元素的文本內(nèi)容

$("#divTest").text() //所取得內(nèi)容：這是div的內(nèi)容！這是label的內(nèi)容！第二個(gè)div內(nèi)容！
//可見(jiàn)所取得是標(biāo)簽內(nèi)的東西，但不會(huì)取標(biāo)簽
注：這個(gè)方法對(duì)HTML和XML文檔都有效

3.val()常用來(lái)操作標(biāo)準(zhǔn)的表單組件對(duì)象，如button,text,hidden

例如添加了一個(gè)select元素以及一個(gè)hidden的元素

  <select id="selectVal">
     <option value="1" selected="selected">1</option>
     <option value="2" >2</option>
   </select>
  <input type="hidden" id="hidVal" value="1"/>

　　現(xiàn)在我們來(lái)取一下他們的值

$("#selectVal").val() //取得值為：1 同理這個(gè)也是 $("#hidVal").val()　　

　　有時(shí)候開(kāi)發(fā)的時(shí)候會(huì)在一個(gè)div內(nèi)設(shè)置一個(gè)value的屬性，那么我們?cè)谌≈档臅r(shí)候可以用這樣　　

$("#divTest").attr('value')

　　如有不妥，還請(qǐng)斧正！

您可能感興趣的文章: