JQuery中html()與text()方法的區別

常在用JQuery寫ajax時，都會用到html()這個方法，而不用text()這個方法，他們之間有什么區別呢?

html屬性中有兩個方法，一個有參，一個無參。

無參html()：取得第一個匹配元素的html內容。這個函數不能用于XML文檔。但可以用于XHTML文檔，返回的是一個string

例子：
html頁面代碼：<div><span>Hello</span></div>
JQuery代碼：$(“div”).html();
結果：<span>Hello</span>

有參html（val）：設置每一個匹配元素的html內容。這個函數不能用于XML文檔。但可以用于XHTML文檔。返回一個JQuery對象

例子：
html頁面代碼：<div></div>
JQuery代碼：$(“div”).html(“<p>Nice to meet you</p>”);
結果：<div><p> Nice to meet you</p></div>（html標簽會被瀏覽器識別）

text屬性中有兩個方法，一個有參，一個無參

無參text()：取得所有匹配元素的內容。結果是由所有匹配元素包含的文本內容組合起來的文本。返回的是一個string。

例子：
html頁面代碼：<p><span>Hello<span><div> fine</div></p>
JQuery代碼：$(“p”).text();
結果：Hello fine

有參text(val)：設置所有匹配元素的文本內容,與 html() 類似, 但將編碼 HTML (將 “<” 和 “>” 替換成相應的HTML實體).返回一個JQuery對象。

例子：
html頁面代碼：<div>Paragraph.</div>
JQuery代碼：$(“div”).text(“<b>Some</b> new text.”);
結果: <p><b>Some</b> new text.</p> （html標簽不會被瀏覽器識別，而是當作字符串來輸出）

通過上面的例子，我們知道 html()方法與text()方法的區別就在于對html標簽的識別上不同。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <title> New Document </title>
 <meta name="Generator" content="EditPlus">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <script type="text/javascript" src="jquery-1.7.js"></script>
 <script type="text/javascript">
 <!--
	 function f1()
	 {
	 //text方法 只獲取標簽中的文本內容
		 alert($("#myDiv").text());
	 }
	 function f2()
	 {
	 //html方法 獲取指定標簽中的html標簽和內容
		 alert($("#myDiv").html());
	 }
 //-->
 </script>
 </head>

 <body>
 <div id="myDiv" style="border:5px solid red; width:300px;height:300px;">
 <span style="color:blue; font-size:35px">大家好 我是div<span>
</div>
<input type="button" value="text()" onclick="f1()">
<input type="button" value="html()" onclick="f2()">
 </body>
</html>

日常學習中，html，css和js我們都學過，起初分不清這三者的區別和聯系，隨著知識的增長，有了一些體會。來跟我一起看一下這三項技術都是什么，能干什么？

1、HTML—Hypertext Markup Language

超文本標記語言。它通過標記符號來標記要顯示的網頁中的各個部分。網頁文件本身是一種文本文件，通過在文本文件中添加標記符，可以告訴瀏覽器如何顯示其中的內容（比如文字如何處理，畫面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網頁文件，然后根據標記符解釋和顯示其標記的內容：

HTML文本中包含了所謂的“鏈接點”HTML利用超鏈接的方法，將各種不同空間的文字信息組織在一起的網狀文本。總的來說，HTML就是整合網頁結構和內容顯示的一種語言。

2、CSS—Cascading Style Sheet

層疊樣式表單。是將樣式信息與網頁內容分離的一種標記語言。我們在牛腩新聞發布系統中，我們使用過CSS文件，對一些標簽的樣式進行修改。

我們使用CSS為每個HTML元素定義樣式，也可以用于多個界面。進行全局更新時，只需修改樣式即可。

body { border :1px solid #000;/*整體的邊框*/ font-size :14px; }

說白了，CSS就是設置網頁上HTML元素屬性的語言。

3、JavaScript

一開始特別郁悶為什么它的名字跟Java如此相似?

這是典型的市場營銷方面的成功，它的推廣成功,也是借了Java的東風。當微軟開始意識到Javascript在Web開發人員中流行起來時，微軟還是一貫風格，建立了自己的腳本語言，JScript。

Javascript是一種基于對象(Object)和事件驅動(Event Driven)并具有安全性能的腳本語言。使用它的目的是與HTML超文本標記語言、Java腳本語言(Java小程序)一起實現在一個Web頁面中鏈接多個對象，與Web客戶交互作用。例如可以設置鼠標懸停效果，在客戶端驗證表單，創建定制的HTML頁面，顯示警告框，設置cookie等等。

function jsHello{ alert('Hello World！'); }

把代碼嵌入HTML語言中，它會在加載時彈出一個“Hello World”對話框。至于怎么嵌入的，我們在學習JS視頻之初就已經知道了。

關于 HTML、CSS與JS的區別就給大家介紹這么多，學習最重要的還是要靠自己，掌握正確的學習技巧，并持之以恒的堅持下去，就能攻克！

感謝閱讀，如果覺得本文對你有幫助，記得點個贊再走哦~

在線咨詢

上一篇：如何使用JavaScript解析URL
下一篇：一文讀懂HTML和CSS的關系

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JQuery中html()與text()方法的區別

您的項目需求