在使用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. SqlServer-truncate && delete && drop 的区别

    有些人在删除表的所有记录的时候,喜欢这样来——不给DELETE 语句提供WHERE 子句,表中的所有记录都将被删除.但这种方法是不可取的,正确的应该使用 TRUNCATE TABLE tb_name ...

  2. Ubuntu下libpcap安装步骤

    第一步,先安装GCC ,一般都会自动安装 sudo apt-get install build-essential 第二步,GNU M4可以从此处ftp.gnu.org/gnu/m4/ 下载 sudo ...

  3. Entity Framework 6.0 Tutorials(9):Stored Procedure Mapping

    Code First - Insert, Update, Delete Stored Procedure Mapping: Entity Framework 6 Code-First provides ...

  4. CentOS7下源码包方式安装Erlang

    1.官网上下载源码包:OTP 19.1 Source File 2.把源码放在source目录中 , 解压 :tar -zxvf otp_src_19.1.tar.gz [或者 直接下载 rpm包 e ...

  5. Azure 执行模型

    最后更新时间(英文版):01/20/2015 最后更新时间(中文版):04/11/2015 Azure 提供了用于运行应用程序的不同执行模型.每种模型提供一组不同服务,而你选择哪种模型完全取决于你要做 ...

  6. Terminologies in MVC: Part 2 (Razor Engine Syntax vs Web Form)

    By Abhishek Jaiswal :) on Mar 21, 2015 In this article we learn about Razor Engine Syntax vs Web For ...

  7. 换零钞——第九届蓝桥杯C语言B组(国赛)第一题

    原创 标题:换零钞 x星球的钞票的面额只有:100元,5元,2元,1元,共4种.小明去x星旅游,他手里只有2张100元的x星币,太不方便,恰好路过x星银行就去换零钱.小明有点强迫症,他坚持要求200元 ...

  8. ECS服务里或者阿里云服务器的二级域名设置方法

    我们要实现的效果是,xuxinshuai.abc.com ,具体怎么实现,看下面的流程 第一步:备案域名要有,假如就是www.abc.com 第二步:网站的服务器是IIS的情况下,在部署网站时,需要设 ...

  9. 有符号数和无符号数------c++程序设计原理与实践(进阶篇)

    有符号数与无符号数的程序设计原则: 当需要表示数值时,使用有符号数(如 int). 当需要表示位集合时,使用无符号数(如unsigned int). 有符号数和无符号数混合运算有可能会带来灾难性的后果 ...

  10. 生成HTML测试报告

    HTMLTestRunner是Python标准库unittest单元测试框架的一个扩展,可以生成易于使用的HTML测试报告,这个扩展很简单,只有一个HTMLTestRunner.py,下载地址:htt ...