jQuery中實現(xiàn)text()的方法

更新時間：2019年04月04日 16:40:54 作者：小進進

這篇文章主要介紹了jQuery中實現(xiàn)text()的方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下

一、有這樣一段 html

<div class="divOne">
 <p>嘿嘿嘿</p>
</div>
<div class="divOne">
 <p>哈哈哈</p>
</div>

二、jQuery 的 text() 方法

（1）當直接調(diào)用 $().text()時，.text()的作用是（循環(huán)）讀?。ǘ鄠€）目標元素的textContent/nodeValue

簡單實現(xiàn)：

 function readText(elem) {
 let node,
  ret = "",
  i = 0,
  nodeType = elem.nodeType
 console.log(nodeType,'nodeType22')
 //如果selector是類的話，會有多個目標元素，此時需要分別單個循環(huán)
 //比如document.querySelectorAll('.divOne').nodeType ->undefined
 if (!nodeType) {
  while ((node = elem[i++])) {
  //單個獲取
  ret += readText(node)
  }
 }
 //元素節(jié)點，文檔節(jié)點，文檔碎片
 else if (nodeType === 1 || nodeType === 9 || nodeType === 11) {
  //如果目標元素的內(nèi)容是文本，則直接返回
  if (typeof elem.textContent === "string") {
  /*jQuery沒有用innerText獲取文本的值，http://bugs.jquery.com/ticket/11153，
  大概就是在IE8中新節(jié)點插入會保留所有回車。
  所以jQuery采用了textContent獲取文本值，
  textContent本身是dom3規(guī)范的，可以兼容火狐下的innerText問題。*/
  return elem.textContent
  }
  //如果節(jié)點內(nèi)容不是文本，則循環(huán)子節(jié)點，并依次獲取它們的文本節(jié)點
  else {
  for (elem = elem.firstChild; elem; elem = elem.nextSibling) {
   ret += readText(elem)
  }
  }
 }
 //文本節(jié)點、一個文檔的CDATA部分（沒遇到過這個）
 else if (nodeType === 3 || nodeType === 4) {
  //返回節(jié)點值
  return elem.nodeValue;
 }
 //nodeType：注釋節(jié)點 8，處理指令 7
 //text()方法不處理這兩個類型節(jié)點
 return ret
 }

（2）當調(diào)用$().text(value)時，.text(value)的作用是為每一個符合條件的目標元素的textContent設(shè)置為 value

簡單實現(xiàn)：

writeText()：

 function writeText(value) {
 let elem,
  i = 0;
 //先清空目標元素的內(nèi)容
 customEmpty.call(this)
 //循環(huán)
 for (; (elem = this[i]) != null; i++) {
  //元素節(jié)點，文檔碎片，文檔節(jié)點
  if (elem.nodeType === 1 || elem.nodeType === 11 || elem.nodeType === 9) {
  // text()方法不會解析標簽
  elem.textContent = value;
  }
 }
 //return this 方便鏈式調(diào)用
 return this
 }

customEmpty()：

 function customEmpty() {
 let elem,
  i = 0;
 //注意for循環(huán)的寫法
 for (; (elem = this[i]) != null; i++) {
  //如果是元素節(jié)點的話，清空該節(jié)點的所有內(nèi)容
  if (elem.nodeType === 1) {
  elem.textContent = "";
  }
 }
 return this;
 }

（3）源碼實現(xiàn)

源碼：

jQuery.text()總體：

//源碼6152行
 text: function( value ) {
  return access( this, function( value ) {
  return value === undefined ?
   //讀
   //如果直接調(diào)用text()的話,就調(diào)用Sizzle.getText
   jQuery.text( this ) :
   //寫
   //循環(huán)
   this.empty().each( function() {
   //先清空目標元素的內(nèi)容，然后再賦值
   if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
    console.log(value,'value6159')
    //如果包含標簽的話，需要用html()方法，text()方法不會解析標簽
    /*jQuery沒有用innerText獲取文本的值，http://bugs.jquery.com/ticket/11153，
    大概就是在IE8中新節(jié)點插入會保留所有回車。
    所以jQuery采用了textContent獲取文本值，
    textContent本身是dom3規(guī)范的，可以兼容火狐下的innerText問題。*/
    this.textContent = value;
   }
   } )
  }, null, value, arguments.length );
 },

