在使用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. 批量添加数据SqlBulkCopy

    using System.Data.SqlClient; class Program { static void Main() { string connectionString = GetConne ...

  2. Java虚拟机学习总结之OutOfMemoryError异常

    参考:深入理解java虚拟机一书 开始之前,我们也应当搞清楚连个概念,内存泄漏Memory Leak 内存溢出: 内存泄漏:程序中间动态分配了内存,但是在程序结束时没有释放内存,造成这部分内存不可用. ...

  3. Luogu 2597 [ZJOI2012]灾难

    BZOJ 2815. 解法还是挺巧妙的. 放上写得很详细很好懂的题解链接  戳这里. 一个物种$x$如果要灭绝,那么沿着它的入边反向走走走,一定可以走到一个点$y$,如果这个点$y$的物种灭绝了,那么 ...

  4. 使用pycharm运行调试scrapy

    摘要 Scrapy是爬虫抓取框架,Pycharm是强大的python的IDE,为了方便使用需要在PyCharm对scrapy程序进行调试 python PyCharm Scrapy scrapy指令其 ...

  5. 用JQuery获取输入框中的光标位置

    (function ($, undefined) { $.fn.getCursorPosition = function () { var el = $(this).get(0); var pos = ...

  6. js打开所在文件夹并选中文件

    该方法只支持IE. var wsh = new ActiveXObject("WSCript.shell");  var src = "/select," + ...

  7. 异步串行通信的XON与XOFF

    在单片机的异步串行通信中,putchar函数中的实现中反复用到了XON和XOFF,定义原型如下: #define XON 0x11#define XOFF 0x13 查找ASCII码表,这两个对应的是 ...

  8. EBS取Web字段SQL操作文档

    1)  安全性—>责任-à定义 在这个路径下,输入责任名称,可以查询这个责任的请求组的名称 2)  organization_id 和 org_id的功能 3)  查找网页上的字段 Naviga ...

  9. Size Assertion

    Size Assertion每一个响应包含的字节大小,可以设置大小等于,大于,小于,不等于给定的字节数. Apply to:应用范围,一般勾选Main samle only即可. Response S ...

  10. 上课总结-数据结构c++

    class 1 数据结构就是指 按一定的逻辑结构组成的一批数据,使用某种存储结构将这批数据存储于计算机中,并在这些数据上定义了一个运算集合. 例1.煤气管道的铺设问题.如图需为城市的各小区之间铺设煤气 ...