嘗試在讓script的type屬性等于text/html
更新時(shí)間：2013年01月15日 16:14:09 作者：
我們可以在script片斷中定義一個(gè)被JS調(diào)用的代碼，但代碼又不在頁(yè)面上顯示，這時(shí)，我們可以使用下面的方法;當(dāng)script中的type等于text/html時(shí)我們可以做些什么呢？感興趣的朋友可以了解下啊
我們可以在<script>片斷中定義一個(gè)被JS調(diào)用的代碼，但代碼又不在頁(yè)面上顯示，這時(shí)，我們可以使用下面的方法：
<script id="commentTemplate" type="text/html">
<li>
<div class="photo">
<a href="#">
<img src="[UserImg]" /></a></div>
<p>
<a href="#">[UserName]：</a><span class="time">[CreateDate]</span></p>
<div class="clear">
</div>
</li>
</script>
<div id="comment_ul_2">
</div>
<input type="button" id="addFun" value="click me" />
<script type="text/javascript">
var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm'); //i g m是指分別用于指定區(qū)分大小寫的匹配、全局匹配和多行匹配。
$("#addFun").click(function () {
var html = document.getElementById("commentTemplate").innerHTML;
var source = html.replace(reg, function (node, key) { return { 'UserImg': '1', 'UserName': 'zhang', 'CreateDate': '2011-1-1'}[key]; });
$("#comment_ul_2").append(source);
});
var zzl = "name:[name]";
zzl = zzl.replace(reg, function (node, key) { return { 'name': '占占'}[key]; });
alert(zzl);
</script>
OK，這個(gè)意思是說(shuō)，當(dāng)你單擊按鈕時(shí)，可以把commentTemplate的內(nèi)容追到comment_ul_2里，這很有意思吧，呵呵！
而其中有一個(gè)replace，也很有意思，向在替換時(shí)，可以接受一個(gè)json字符串，然后根據(jù)json的key來(lái)對(duì)比js模塊里的key，進(jìn)行賦值！
真的很有意思！
復(fù)制代碼 代碼如下:
<script id="commentTemplate" type="text/html">
<li>
<div class="photo">
<a href="#">
<img src="[UserImg]" /></a></div>
<p>
<a href="#">[UserName]：</a><span class="time">[CreateDate]</span></p>
<div class="clear">
</div>
</li>
</script>
復(fù)制代碼 代碼如下:
<div id="comment_ul_2">
</div>
<input type="button" id="addFun" value="click me" />
<script type="text/javascript">
var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm'); //i g m是指分別用于指定區(qū)分大小寫的匹配、全局匹配和多行匹配。
$("#addFun").click(function () {
var html = document.getElementById("commentTemplate").innerHTML;
var source = html.replace(reg, function (node, key) { return { 'UserImg': '1', 'UserName': 'zhang', 'CreateDate': '2011-1-1'}[key]; });
$("#comment_ul_2").append(source);
});
var zzl = "name:[name]";
zzl = zzl.replace(reg, function (node, key) { return { 'name': '占占'}[key]; });
alert(zzl);
</script>
OK，這個(gè)意思是說(shuō)，當(dāng)你單擊按鈕時(shí)，可以把commentTemplate的內(nèi)容追到comment_ul_2里，這很有意思吧，呵呵！
而其中有一個(gè)replace，也很有意思，向在替換時(shí)，可以接受一個(gè)json字符串，然后根據(jù)json的key來(lái)對(duì)比js模塊里的key，進(jìn)行賦值！
真的很有意思！
相關(guān)文章
javascript簡(jiǎn)單鏈?zhǔn)秸{(diào)用案例分析
這篇文章主要介紹了javascript簡(jiǎn)單鏈?zhǔn)秸{(diào)用,結(jié)合具體實(shí)例形式模擬jQuery分析了鏈?zhǔn)秸{(diào)用的原理與具體實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了在頁(yè)面加載之后執(zhí)行JavaScript的詳細(xì)過(guò)程，本文通過(guò)實(shí)例代碼文字解說(shuō)給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06
html頁(yè)面加載之后的事件如何處理，使用js中的window.onload便可輕松做到，需要的朋友可以了解下2013-10-10
這篇文章主要介紹了JS Canvas接口和動(dòng)畫效果大全，對(duì)Canvas感興趣的同學(xué)，可以參考下2021-04-04
用javascript實(shí)現(xiàn)自動(dòng)輸出網(wǎng)頁(yè)文本
這篇文章主要介紹了用javascript實(shí)現(xiàn)自動(dòng)輸出網(wǎng)頁(yè)文本，用到兩個(gè)函數(shù)：setTimeout(),遞歸和String.substring();,需要的朋友可以參考下2015-07-07
JavaScript實(shí)現(xiàn)仿Clock ISO時(shí)鐘
這篇文章給大家分享了JavaScript實(shí)現(xiàn)仿Clock ISO時(shí)鐘的方法以及實(shí)例代碼，有興趣的朋友參考學(xué)習(xí)下下。2018-06-06
javascript iframe內(nèi)的函數(shù)調(diào)用實(shí)現(xiàn)方法
用下面的方法可以調(diào)用iframe中的函數(shù)，實(shí)現(xiàn)一些比較特殊的效果，不過(guò)能跨域的。2009-07-07
這篇文章主要介紹了JavaScript 聲明提升的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-09-09
微信小程序利用for循環(huán)解決內(nèi)容變更問題
這篇文章主要介紹了微信小程序利用for循環(huán)解決內(nèi)容變更問題 ，本文分步驟通過(guò)實(shí)例代碼詳解給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
用js實(shí)現(xiàn)鍵盤方向鍵翻頁(yè)功能的代碼
用js實(shí)現(xiàn)鍵盤方向鍵翻頁(yè)功能的代碼...2007-06-06