尝试在让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的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
Apr 02 Javascript
Extjs优化(一)删除冗余代码提高运行速度
Apr 15 Javascript
js仿百度有啊通栏展示效果实现代码
May 28 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
js注入 黑客之路必备!
Sep 14 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
Feb 09 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
Vue中mintui的field实现blur和focus事件的方法
Aug 25 Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 Javascript
javascript 原型与原型链的理解及实例分析
Nov 23 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.NET的入门教程
2006/10/09 PHP
简单的php 验证图片生成函数
2009/05/21 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
判断控件是否已加载完成的代码
2010/02/24 Javascript
JQuery 选择和过滤方法代码总结
2010/11/19 Javascript
js使用for循环及if语句判断多个一样的name
2014/09/09 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
JS 对象(Object)和字符串(String)互转方法
2016/05/20 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
vue中实现在外部调用methods的方法(推荐)
2018/02/08 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
js里面的变量范围分享
2020/07/18 Javascript
Vue实现多页签组件
2021/01/14 Vue.js
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python写的一个squid访问日志分析的小程序
2014/09/17 Python
python统计cpu利用率的方法
2015/06/02 Python
Python中音频处理库pydub的使用教程
2017/06/07 Python
python解析html提取数据,并生成word文档实例解析
2018/01/22 Python
Django框架登录加上验证码校验实现验证功能示例
2019/05/23 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
生产总经理岗位职责
2013/12/19 职场文书
元旦晚会邀请函
2014/01/27 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
出生医学证明书
2014/09/15 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
市场督导岗位职责
2015/04/10 职场文书
vue3中的组件间通信
2021/03/31 Vue.js
解决hive中导入text文件遇到的坑
2021/04/07 Python
Python中glob库实现文件名的匹配
2021/06/18 Python
Nginx进程调度问题详解
2021/09/25 Servers
A22国内电台短波广播频率表
2022/05/10 无线电