jQuery.parseHTML() 函數(shù)詳解
定義和用法
$.parseHTML() 函數(shù)用于將HTML字符串解析為對(duì)應(yīng)的DOM節(jié)點(diǎn)數(shù)組。
注意:
1. 該函數(shù)將使用原生的DOM元素創(chuàng)建函數(shù)把HTML字符串轉(zhuǎn)換為一個(gè)DOM元素的集合,你可以將這些DOM元素插入到文檔中。
2. 如果沒(méi)有指定context參數(shù),或該參數(shù)為null或undefined,則默認(rèn)為當(dāng)前document。如果創(chuàng)建的DOM元素用于另一個(gè)文檔,例如iframe,則應(yīng)該指定該iframe的document對(duì)象。
安全考慮:大多數(shù)jQuery API都允許HTML字符串在HTML中包含運(yùn)行腳本。 jQuery.parseHTML()不會(huì)運(yùn)行解析的HTML中的腳本,除非你明確將參數(shù)keepScripts指定為true。 不過(guò),大多數(shù)環(huán)境仍然可以間接地執(zhí)行腳本,例如:通過(guò)屬性。調(diào)用者應(yīng)該避免 這樣做,并清理或轉(zhuǎn)義諸如URL、cookie等來(lái)源的任何不受信任的輸入,從而預(yù)防出現(xiàn)這種情況。 出于未來(lái)的兼容性考慮,當(dāng)參數(shù)keepScripts被省略或?yàn)閒alse時(shí),調(diào)用者應(yīng)該不依賴任何運(yùn)行腳 本內(nèi)容的能力。
語(yǔ)法
$.parseHTML( htmlString [, context ] [, keepScripts ] )
| 參數(shù) | 描述 |
|---|---|
| htmlString | String類型 需要解析并轉(zhuǎn)為DOM節(jié)點(diǎn)數(shù)組的HTML字符串 |
| context | Element類型 指定在哪個(gè)Document中創(chuàng)建元素,默認(rèn)為當(dāng)前文檔的document |
| keepScripts | Boolean類型 指定傳入的HTML字符串中是否包含腳本,默認(rèn)為false |
實(shí)例
使用一個(gè)HTML字符串創(chuàng)建一個(gè)數(shù)組的Dom節(jié)點(diǎn),并將它插入一個(gè)div
<div id="log">
<h3>Content:</h3>
</div>
<script>
$(function () {
var $log = $( "#log" ),
str = "hello, <b>my name is</b> jQuery.",
html = $.parseHTML( str ),
nodeNames = [];
//添加已解析的HTML
$log.append( html );
//集合已解析HTML的節(jié)點(diǎn)名稱
$.each( html, function( i, el ) {
nodeNames[i] = "<li>" + el.nodeName + "</li>";
});
// 插入節(jié)點(diǎn)名
$log.append( "<h3>Node Names:</h3>" );
$( "<ol></ol>" )
.append( nodeNames.join( "" ) )
.appendTo( $log );
})
</script>
示例&說(shuō)明
以下是與jQuery.parseHTML()函數(shù)相關(guān)的jQuery示例代碼,以演示jQuery.parseHTML()函數(shù)的具體用法:
// "<\/script>"必須通過(guò)\將/轉(zhuǎn)義,否則JS會(huì)認(rèn)為已經(jīng)到了腳本結(jié)束的位置
var html = 'Hello,<b>CodePlayer</b><script type="text/javascript">alert("執(zhí)行腳本代碼");<\/script>';
var doms = $.parseHTML( html );
// 不會(huì)執(zhí)行腳本代碼
$("#n1").append(doms);
alert("分割線");
doms = $.parseHTML( html, true );
// 會(huì)執(zhí)行腳本代碼
$("#n1").append(doms);
返回值
jQuery.parseHTML()函數(shù)的返回值為Array類型,返回解析指定HTML字符串后的DOM節(jié)點(diǎn)數(shù)組。
jQuery.parseHTML使用原生方法將字符串轉(zhuǎn)換為一個(gè)DOM節(jié)點(diǎn)的集合,然后可以插入到文檔。 這些方法渲染所有尾隨或前導(dǎo)文本(即使只是空格)。 為了防止尾隨/前導(dǎo)空格被轉(zhuǎn)換為文本節(jié)點(diǎn),你可以通過(guò)將HTML字符串傳遞給jQuery .trim。
默認(rèn)情況下,如果沒(méi)有指定或給定null 或 undefined,context是當(dāng)前的document。如果HTML被用在另一個(gè)document中,比如一個(gè)iframe,該frame的文件可以使用。
在3.0中,這種默認(rèn)行為已經(jīng)被改變。如果沒(méi)有指定context,或者給定值為null 或 undefined,那么將使用一個(gè)新的document。這有可能會(huì)提高安全性,因?yàn)楫?dāng)HTML解析時(shí),內(nèi)嵌的事件將不會(huì)執(zhí)行。一旦解析的HTML注入到文檔中它會(huì)執(zhí)行,但是這給工具一個(gè)機(jī)會(huì),遍歷創(chuàng)建DOM和刪除任何東西被視為不安全。這種改進(jìn)并不適用于jQuery.parseHTML的內(nèi)部使用,因?yàn)樗麄兺ǔ鬟f給當(dāng)前文檔。因此,如類似$( "#log" ).append( $( htmlString ) )的聲明,仍然受制于惡意代碼注入。
Security Considerations(安全注意事項(xiàng))
大多數(shù)的jQuery的API接受的HTML字符串將運(yùn)行所包含在HTML中的腳本。jQuery.parseHTML不運(yùn)行HTML中解析出來(lái)的腳本,除非 keepScripts參數(shù)為true。然而,它仍然是可能在大多數(shù)環(huán)境中間接地執(zhí)行腳本,例如通過(guò)<img onerror>屬性。調(diào)用者應(yīng)該意識(shí)到這一點(diǎn),并通過(guò)清理或避免任何不可信來(lái)源的輸入,如URL或cookies,來(lái)防止它。為了未來(lái)的兼容性,當(dāng)keepScripts為不確定的或false時(shí),調(diào)用者不應(yīng)該依賴于這個(gè)能力來(lái)運(yùn)行任何腳本內(nèi)容。
- 解決jquery有正確返回值但不執(zhí)行success函數(shù)的問(wèn)題
- jQuery中常用動(dòng)畫(huà)效果函數(shù)知識(shí)點(diǎn)整理
- jQuery實(shí)現(xiàn)ajax回調(diào)函數(shù)帶入?yún)?shù)的方法示例
- 基于jquery trigger函數(shù)無(wú)法觸發(fā)a標(biāo)簽的兩種解決方法
- JavaScript自執(zhí)行函數(shù)和jQuery擴(kuò)展方法詳解
- jQuery使用bind函數(shù)實(shí)現(xiàn)綁定多個(gè)事件的方法
- jquery中封裝函數(shù)傳遞當(dāng)前元素的方法示例
- jQuery中map函數(shù)的兩種方式
- jquery中用函數(shù)來(lái)設(shè)置css樣式
- jquery的$().each和$.each的區(qū)別
相關(guān)文章
jQuery實(shí)現(xiàn)郵箱下拉列表自動(dòng)補(bǔ)全功能
在一些網(wǎng)站我們經(jīng)??吹疆?dāng)我們要輸入郵箱的時(shí)候,還沒(méi)有填寫完,就會(huì)出現(xiàn)一系列下拉列表,幫助我們自動(dòng)補(bǔ)全郵箱,怎么實(shí)現(xiàn)的呢?今天下面給大家分享基于jquery實(shí)現(xiàn)郵箱下拉列表自動(dòng)補(bǔ)全功能,一起看看吧2016-09-09
Jquery插件easyUi表單驗(yàn)證提交(示例代碼)
本篇文章主要是對(duì)Jquery插件easyUi表單驗(yàn)證提交的示例代碼進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12
用jquery設(shè)置按鈕的disabled屬性的實(shí)現(xiàn)代碼
在html標(biāo)簽中設(shè)置按鈕被禁用,可以使用如下代碼2010-11-11
基于jQuery Easyui實(shí)現(xiàn)登陸框界面
本文通過(guò)實(shí)例代碼給大家分享了基于jQuery Easyui實(shí)現(xiàn)登陸框界面,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的的朋友參考下吧2017-07-07
jQuery zTree插件快速實(shí)現(xiàn)目錄樹(shù)
這篇文章主要為大家詳細(xì)介紹了jQuery zTree插件快速實(shí)現(xiàn)目錄樹(shù),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-08-08
jquery easyui中treegrid用法的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)jquery easyui中treegrid用法的簡(jiǎn)單實(shí)例進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02
基于jquery實(shí)現(xiàn)的鼠標(biāo)拖拽元素復(fù)制并寫入效果
基于jquery實(shí)現(xiàn)的鼠標(biāo)拖拽元素復(fù)制并寫入效果的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-08-08
再分享70+免費(fèi)的jquery 圖片滑塊效果插件和教程
這些jQuery插件同樣可以實(shí)現(xiàn)圖片和內(nèi)容的滑塊效果。下面的這些jQuery插件的Demo網(wǎng)站我都測(cè)試了一些,都可以正常訪問(wèn),我相信那么多款插件中總會(huì)有你喜歡的2014-12-12

