当<script>中的type等于text/html的妙用
我们可以在<script>片断中定义一个被JS调用的代码,但代码又不在页面上显示,这时,我们可以使用下面的方法:

1 <script id="commentTemplate" type="text/html">
2 <li>
3 <div class="photo">
4 <a href="#">
5 <img src="[UserImg]" /></a></div>
6 <p>
7 <a href="#">[UserName]:</a><span class="time">[CreateDate]</span></p>
8 <div class="clear">
9 </div>
10 </li>
11 </script>


1 <div id="comment_ul_2">
2 </div>
3 <input type="button" id="addFun" value="click me" />
4 <script type="text/javascript">
5 var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm'); //i g m是指分别用于指定区分大小写的匹配、全局匹配和多行匹配。
6 $("#addFun").click(function () {
7 var html = document.getElementById("commentTemplate").innerHTML;
8 var source = html.replace(reg, function (node, key) { return { 'UserImg': '1', 'UserName': 'zhang', 'CreateDate': '2011-1-1'}[key]; });
9 $("#comment_ul_2").append(source);
10 });
11
12 var zzl = "name:[name]";
13 zzl = zzl.replace(reg, function (node, key) { return { 'name': '占占'}[key]; });
14 alert(zzl);
15
16 </script>

OK,这个意思是说,当你单击按钮时,可以把commentTemplate的内容追到comment_ul_2里,这很有意思吧,呵呵!
而其中有一个replace,也很有意思,向在替换时,可以接受一个json字符串,然后根据json的key来对比js模块里的key,进行赋值!
真的很有意思!
当<script>中的type等于text/html的妙用的更多相关文章
- 区别script中的type=”text/javascript”和language=”Javascript”
内容提要 在制作网页的时候,往往需要在页面中使用客户端能够运行的JS代码,因此,都需要添加引用.JS引用一般有type="text/javascript"和language=&qu ...
- 让script的type属性等于text/html
type属性为text/html的时候,<script>片断中定义一个被JS调用的代码,代码不会在页面上显示 <script id="commentTemplate&quo ...
- script标签中type为"text/x-template"或"text/html"
写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况,一般的写法都是使用+号以字符串的形式拼接,如果是短点的还好,如果很长很长的话就会拼接到令人崩溃了. 比如 ...
- JavaScript的type属性等于text/html 例子
在使用JavaScript标签<script>的时候,其中type最常用的就是text/javascript 其实这个type还有其他用法,下面直接给出例子: type属性为text/ht ...
- <script>中的代码
<script type="text/javascript"> $(document).ready(function () { $.formValidator.init ...
- 当target属性在XHTML script中无效时
<a href="#" target=_blank></a>target此属性能够使链接在新窗口打开,但是在XHTML script中无效时. 那么解决方案 ...
- script标签的type="test/html"时
们可以在<script>片断中定义一个被JS调用的代码,但代码又不在页面上显示,这时,我们可以使用下面的方法: 1 <script id="commentTemplate& ...
- Java script 中的面向对象1
Java script 中的面向对象 对象 对象是Javascript的基本数据类型,对象是一种复合值,将很多的键值对聚合在一起使用.对象可看做是属性的无序集合,每个属性都是一个名/值对.属性名其实是 ...
- JSP中 input type 用法
JSP中 input type 用法 Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍. 1,type=te ...
随机推荐
- effective c++ 条款7 declare virtual destructor for polymophyc base class
这似乎很明显. 如果base class的destructor不是virtual,当其derived class作为基类使用,析构的时候derived class的数据成员将不会被销毁. 举个例子 我 ...
- 同台电脑部署多组Tomcat负载均衡(或集群)
可能这种需求比较少见,不过如果手上服务器不够用.可以考虑先这么干着.. 具体Tomcat怎么搭集群,就不在这细说了.只写同台电脑部署多组集群需要修改和注意的地方. 一.Apache 先是Apache, ...
- 玩转Web之easyui(三)-----easy ui dataGird 重新指定url以获取不同数据源信息
如果已经写了一个dataGird并且已经通过url绑定数据源,能不能在其他地方改变url使其从不同数据源获取信息,从而实现查询等操作?答案当然是肯定的,而且仅需要几行代码 $('#btnq').bin ...
- sql基础之DDL(Data Definition Languages)
好久没写SQL语句了,复习一下. DDL数据定义语言,DDL定义了不同的数据段.数据库.表.列.索引等数据库对象的定义.经常使用的DDL语句包含create.drop.alter等等. 登录数据:my ...
- [渣译文] SignalR 2.0 系列:SignalR的高频实时通讯
原文:[渣译文] SignalR 2.0 系列:SignalR的高频实时通讯 英文渣水平,大伙凑合着看吧…… 这是微软官方SignalR 2.0教程Getting Started with ASP.N ...
- 再谈Hibernate级联删除——JPA下的Hibernate实现一对多级联删除CascadeType.DELETE_ORPHAN
声明: 1.本文系原创,非抄袭或转载过来的. 2.本文论点都亲手做过实验论证. 3.本文所讲的Hibernate配置都基于注解的方式,hbm语法未提供. 非常多人对持久层概念搞不清JPA.Hibern ...
- 开发一个Swing功能时的一点总结
对JTextField进行效验,有两个途径:(1)是使用javax.swing.InputVerifier在获取焦点时进行校验(2)在点击“确定”按钮的监听事件中对控件的值进行校验 鉴于涉及的业务比较 ...
- Visual Studio中开发
如何在Visual Studio中开发自己的代码生成器插件 Visual Studio是美国微软公司开发的一个基本完整的开发工具集,它包括了整个软件生命周期中所需要的大部分工具,如UML工具.代 ...
- Oracle Product Hub / Product Lifecycle Management / Product Information Management / Advanced Produc
In this Document Goal Solution 1. Master List showing sample code for APIs in Product Data Hub ...
- C#中调用c++的dll具体创建与调用步骤,亲测有效~
使用的工具是VS2010哦~其他工具暂时还没试过 我新建的工程名是my21dll,所以会生成2个同名文件.接下来需要改动的只有画横线的部分 下面是my21dll.h里面的... 下面的1是自动生成的不 ...