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()的方法，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
您可能感興趣的文章:
- JQuery 獲取多個select標簽option的text內(nèi)容(實例)
- jquery插件ContextMenu設(shè)置右鍵菜單
- jquery獲取select,option所有的value和text的實例
- jquery獲取input type=text中的值的各種方式(總結(jié))
- jquery對所有input type=text的控件賦值實現(xiàn)方法
- jquery+ajax+text文本框?qū)崿F(xiàn)智能提示完整實例
- jQuery中text() val()和html()的區(qū)別實例詳解
- jquery實現(xiàn)文本框textarea自適應(yīng)高度
- jQuery實現(xiàn)textarea自動增長寬高的方法
相關(guān)文章
jQuery插件simplePagination的使用方法示例
這篇文章主要介紹了jQuery插件simplePagination的使用方法,結(jié)合實例形式分析了jQuery插件simplePagination實現(xiàn)表單分頁相關(guān)操作技巧與注意事項,需要的朋友可以參考下2020-04-04
jquery插件jSignature實現(xiàn)手動簽名
在IE7~IE8這種不支持HTML5的瀏覽器上，是利用Flash嵌入的方式實現(xiàn)的簽名處理，在支持的HTML5的瀏覽器上默認采用canvas標簽處理簽名，可以生成 PNG格式、SVG格式的簽名圖片。非常適合在IPAD等移動客戶端上實現(xiàn)手寫簽名的，該插件基于JQuery2015-05-05
Jquery change(fontsize,background) 改變顏色與背景的代碼
基于Jquery的改變顏色與背景的代碼，對于學習jquery的朋友可以參考下。2010-05-05
:input表示選擇表單中的input,select,textarea,button元素，input僅僅選擇input元素。2011-07-07
Jquery模仿Baidu、Google搜索時自動補充搜索結(jié)果提示
昨天研究了一下Jquery 模仿Baidu、Google收索時自動補充收索結(jié)果的提示，感覺效果還行，下面與大家分享下代碼2013-12-12
本文給大家分享的是javascript實現(xiàn)簡單的日期輸入格式化控件的方法和思路，非常的細致實用，推薦給小伙伴們2015-03-03
作為輕量級的JS庫，jQuery隨著JavaScrīpt腳本的大熱而備受Web開發(fā)者親睞。本文給大家分享五個有用的jquery小技巧，需要的朋友可以參考下2015-10-10
JQuery獲取可視區(qū)尺寸和文檔尺寸及制作懸浮菜單示例
這篇文章主要介紹了JQuery獲取可視區(qū)尺寸和文檔尺寸及制作懸浮菜單,涉及jQuery針對頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-05-05
JavaScript的jQuery庫中ready方法的學習教程
這篇文章主要介紹了JavaScript的jQuery庫中ready方法的學習教程,包括ready的相關(guān)簡短寫法,rally cool,需要的朋友可以參考下2015-08-08
jquery插件uploadify多圖上傳功能實現(xiàn)代碼
這篇文章主要為大家詳細介紹了jquery插件uploadify多圖上傳功能實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08