尝试在让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脚本性能优化注意事项
Nov 18 Javascript
面向对象的编程思想在javascript中的运用上部
Nov 20 Javascript
几个有趣的Javascript Hack
Jul 24 Javascript
解析URI与URL之间的区别与联系
Nov 22 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
Mar 25 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 Javascript
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
Sep 25 Javascript
node 版本切换的实现
Feb 02 Javascript
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
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 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
PHP实现给定一列字符,生成指定长度的所有可能组合示例
2019/06/22 PHP
JQuery 技巧和窍门整理(8个)
2010/04/22 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
求js数组的最大值和最小值的四种方法
2017/03/03 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
Angular使用操作事件指令ng-click传多个参数示例
2018/03/27 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
python生成器generator用法实例分析
2015/06/04 Python
利用python模拟sql语句对员工表格进行增删改查
2017/07/05 Python
python批量下载抖音视频
2019/06/17 Python
django 类视图的使用方法详解
2019/07/24 Python
K最近邻算法(KNN)---sklearn+python实现方式
2020/02/24 Python
解决django migrate报错ORA-02000: missing ALWAYS keyword
2020/07/02 Python
Python面向对象实现方法总结
2020/08/12 Python
Python基于callable函数检测对象是否可被调用
2020/10/16 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
Python爬取某平台短视频的方法
2021/02/08 Python
HTML5 用动画的表现形式装载图像
2016/03/08 HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
加工操作管理制度
2014/01/19 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
开展党的群众路线教育实践活动情况汇报
2014/11/05 职场文书
2014年计生工作总结
2014/11/21 职场文书
解决Go gorm踩过的坑
2021/04/30 Golang
Oracle创建只读账号的详细步骤
2021/06/07 Oracle
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python
python对文档中元素删除,替换操作
2022/04/02 Python
Windows server 2012 配置Telnet以及用法详解
2022/04/28 Servers