jquery中html 與 text方法的區別

標籤：res   內容   post   技術   ini   website   data-   his   htbox   

jquery中html 與 text方法的區別 24 May 2012/in 網站設計和開發 /by Bruce

接鉵jquery的時間並不長，以前都是用直接用js寫的，現在發現在jquery這個架構用起來很方便，不但代碼量少了，使用也比較簡單，對於瀏覽器的相容問題也不用擔心，在使用的過程中也會遇到一些疑問，在html標籤中附加子標籤時所用的方法html（）與text（）的區別。

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

首先，html屬性中有兩個方法，一個有參，一個無參。下面我們都用執行個體來看看，這樣比較容易協助理解。

1. 無參html（）：取得第一個匹配元素的html內容。這個函數不能用於XML文檔。但可以用於XHTML文檔，返回的是一個String

例子：

html頁面代碼：<div><span>Hello</span></div>

jquery代碼：$(“div”).html();

結果：<span>Hello</span>

2.有參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屬性中有兩個方法，一個有參，一個無參

1. 無參text（）：取得所有匹配元素的內容。結果是由所有匹配元素包含的常值內容組合起來的文本。返回的是一個String。

例子：

html頁面代碼：<p><span>Hello<span><div> fine</div></p>

jquery代碼：$(“p”).text();

結果：Hello

fine

2.有參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標籤的識別上不同。

Tags: jquery  

jquery中html 與 text方法的區別