源碼解析：

① 調(diào)用text()，實際上是調(diào)用access()

也就是說：調(diào)用jQuery.access()相當于調(diào)用了fn.call( elems, value )，即自定義的方法jQuery.access(this, function(value) {xxx})

② .text()的情況調(diào)用這部分源碼：

jQuery.text()調(diào)用的其實是Sizzle.getText()：

 //源碼2833行
 jQuery.text = Sizzle.getText;
Sizzle.getText()：
//源碼1642行
getText = Sizzle.getText = function( elem ) {
  var node,
   ret = "",
   i = 0,
   nodeType = elem.nodeType;

  if ( !nodeType ) {
   while ( (node = elem[i++]) ) {
   // Do not traverse comment nodes
   ret += getText( node );
   }
  }
  //元素節(jié)點、文檔節(jié)點、文檔碎片
  else if ( nodeType === 1 || nodeType === 9 || nodeType === 11 ) {
   // Use textContent for elements
   // innerText usage removed for consistency of new lines (jQuery #11153)
   //如果目標元素的子節(jié)點是文本節(jié)點，則直接返回它的textContent
   if ( typeof elem.textContent === "string" ) {
   /*jQuery沒有用innerText獲取文本的值，http://bugs.jquery.com/ticket/11153，
   大概就是在IE8中新節(jié)點插入會保留所有回車。
   所以jQuery采用了textContent獲取文本值，
   textContent本身是dom3規(guī)范的，可以兼容火狐下的innerText問題。*/
   return elem.textContent;
   }
   //如果子節(jié)點不是文本節(jié)點，則循環(huán)子節(jié)點，并依次獲取它們的文本節(jié)點
   else {
   // Traverse its children
   for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
    ret += getText( elem );
   }
   }
  }
  //文本節(jié)點、一個文檔的CDATA部分（沒遇到過這個）
  else if ( nodeType === 3 || nodeType === 4 ) {
   return elem.nodeValue;
  }
  // Do not include comment or processing instruction nodes
  return ret;
  };

③ .text(value)的情況調(diào)用這部分源碼：

jQuery.text(value)：

  //寫
   //循環(huán)
   this.empty().each( function() {
   //先清空目標元素的內(nèi)容，然后再賦值
   if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
    console.log(value,'value6159')
    //如果包含標簽的話，需要用html()方法，text()方法不會解析標簽
    /*jQuery沒有用innerText獲取文本的值，http://bugs.jquery.com/ticket/11153，
    大概就是在IE8中新節(jié)點插入會保留所有回車。
    所以jQuery采用了textContent獲取文本值，
    textContent本身是dom3規(guī)范的，可以兼容火狐下的innerText問題。*/
    this.textContent = value;
   }
   } )

empty()：

 //源碼6231行
 empty: function() {
  var elem,
  i = 0;
  for ( ; ( elem = this[ i ] ) != null; i++ ) {
  //如果是元素節(jié)點的話
  if ( elem.nodeType === 1 ) {
   // Prevent memory leaks
   //清空內(nèi)容和事件，防止內(nèi)存泄漏
   jQuery.cleanData( getAll( elem, false ) );
   // Remove any remaining nodes
   //清空節(jié)點所有內(nèi)容
   elem.textContent = "";
  }
  }
  return this;
 },

④ 總結(jié)

$(".divOne").text()的本質(zhì)：

（1）節(jié)點內(nèi)容是文本，返回$(".divOne")[i].textContent

（2）節(jié)點內(nèi)容不是文本，循環(huán)返回$(".divOne")[i].element[j].textContent

（3）節(jié)點內(nèi)容是文本節(jié)點或一個文檔的CDATA部分,則返回$(".divOne")[i]. nodeValue

$(".divOne").text("Hello <b>world</b>!")的本質(zhì)：

