尝试在让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 解析多维的Json数据格式
Nov 02 Javascript
Javascript new关键字的玄机 以及其它
Aug 25 Javascript
Javascript 面向对象(二)封装代码
May 23 Javascript
jQuery基本过滤选择器使用介绍
Apr 18 Javascript
jquery 中的each()跳出循环的语句
May 23 Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
javascript检查浏览器是否支持flash的实现代码
Aug 14 Javascript
JavaScript制作简易的微信打飞机
Mar 31 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 Javascript
jQuery简单设置文本框回车事件的方法
Aug 01 Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 Javascript
Angular页面间切换及传值的4种方法
Nov 04 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 无线电
关于php循环跳出的问题
2013/07/01 PHP
fromCharCode和charCodeAt 方法
2006/12/27 Javascript
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
深入了解javascript中的prototype与继承
2013/04/14 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
jQuery ajax时间差导致的变量赋值问题分析
2016/01/22 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
fullPage.js和CSS3实现全屏滚动效果
2017/05/05 Javascript
web.js.字符串与正则表达式操作
2017/05/13 Javascript
js实现数组内数据的上移和下移的实例
2017/11/14 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
2018/01/07 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
vue实现导航菜单和编辑文本的示例代码
2020/07/04 Javascript
python中的对象拷贝示例 python引用传递
2014/01/23 Python
朴素贝叶斯算法的python实现方法
2014/11/18 Python
python制作websocket服务器实例分享
2016/11/20 Python
使用pandas读取文件的实现
2019/07/31 Python
Python 爬虫批量爬取网页图片保存到本地的实现代码
2020/12/24 Python
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
一套C#面试题
2013/10/09 面试题
网络书店创业计划书
2014/02/07 职场文书
小学生开学感言
2014/02/28 职场文书
导航工程专业自荐信
2014/09/02 职场文书
平安建设汇报材料
2014/12/29 职场文书
2015年植树节活动总结
2015/02/06 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
孔繁森观后感
2015/06/10 职场文书
jquery插件实现悬浮的菜单
2021/04/24 jQuery
HashMap实现保存两个key相同的数据
2021/06/30 Java/Android
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android