html和text都可以獲取和修改DOM節點里的內容，方法如下:
- html(value) ;獲取匹配元素集合中的一個元素的innerHTML內容，或者設定每個元素的innerHTML內容， ;value可選，可以是html代碼或回傳html代碼的函式,如果沒有引數則獲取匹配元素集合中第一個元素的innerHTML內容
- text(text) ;獲取匹配元素集合中所有元素合并后的文本內容，或者設定每個元素的文本內容，封裝了createTextNode方法
writer by:大沙漠 QQ:22969969
舉個栗子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script> </head> <body> <div>Hello World!</div> <button id="b1">按鈕1</button> <button id="b2">按鈕2</button> <script> $('#b1').click(()=>{ $('div').html('<p>Hello jQuery!</p>') //使用html()設定值 }) $('#b2').click(()=>{ $('div').text('<p>Hello jQuery!</p>') //使用text()設定值 }) </script> </body> </html>
渲染如下:
點擊按鈕1將使用html()設定值，此時渲染如下:
點擊按鈕2將使用text()設定值，此時渲染如下:
可以看到對于html()來說，就把里面的標簽的含義決議出來，而對于text()來說，只是單純的展示出來，這是因為前者是通過設定innerHTML來實作的，后者是通過createTextNode創建的文本節點來實作的
原始碼分析
對于html來說，它是通過innerHTML來實作的，實作如下:
jQuery.fn.extend({ html: function( value ) { //獲取匹配元素集合中第一個元素的HTML內容，或者設定每個元素的HTML內容，通過讀取、設定innerHTML來實作，value可選，可以是html代碼或回傳html代碼的函式， if ( value =https://www.cnblogs.com/greatdesert/p/== undefined ) { //如果沒有傳入引數，則讀取第一個匹配元素的HTML內容 return this[0] && this[0].nodeType === 1 ? //如果this[0]存在且是一個元素節點 this[0].innerHTML.replace(rinlinejQuery, "") : //讀取innerHTML屬性 null; // See if we can take a shortcut and just use innerHTML } else if ( typeof value =https://www.cnblogs.com/greatdesert/p/=="string" && !rnoInnerhtml.test( value ) && //html是代碼代碼且不含有script或style標簽， (jQuery.support.leadingWhitespace || !rleadingWhitespace.test( value )) && //瀏覽器不會忽略前導空白負，或者html代碼不以空白符開頭， !wrapMap[ (rtagName.exec( value ) || ["", ""])[1].toLowerCase() ] ) { //html代碼中的標簽不需要包裹父標簽就可以正確的被序列化 value = value.replace(rxhtmlTag, "<$1></$2>"); //修正自閉標簽 try { for ( var i = 0, l = this.length; i < l; i++ ) { //遍歷當前匹配元素 // Remove element nodes and prevent memory leaks if ( this[i].nodeType === 1 ) { //如果該節點是一個元素節點 jQuery.cleanData( this[i].getElementsByTagName("*") ); //先移除所有后代元素關聯的資料和事件 this[i].innerHTML = value; //嘗試直接設定屬性innerHTML插入HTML內容， } } // If using innerHTML throws an exception, use the fallback method } catch(e) { this.empty().append( value ); //如果在設定innerHTML時跑出了例外，則先呼叫empty()移除后代元素關聯的資料和事件、移除子元素，然后呼叫.append()插入新內容， } } else if ( jQuery.isFunction( value ) ) { //如果value是函式，則遍歷匹配元素集合，在每個元素上執行該函式，并取其回傳值作為新html內容，迭代呼叫.html(vlue)， this.each(function(i){ var self = jQuery( this ); self.html( value.call(this, i, self.html()) ); }); } else { this.empty().append( value ); } return this; //最后回傳this,以支持鏈式操作 }, })
對于text來說，它是通過createTextNode創建的文本節點來實作的，如下:
jQuery.fn.extend({ text: function( text ) { //獲取匹配元素集合中所有元素合并后的文本內容，或者設定每個元素的文本內容，設定時是通過createText()方法創建文本節點并append()進去的， if ( jQuery.isFunction(text) ) { //如果text是函式，則在每個匹配元素上執行該函式，并取其回傳值作為新文本內容，迭代呼叫.text(text)方法， return this.each(function(i) { var self = jQuery( this ); self.text( text.call(this, i, self.text()) ); //呼叫函式時，設定關鍵字this執行當前元素，傳入了兩個引數:當前元素在集合中的下標位置、當前元素的舊文本內容， }); } if ( typeof text !== "object" && text !== undefined ) { //如果引數text不是物件，也不是undefined,即可能是字串、數字或布林值， return this.empty().append( (this[0] && this[0].ownerDocument || document).createTextNode( text ) ); //先清空內容，然后創建文本節點，并插入每個匹配元素中 } return jQuery.text( this ); //如果沒有傳入引數或者引數text不合法(物件)，則呼叫jQuery.text(elem)獲取所有匹配元素合并后的文本內容(sizzle選擇器中)， }, })
比較簡單的
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/31439.html
標籤：jQuery