（1）jQuery.cleanData()

（2）$(".divOne")[i].textContent = ""

（3）$(".divOne")[i].textContent="Hello world!"

注意：text() 不會去解析 html 標簽！

參考：http://api.jquery.com/text/

完整代碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>jQuery之text()</title>
</head>
<body>
<script src="jQuery.js"></script>
<div class="divOne">
 <!--<p id="divTwo">嘿嘿嘿</p>-->
 <p>嘿嘿嘿</p>
</div>
<div class="divOne">
 <p>哈哈哈</p>
</div>
<input type="text" id="inputOne">
<script>
 function readText(elem) {
 let node,
  ret = "",
  i = 0,
  nodeType = elem.nodeType
 console.log(nodeType,'nodeType22')
 //如果selector是類的話，會有多個目標元素，此時需要分別單個循環(huán)
 //比如document.querySelectorAll('.divOne').nodeType ->undefined
 if (!nodeType) {
  while ((node = elem[i++])) {
  //單個獲取
  ret += readText(node)
  }
 }
 //元素節(jié)點，文檔節(jié)點，文檔碎片
 else if (nodeType === 1 || nodeType === 9 || nodeType === 11) {
  //如果目標元素的內(nèi)容是文本，則直接返回
  if (typeof elem.textContent === "string") {
  /*jQuery沒有用innerText獲取文本的值，http://bugs.jquery.com/ticket/11153，
  大概就是在IE8中新節(jié)點插入會保留所有回車。
  所以jQuery采用了textContent獲取文本值，
  textContent本身是dom3規(guī)范的，可以兼容火狐下的innerText問題。*/
  return elem.textContent
  }
  //如果節(jié)點的內(nèi)容不是文本，則循環(huán)子節(jié)點，并依次獲取它們的文本節(jié)點
  else {
  for (elem = elem.firstChild; elem; elem = elem.nextSibling) {
   ret += readText(elem)
  }
  }
 }
 //文本節(jié)點、一個文檔的CDATA部分（沒遇到過這個）
 else if (nodeType === 3 || nodeType === 4) {
  //返回節(jié)點值
  return elem.nodeValue;
 }
 //nodeType：注釋節(jié)點 8，處理指令 7
 //text()方法不處理這兩個類型節(jié)點
 return ret
 }
 function customEmpty() {
 let elem,
  i = 0;
 //注意for循環(huán)的寫法
 for (; (elem = this[i]) != null; i++) {
  //如果是元素節(jié)點的話，清空該節(jié)點的所有內(nèi)容
  if (elem.nodeType === 1) {
  elem.textContent = "";
  }
 }
 return this;
 }
 function writeText(value) {
 let elem,
  i = 0;
 //先清空目標元素的內(nèi)容
 customEmpty.call(this)
 //循環(huán)
 for (; (elem = this[i]) != null; i++) {
  //元素節(jié)點，文檔碎片，文檔節(jié)點
  if (elem.nodeType === 1 || elem.nodeType === 11 || elem.nodeType === 9) {
  // text()方法不會解析標簽
  elem.textContent = value;
  }
 }
 //return this 方便鏈式調(diào)用
 return this
 }
 function customText(value) {
 return value === undefined ?
  //讀
  readText(this) :
  //寫
  writeText.call(this, value)
 }
 customText.call(document.querySelectorAll('.divOne'))
 customText.call(document.querySelectorAll('.divOne'),"Hello <b>world</b>!")
 // let p=document.createElement('p')
 // p.innerText='哈哈哈'
 console.log($(".divOne").text())
 // customText.call(document.querySelectorAll('.divOne'))
 // console.log(document.querySelectorAll('.divOne').nodeType,'childnode81')
 // console.log(document.querySelectorAll('.divOne')[0].textContent,'childnode81')
 // $("#divOne").text('<p>aaaa</p>')
 // console.log(document.querySelector("#divTwo"))
</script>
</body>
</html>

總結(jié)

以上所述是小編給大家介紹的jQuery中實現(xiàn)text()的方法，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧

您可能感興趣的文章: