1. 程式人生 > >jQuery學習之------html()和text()

jQuery學習之------html()和text()

nbsp 參數 block tex tco 元素 logs 增加 ast

jQuery學習之------html()和text()

.html與.text的異同:

  1. .html與.text的方法操作是一樣,只是在具體針對處理對象不同
  2. .html處理的是元素內容,.text處理的是文本內容
  3. .html只能使用在HTML文檔中,.text 在XML 和 HTML 文檔中都能使用
  4. 如果處理的對象只有一個子文本節點,那麽html處理的結果與text是一樣的
  5. 火狐不支持innerText屬性,用了類似的textContent屬性,.text()方法綜合了2個屬性的支持,所以可以兼容所有瀏覽器

例子:

<div class="soulsjie">
<h1>soulsjie</h1>
<h3>.html()與.text()</h3>
</div>

<h4>顯示通過html方法獲取到的內容</h4>
<p></p>
<h4>顯示通過text方法獲取到的內容</h4>
<p></p>

<script type="text/javascript">
//顯示出html方法獲取到的內容
//.html()是整個html文檔結構
$(‘p:first‘).text( $(".soulsjie").html() )

   //顯示出text方法獲取到的內容
//.text()是文本內容的合集
$(‘p:last‘).text( $(".soulsjie").text() )


</script>

輸出結果:
技術分享

簡單的說使用.html()能夠獲取到HTML的標簽和內容,而使用.text()只能獲取到標簽的內容

//通過.text()的回調,獲取原本的內容,修改,在重新賦值

<script type="text/javascript">
$(".left a:first").text(function(idnex,text){

  // index是索引值的意思,索引的就是$(‘.left a:first‘),另一個參數text是$(‘.left a:first‘)中已有的文本內容
return ‘增加新的文本內容‘ + text


})
</script>




jQuery學習之------html()和text()