尝试在让script的type属性等于text/html


Posted in Javascript onJanuary 15, 2013

我们可以在<script>片断中定义一个被JS调用的代码,但代码又不在页面上显示,这时,我们可以使用下面的方法:

<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是指分别用于指定区分大小写的匹配、全局匹配和多行匹配。 
$("#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,这个意思是说,当你单击按钮时,可以把commentTemplate的内容追到comment_ul_2里,这很有意思吧,呵呵!

而其中有一个replace,也很有意思,向在替换时,可以接受一个json字符串,然后根据json的key来对比js模块里的key,进行赋值!
真的很有意思!

Javascript 相关文章推荐
JavaScript Event学习第十一章 按键的检测
Feb 10 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 Javascript
js中document.write的那点事
Dec 12 Javascript
js实现图片无缝滚动
Dec 23 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
Jan 17 Javascript
基于JavaScript实现报警器提示音效果
Oct 27 Javascript
javascript填充默认头像方法
Feb 22 Javascript
每个 JavaScript 工程师都应懂的33个概念
Oct 22 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
Aug 28 Javascript
分享Angular http interceptors 拦截器使用(推荐)
Nov 10 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 Javascript
Js-$.extend扩展方法使方法参数更灵活
Jan 15 #Javascript
js弹出框轻量级插件jquery.boxy使用介绍
Jan 15 #Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
Jan 15 #Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 #Javascript
script的async属性以非阻塞的模式加载脚本
Jan 15 #Javascript
javascript真的不难-回顾一下基础知识
Jan 15 #Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
Jan 15 #Javascript
You might like
TMDPHP 模板引擎使用教程
2012/03/13 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
json-lib出现There is a cycle in the hierarchy解决办法
2010/02/24 Javascript
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
js打造数组转json函数
2015/01/14 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
2017/09/28 Javascript
jQuery 操作 HTML 元素和属性的方法
2018/11/12 jQuery
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
JSX在render函数中的应用详解
2019/09/04 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
python logging 日志的级别调整方式
2020/02/21 Python
python中turtle库的简单使用教程
2020/11/11 Python
python飞机大战游戏实例讲解
2020/12/04 Python
正规的求职信范文分享
2013/12/11 职场文书
经理管理专业自荐信范文
2013/12/31 职场文书
房产转让协议书
2014/04/11 职场文书
三八红旗集体先进事迹材料
2014/05/22 职场文书