jQuery中實(shí)現(xiàn)text()的方法
更新時(shí)間：2019年04月04日 16:40:54 作者：小進(jìn)進(jìn)
這篇文章主要介紹了jQuery中實(shí)現(xiàn)text()的方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
一、有這樣一段 html
<div class="divOne"> <p>嘿嘿嘿</p> </div> <div class="divOne"> <p>哈哈哈</p> </div>
二、jQuery 的 text() 方法
（1）當(dāng)直接調(diào)用 $().text()時(shí)，.text()的作用是（循環(huán)）讀取（多個(gè)）目標(biāo)元素的textContent/nodeValue
簡(jiǎn)單實(shí)現(xiàn)：
function readText(elem) {
let node,
ret = "",
i = 0,
nodeType = elem.nodeType
console.log(nodeType,'nodeType22')
//如果selector是類的話，會(huì)有多個(gè)目標(biāo)元素，此時(shí)需要分別單個(gè)循環(huán)
//比如document.querySelectorAll('.divOne').nodeType ->undefined
if (!nodeType) {
while ((node = elem[i++])) {
//單個(gè)獲取
ret += readText(node)
}
}
//元素節(jié)點(diǎn)，文檔節(jié)點(diǎn)，文檔碎片
else if (nodeType === 1 || nodeType === 9 || nodeType === 11) {
//如果目標(biāo)元素的內(nèi)容是文本，則直接返回
if (typeof elem.textContent === "string") {
/*jQuery沒(méi)有用innerText獲取文本的值，http://bugs.jquery.com/ticket/11153，
大概就是在IE8中新節(jié)點(diǎn)插入會(huì)保留所有回車。
所以jQuery采用了textContent獲取文本值，
textContent本身是dom3規(guī)范的，可以兼容火狐下的innerText問(wèn)題。*/
return elem.textContent
}
//如果節(jié)點(diǎn)內(nèi)容不是文本，則循環(huán)子節(jié)點(diǎn)，并依次獲取它們的文本節(jié)點(diǎn)
else {
for (elem = elem.firstChild; elem; elem = elem.nextSibling) {
ret += readText(elem)
}
}
}
//文本節(jié)點(diǎn)、一個(gè)文檔的CDATA部分（沒(méi)遇到過(guò)這個(gè)）
else if (nodeType === 3 || nodeType === 4) {
//返回節(jié)點(diǎn)值
return elem.nodeValue;
}
//nodeType：注釋節(jié)點(diǎn) 8，處理指令 7
//text()方法不處理這兩個(gè)類型節(jié)點(diǎn)
return ret
}
（2）當(dāng)調(diào)用$().text(value)時(shí)，.text(value)的作用是為每一個(gè)符合條件的目標(biāo)元素的textContent設(shè)置為 value
簡(jiǎn)單實(shí)現(xiàn)：
writeText()：
function writeText(value) {
let elem,
i = 0;
//先清空目標(biāo)元素的內(nèi)容
customEmpty.call(this)
//循環(huán)
for (; (elem = this[i]) != null; i++) {
//元素節(jié)點(diǎn)，文檔碎片，文檔節(jié)點(diǎn)
if (elem.nodeType === 1 || elem.nodeType === 11 || elem.nodeType === 9) {
// text()方法不會(huì)解析標(biāo)簽
elem.textContent = value;
}
}
//return this 方便鏈?zhǔn)秸{(diào)用
return this
}
customEmpty()：
function customEmpty() {
let elem,
i = 0;
//注意for循環(huán)的寫(xiě)法
for (; (elem = this[i]) != null; i++) {
//如果是元素節(jié)點(diǎn)的話，清空該節(jié)點(diǎn)的所有內(nèi)容
if (elem.nodeType === 1) {
elem.textContent = "";
}
}
return this;
}
（3）源碼實(shí)現(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 ) :
//寫(xiě)
//循環(huán)
this.empty().each( function() {
//先清空目標(biāo)元素的內(nèi)容，然后再賦值
if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
console.log(value,'value6159')
//如果包含標(biāo)簽的話，需要用html()方法，text()方法不會(huì)解析標(biāo)簽
/*jQuery沒(méi)有用innerText獲取文本的值，http://bugs.jquery.com/ticket/11153，
大概就是在IE8中新節(jié)點(diǎn)插入會(huì)保留所有回車。
所以jQuery采用了textContent獲取文本值，
textContent本身是dom3規(guī)范的，可以兼容火狐下的innerText問(wèn)題。*/
this.textContent = value;
}
} )
}, null, value, arguments.length );
},
源碼解析：
① 調(diào)用text()，實(shí)際上是調(diào)用access()
也就是說(shuō)：調(diào)用jQuery.access()相當(dāng)于調(diào)用了fn.call( elems, value )，即自定義的方法jQuery.access(this, function(value) {xxx})
② .text()的情況調(diào)用這部分源碼：
jQuery.text()調(diào)用的其實(shí)是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é)點(diǎn)、文檔節(jié)點(diǎn)、文檔碎片
else if ( nodeType === 1 || nodeType === 9 || nodeType === 11 ) {
// Use textContent for elements
// innerText usage removed for consistency of new lines (jQuery #11153)
//如果目標(biāo)元素的子節(jié)點(diǎn)是文本節(jié)點(diǎn)，則直接返回它的textContent
if ( typeof elem.textContent === "string" ) {
/*jQuery沒(méi)有用innerText獲取文本的值，http://bugs.jquery.com/ticket/11153，
大概就是在IE8中新節(jié)點(diǎn)插入會(huì)保留所有回車。
所以jQuery采用了textContent獲取文本值，
textContent本身是dom3規(guī)范的，可以兼容火狐下的innerText問(wèn)題。*/
return elem.textContent;
}
//如果子節(jié)點(diǎn)不是文本節(jié)點(diǎn)，則循環(huán)子節(jié)點(diǎn)，并依次獲取它們的文本節(jié)點(diǎn)
else {
// Traverse its children
for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
ret += getText( elem );
}
}
}
//文本節(jié)點(diǎn)、一個(gè)文檔的CDATA部分（沒(méi)遇到過(guò)這個(gè)）
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)：
//寫(xiě)
//循環(huán)
this.empty().each( function() {
//先清空目標(biāo)元素的內(nèi)容，然后再賦值
if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
console.log(value,'value6159')
//如果包含標(biāo)簽的話，需要用html()方法，text()方法不會(huì)解析標(biāo)簽
/*jQuery沒(méi)有用innerText獲取文本的值，http://bugs.jquery.com/ticket/11153，
大概就是在IE8中新節(jié)點(diǎn)插入會(huì)保留所有回車。
所以jQuery采用了textContent獲取文本值，
textContent本身是dom3規(guī)范的，可以兼容火狐下的innerText問(wèn)題。*/
this.textContent = value;
}
} )
empty()：
//源碼6231行
empty: function() {
var elem,
i = 0;
for ( ; ( elem = this[ i ] ) != null; i++ ) {
//如果是元素節(jié)點(diǎn)的話
if ( elem.nodeType === 1 ) {
// Prevent memory leaks
//清空內(nèi)容和事件，防止內(nèi)存泄漏
jQuery.cleanData( getAll( elem, false ) );
// Remove any remaining nodes
//清空節(jié)點(diǎn)所有內(nèi)容
elem.textContent = "";
}
}
return this;
},
④ 總結(jié)
$(".divOne").text()的本質(zhì)：
（1）節(jié)點(diǎn)內(nèi)容是文本，返回$(".divOne")[i].textContent
（2）節(jié)點(diǎn)內(nèi)容不是文本，循環(huán)返回$(".divOne")[i].element[j].textContent
（3）節(jié)點(diǎn)內(nèi)容是文本節(jié)點(diǎn)或一個(gè)文檔的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() 不會(huì)去解析 html 標(biāo)簽！
參考：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ì)有多個(gè)目標(biāo)元素，此時(shí)需要分別單個(gè)循環(huán)
//比如document.querySelectorAll('.divOne').nodeType ->undefined
if (!nodeType) {
while ((node = elem[i++])) {
//單個(gè)獲取
ret += readText(node)
}
}
//元素節(jié)點(diǎn)，文檔節(jié)點(diǎn)，文檔碎片
else if (nodeType === 1 || nodeType === 9 || nodeType === 11) {
//如果目標(biāo)元素的內(nèi)容是文本，則直接返回
if (typeof elem.textContent === "string") {
/*jQuery沒(méi)有用innerText獲取文本的值，http://bugs.jquery.com/ticket/11153，
大概就是在IE8中新節(jié)點(diǎn)插入會(huì)保留所有回車。
所以jQuery采用了textContent獲取文本值，
textContent本身是dom3規(guī)范的，可以兼容火狐下的innerText問(wèn)題。*/
return elem.textContent
}
//如果節(jié)點(diǎn)的內(nèi)容不是文本，則循環(huán)子節(jié)點(diǎn)，并依次獲取它們的文本節(jié)點(diǎn)
else {
for (elem = elem.firstChild; elem; elem = elem.nextSibling) {
ret += readText(elem)
}
}
}
//文本節(jié)點(diǎn)、一個(gè)文檔的CDATA部分（沒(méi)遇到過(guò)這個(gè)）
else if (nodeType === 3 || nodeType === 4) {
//返回節(jié)點(diǎn)值
return elem.nodeValue;
}
//nodeType：注釋節(jié)點(diǎn) 8，處理指令 7
//text()方法不處理這兩個(gè)類型節(jié)點(diǎn)
return ret
}
function customEmpty() {
let elem,
i = 0;
//注意for循環(huán)的寫(xiě)法
for (; (elem = this[i]) != null; i++) {
//如果是元素節(jié)點(diǎn)的話，清空該節(jié)點(diǎn)的所有內(nèi)容
if (elem.nodeType === 1) {
elem.textContent = "";
}
}
return this;
}
function writeText(value) {
let elem,
i = 0;
//先清空目標(biāo)元素的內(nèi)容
customEmpty.call(this)
//循環(huán)
for (; (elem = this[i]) != null; i++) {
//元素節(jié)點(diǎn)，文檔碎片，文檔節(jié)點(diǎn)
if (elem.nodeType === 1 || elem.nodeType === 11 || elem.nodeType === 9) {
// text()方法不會(huì)解析標(biāo)簽
elem.textContent = value;
}
}
//return this 方便鏈?zhǔn)秸{(diào)用
return this
}
function customText(value) {
return value === undefined ?
//讀
readText(this) :
//寫(xiě)
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中實(shí)現(xiàn)text()的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
您可能感興趣的文章:
- JQuery 獲取多個(gè)select標(biāo)簽option的text內(nèi)容(實(shí)例)
- jquery插件ContextMenu設(shè)置右鍵菜單
- jquery獲取select,option所有的value和text的實(shí)例
- jquery獲取input type=text中的值的各種方式(總結(jié))
- jquery對(duì)所有input type=text的控件賦值實(shí)現(xiàn)方法
- jquery+ajax+text文本框?qū)崿F(xiàn)智能提示完整實(shí)例
- jQuery中text() val()和html()的區(qū)別實(shí)例詳解
- jquery實(shí)現(xiàn)文本框textarea自適應(yīng)高度
- jQuery實(shí)現(xiàn)textarea自動(dòng)增長(zhǎng)寬高的方法
相關(guān)文章
jQuery插件simplePagination的使用方法示例
這篇文章主要介紹了jQuery插件simplePagination的使用方法,結(jié)合實(shí)例形式分析了jQuery插件simplePagination實(shí)現(xiàn)表單分頁(yè)相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2020-04-04
jquery插件jSignature實(shí)現(xiàn)手動(dòng)簽名
在IE7~IE8這種不支持HTML5的瀏覽器上，是利用Flash嵌入的方式實(shí)現(xiàn)的簽名處理，在支持的HTML5的瀏覽器上默認(rèn)采用canvas標(biāo)簽處理簽名，可以生成 PNG格式、SVG格式的簽名圖片。非常適合在IPAD等移動(dòng)客戶端上實(shí)現(xiàn)手寫(xiě)簽名的，該插件基于JQuery2015-05-05
Jquery change(fontsize,background) 改變顏色與背景的代碼
基于Jquery的改變顏色與背景的代碼，對(duì)于學(xué)習(xí)jquery的朋友可以參考下。2010-05-05
:input表示選擇表單中的input,select,textarea,button元素，input僅僅選擇input元素。2011-07-07
Jquery模仿Baidu、Google搜索時(shí)自動(dòng)補(bǔ)充搜索結(jié)果提示
昨天研究了一下Jquery 模仿Baidu、Google收索時(shí)自動(dòng)補(bǔ)充收索結(jié)果的提示，感覺(jué)效果還行，下面與大家分享下代碼2013-12-12
jQuery實(shí)現(xiàn)簡(jiǎn)單的日期輸入格式化控件
本文給大家分享的是javascript實(shí)現(xiàn)簡(jiǎn)單的日期輸入格式化控件的方法和思路，非常的細(xì)致實(shí)用，推薦給小伙伴們2015-03-03
作為輕量級(jí)的JS庫(kù)，jQuery隨著JavaScrīpt腳本的大熱而備受Web開(kāi)發(fā)者親睞。本文給大家分享五個(gè)有用的jquery小技巧，需要的朋友可以參考下2015-10-10
JQuery獲取可視區(qū)尺寸和文檔尺寸及制作懸浮菜單示例
這篇文章主要介紹了JQuery獲取可視區(qū)尺寸和文檔尺寸及制作懸浮菜單,涉及jQuery針對(duì)頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-05-05
JavaScript的jQuery庫(kù)中ready方法的學(xué)習(xí)教程
這篇文章主要介紹了JavaScript的jQuery庫(kù)中ready方法的學(xué)習(xí)教程,包括ready的相關(guān)簡(jiǎn)短寫(xiě)法,rally cool,需要的朋友可以參考下2015-08-08
jquery插件uploadify多圖上傳功能實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了jquery插件uploadify多圖上傳功能實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08