尝试在让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插件的写法分享
Jun 12 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
Aug 12 Javascript
JavaScript中的some()方法使用详解
Jun 09 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 Javascript
javascript简单进制转换实现方法
Nov 24 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
微信小程序 this和that详解及简单实例
Feb 13 Javascript
js date 格式化
Feb 15 Javascript
微信小程序实现订单倒计时
Nov 01 Javascript
js校验开始时间和结束时间
May 26 Javascript
通过JS判断网页是否为手机打开
Oct 28 Javascript
JavaScript严格模式不支持八进制的问题讲解
Nov 07 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 escape URL编码
2008/12/10 PHP
PHP字符串的编码问题的详细介绍
2013/04/27 PHP
如何使用php判断所处服务器操作系统的类型
2013/06/20 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
不常用但很实用的PHP预定义变量分析
2019/06/25 PHP
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
python中去空格函数的用法
2014/08/21 Python
使用CodeMirror实现Python3在线编辑器的示例代码
2019/01/14 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
python实现AES加密和解密
2019/03/27 Python
python3实现网页版raspberry pi(树莓派)小车控制
2020/02/12 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
Python通过socketserver处理多个链接
2020/03/18 Python
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
美国智能家居专家:tink
2019/06/04 全球购物
如何编写优秀的食品项目创业计划书
2014/01/23 职场文书
先进个人事迹材料
2014/01/25 职场文书
医学院毕业生自荐信范文
2014/03/06 职场文书
2014学雷锋活动总结
2014/03/09 职场文书
公务员个人考察材料
2014/12/23 职场文书
元宵节寄语大全
2015/02/27 职场文书
2015年护士节慰问信
2015/03/23 职场文书
申请吧主发表的感言
2015/08/03 职场文书
2016年入党心得体会范文
2016/01/23 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang
ORACLE中dbms_output.put_line输出问题的解决过程
2022/06/28 Oracle