尝试在让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 相关文章推荐
Jquery拖拽并简单保存的实现代码
Nov 28 Javascript
js 幻灯片的实现
Dec 06 Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
Jun 29 Javascript
详解JavaScript的策略模式编程
Jun 24 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 Javascript
JavaScript 对象详细整理总结
Sep 29 Javascript
Vue.use源码学习小结
Jun 20 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
Jul 04 Javascript
Javascript中的解构赋值语法详解
Apr 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
php 模拟POST|GET操作实现代码
2010/07/20 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
javascript动态添加表格数据行(ASP后台数据库保存例子)
2010/05/08 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
Perl Substr()函数及函数的应用
2015/12/16 Javascript
Javascript类型转换的规则实例解析
2016/02/23 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
2016/12/07 Javascript
详解小程序退出页面时清除定时器
2019/04/28 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
vue实现按需加载组件及异步组件功能
2019/05/27 Javascript
ES6 Generator函数的应用实例分析
2019/06/26 Javascript
node获取客户端ip功能简单示例
2019/08/24 Javascript
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
Python下线程之间的共享和释放示例
2015/05/04 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
一行代码让 Python 的运行速度提高100倍
2018/10/08 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
python实现猜拳小游戏
2020/04/05 Python
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
数控技术应用个人求职信范文
2014/02/03 职场文书
工厂总经理岗位职责
2014/02/07 职场文书
公益广告语集锦
2014/03/13 职场文书
公司承诺书格式
2014/05/21 职场文书
2014年保卫部工作总结
2014/11/21 职场文书
小学教师年度个人总结
2015/02/05 职场文书
农民工工资支付承诺书
2015/05/04 职场文书
投诉书范文
2015/07/02 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
导游词之湖北武当山
2019/09/23 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书
导游词之上海豫园
2019/10/24 职场文书
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers