尝试在让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 相关文章推荐
js表格分页实现代码
Sep 18 Javascript
jquery.ui.draggable中文文档
Nov 24 Javascript
JavaScript Memoization 让函数也有记忆功能
Oct 27 Javascript
JavaScript Array Flatten 与递归使用介绍
Oct 30 Javascript
JS实现程序暂停与继续功能代码解读
Oct 10 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
Apr 07 Javascript
带你了解session和cookie作用原理区别和用法
Aug 14 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 Javascript
vue登录以及权限验证相关的实现
Oct 25 Javascript
node事件循环和process模块实例分析
Feb 14 Javascript
JS实现分页导航效果
Feb 19 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
西德产收音机
2021/03/01 无线电
网页游戏开发入门教程二(游戏模式+系统)
2009/11/02 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
php格式文件打开的四种方法
2018/02/24 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
详解微信小程序-canvas绘制文字实现自动换行
2019/04/26 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
python3图片转换二进制存入mysql
2013/12/06 Python
使用python编写脚本获取手机当前应用apk的信息
2014/07/21 Python
Python格式化css文件的方法
2015/03/10 Python
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
Ubuntu下使用Python实现游戏制作中的切分图片功能
2018/03/30 Python
django rest framework 数据的查找、过滤、排序的示例
2018/06/25 Python
Python高级特性切片(Slice)操作详解
2018/09/27 Python
Django项目中使用JWT的实现代码
2019/11/04 Python
使用 Python 在京东上抢口罩的思路详解
2020/02/27 Python
解决pip install psycopg2出错问题
2020/07/09 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
北京一家公司的.net开发工程师笔试题
2012/04/17 面试题
工程造价专业大学生自荐信
2013/10/01 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
师范生小学见习总结
2015/06/23 职场文书
2015年高三年级组工作总结
2015/07/21 职场文书
入门学习Go的基本语法
2021/07/07 Golang
python区块链实现简版工作量证明
2022/05/25 Python