在使用JavaScript标签<script>的时候，其中type最常用的就是text/javascript

其实这个type还有其他用法，下面直接给出例子：

type属性为text/html的时候，<script>片断中定义一个被JS调用的代码，代码不会在页面上显示

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

再看上面的代码片段，我们在下面的代码中怎么使用，如下：

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

这里解释一下：其中有一个replace，在替换时，可以接受一个json字符串，然后根据json的key来对比js模块里的key，进行赋值！

另外，网上有一些比较好的关于 text/template 模版用法的插件js，也是个很好用的模版技术。

JavaScript的type属性等于text/html 例子的更多相关文章

  1. 让script的type属性等于text/html

    type属性为text/html的时候,<script>片断中定义一个被JS调用的代码,代码不会在页面上显示 <script id="commentTemplate&quo ...

  2. html <input>标签类型属性type(file、text、radio、hidden等)详细介绍

    html <input>标签类型属性type(file.text.radio.hidden等)详细介绍 转载请注明:文章转载自:[169IT-最新最全的IT资讯] html <inp ...

  3. <script language = "javascript">, <script type = "text/javascript">和<script language = "application/javascript">(转)

          application/javascript是服务器端处理js文件的mime类型,text/javascript是浏览器处理js的mime类型,后者兼容性更好(虽然application/ ...

  4. jquery html属性和text属性的区别

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. HTML <input> 标签的 type 属性

    HTML <input> 标签的 type 属性 HTML <input> 标签 实例 下面的表单拥有两个输入字段以及一个提交按钮: <form action=" ...

  6. js修改input的type属性问题

    js修改input的type属性有些限制.当input元素还未插入文档流之前,是可以修改它的值的,在ie和ff下都没问题.但如果input已经存在于页面,其type属性在ie下就成了只读属性了,不可以 ...

  7. input的type属性

    input的type属性:http://www.w3school.com.cn/tags/att_input_type.asp 基本语法: <input type="hidden&qu ...

  8. input表单的type属性详解，不同type不同属性之间区别

    目标:详解表单input标签type属性常用的属性值 一.input标签和它的type属性 PS:input 元素可以用来生成一个供用户输入数据的简单文本框. 在默认的情况下, 什么样的数据均可以输入 ...

  9. Python：bs4中 string 属性和 text 属性的区别及背后的原理

    刚开始接触 bs4 的时候,我也很迷茫,觉得 string 属性和 text 属性是一样的,不明白为什么要分成两个属性. html = '<p>hello world</p>' ...

随机推荐

  1. 面试题:java实例变量,局部变量,类变量 背1

    一.实例变量 也叫对象变量.类成员变量:从属于类由类生成对象时,才分配存储空间,各对象间的实例变量互不干扰,能通过对象的引用来访问实例变量.但在Java多线程中,实例变量是多个线程共享资源,要注意同步 ...

  2. linux ssh使用深度解析（key登录详解）

    linux ssh使用深度解析(key登录详解) SSH全称Secure SHell,顾名思义就是非常安全的shell的意思,SSH协议是IETF(Internet Engineering Task ...

  3. Java后端WebSocket的Tomcat实现(转载)

    一.WebSocket简单介绍 随着互联网的发展,传统的HTTP协议已经很难满足Web应用日益复杂的需求了.近年来,随着HTML5的诞生,WebSocket协议被提出,它实现了浏览器与服务器的全双工通 ...

  4. RocketMq2

  5. jqgrid控件列分组

    <%-- builed by manage.aspx.cmt [ver:2014.48.11] at 2014/10/11 16:48:33 --%> <%@ Page Langua ...

  6. css模块化思想（一）

    什么是css模块化思想?(what) 为了理解css模块化思想,我们首先了解下,什么是模块化,在百度百科上的解释是,在系统的结构中,模块是可组合.分解和更换的单元.模块化是一种 处理复杂系统分解成为更 ...

  7. js-day

    1.克莱托指数 公式 :体重(kg) / (身高(m) * 身高(m)) < 20 : 偏瘦 > 20 <25 : 正常 > 25 : 偏旁 步骤: 1.输入体重(weight ...

  8. css总结3：Flex 布局教程：Flex-demos（转）

    上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇&g ...

  9. ArcGIS 工作经历【IFeatureBuffer】【CAD转SHP】

    由于工作需要,需要基于ArcGIS进行二次开发,软件的开发过程当中有一个非常重要的功能,就是需要把CAD的数据转换为shp文件保存,方便后面的使用编辑,存储. 先说一下功能的前提,需要将CAD转换为s ...

  10. WebService 天气预报webservice接口

    WebService  天气预报webservice接口 地址:http://www.webxml.com.cn/WebServices/WeatherWebService.asmx 常用接口: 1. ...