尝试在让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 节点排序 2
Jan 31 Javascript
15个款优秀的 jQuery 图片特效插件推荐
Nov 21 Javascript
js中复制行和删除行的操作实例
Jun 25 Javascript
jQuery大于号(&gt;)选择器的作用解释
Jan 13 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
Jan 13 Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
Sep 04 Javascript
vue通信方式EventBus的实现代码详解
Jun 10 Javascript
node.js实现上传文件功能
Jul 15 Javascript
解决vue的router组件component在import时不能使用变量问题
Jul 26 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
PHP5 安装方法
2006/10/09 PHP
初次接触php抽象工厂模式(Elgg)
2010/03/21 PHP
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
jquery向上向下取整适合分页查询
2014/09/06 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
javascript实现的固定位置悬浮窗口实例
2015/04/30 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
vue中使用echarts制作圆环图的实例代码
2018/07/27 Javascript
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
js实现时间日期校验
2020/05/26 Javascript
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
解决使用pycharm提交代码时冲突之后文件丢失找回的方法
2018/08/05 Python
python里运用私有属性和方法总结
2019/07/08 Python
pytorch SENet实现案例
2020/06/24 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
基于python的opencv图像处理实现对斑马线的检测示例
2020/11/29 Python
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
几道数据库的面试题或笔试题
2014/05/31 面试题
回门宴答谢词
2014/01/13 职场文书
文明餐桌活动方案
2014/02/11 职场文书
节水倡议书范文
2014/04/15 职场文书
班干部竞选演讲稿
2014/04/24 职场文书
3分钟演讲稿
2014/04/30 职场文书
加薪申请报告范本
2015/05/15 职场文书
2015年高三年级组工作总结
2015/07/21 职场文书
酒店厨房管理制度
2015/08/06 职场文书