尝试在让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 相关文章推荐
prototype class详解
Sep 07 Javascript
实现复选框全选/全不选切换
Dec 23 Javascript
限制文本字节数js代码
Mar 06 Javascript
Jquery同辈元素选中/未选中效果的实例代码
Aug 01 Javascript
jQuery替换字符串(实例代码)
Nov 13 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
May 15 Javascript
Javascript单例模式的介绍和实例
Oct 08 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 Javascript
js实现整体缩放页面适配移动端
Mar 31 Javascript
vue各种事件监听实例(小结)
Jun 24 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基础知识:类与对象(3) 构造函数和析构函数
2006/12/13 PHP
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
php利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
浅析php原型模式
2014/11/25 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
功能强大的php文件上传类
2016/08/29 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
2010/07/26 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
angular或者js怎么确定选中ul中的哪几个li
2017/08/16 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
2017/10/27 jQuery
JavaScript中Object值合并方法详解
2017/12/22 Javascript
详解vue组件基础
2018/05/04 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
python实现跨excel的工作表sheet之间的复制方法
2018/05/03 Python
python-Web-flask-视图内容和模板知识点西宁街
2019/08/23 Python
Python安装whl文件过程图解
2020/02/18 Python
html5使用window.postMessage进行跨域实现数据交互的一次实战
2021/02/24 HTML / CSS
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
澳大利亚在线划船、露营和钓鱼商店:BCF Australia
2020/03/22 全球购物
文员岗位职责范本
2014/03/08 职场文书
自行车广告词大全
2014/03/21 职场文书
低碳环保标语
2014/06/12 职场文书
党校毕业个人总结
2015/02/28 职场文书
2015年先进个人自荐书
2015/03/24 职场文书
校园歌手大赛主持词
2015/07/03 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
springboot中一些比较常用的注解总结
2021/06/11 Java/Android
React更新渲染原理深入分析
2022/12/24 Javascript