尝试在让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实现的网站首页随机公告随机公告
Mar 14 Javascript
js中数组(Array)的排序(sort)注意事项说明
Jan 24 Javascript
js实现的复制兼容chrome和IE
Apr 03 Javascript
javascript中数组的多种定义方法和常用函数简介
May 09 Javascript
jQuery给多个不同元素添加class样式的方法
Mar 26 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
Jun 06 Javascript
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 Javascript
node.js版本管理工具n无效的原理和解决方法
Nov 24 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
微信小程序之 catalog 切换实现解析
Sep 12 Javascript
json解析大全 双引号、键值对不在一起的情况
Dec 06 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使HTML标签自动补全闭合函数代码
2012/10/04 PHP
php面向对象中的魔术方法中文说明
2014/03/04 PHP
PDO::errorInfo讲解
2019/01/28 PHP
csdn 博客的css样式 v3
2009/02/24 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
javascript弹出层输入框(示例代码)
2013/12/11 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
2014/07/27 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
javascript中checkbox使用方法实例演示
2015/11/19 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
jquery mobile实现可折叠的导航按钮
2017/03/11 Javascript
详解vue slot插槽的使用方法
2017/06/13 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
Vue实现图片与文字混输效果
2019/12/04 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
Python 多进程和数据传递的理解
2017/10/09 Python
Python获取本机所有网卡ip,掩码和广播地址实例代码
2018/01/22 Python
不到40行代码用Python实现一个简单的推荐系统
2019/05/10 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
Python模拟登录和登录跳转的参考示例
2020/10/30 Python
Python安装Bs4的多种方法
2020/11/28 Python
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
kfc实习自我鉴定
2013/12/14 职场文书
委托书范文
2014/04/02 职场文书
公司活动总结范文
2014/07/01 职场文书
学校端午节活动方案
2014/08/23 职场文书
办公室主任个人总结
2015/02/28 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
MySQL创建索引需要了解的
2021/04/08 MySQL