在使用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. Hyperledger Fabric Chaincode解析

    首先看下Blockchain结构,除了header指向下一个block的hash value外,block是由一组transaction构成, Transactions --> Blocks - ...

  2. 15.select into

    select into SELECT INTO 语句从一个表中选取数据,然后把数据插入另一个表中. SELECT INTO 语句常用于创建表的备份复件或者用于对记录进行存档. CREATE TABLE ...

  3. BBS后台发送邮件&修改文章

    一:Django发送邮件 在setting中配置 # EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend' EMAIL_HOST ...

  4. CSS3动画设置后台登录页背景切换图片

    CSS3的动画很实用很好用,简单几句话就可以做出一个好看而且过渡平滑的body背景图片,不多说,来来来,上代码 body{ animation:mybg 7s; -webkit-animation:m ...

  5. UVa 11149 Power of Matrix (矩阵快速幂，倍增法或构造矩阵)

    题意:求A + A^2 + A^3 + ... + A^m. 析:主要是两种方式,第一种是倍增法,把A + A^2 + A^3 + ... + A^m,拆成两部分,一部分是(E + A^(m/2))( ...

  6. 【2008nmj】BP二元分类

    在人的大脑里有数以万计的神经元,它们之间通过神经突触来连接.用以判断. BP神经网络 MATLAB实现:

  7. 小学四则运算生成器（Java） 刘少允，梁新男

    github传送门 项目相关要求 使用 -n 参数控制生成题目的个数.(实现) 使用 -r 参数控制题目中数值(自然数.真分数和真分数分母)的范围.(实现) 生成的题目中计算过程不能产生负数.(实现) ...

  8. Java集合类总结 （五）

    集合框架 为了避免进行不必要的随机访问操作,Java引入了一种标签接口RandomAccess, 这个接口没有任何方法,只是一个标签,用来标记一个集合是否应该进行随机访问操作: if (c insta ...

  9. CentOS Vi编辑器

    vim:通过vim a.cfg进入文档 i:编辑状态 ESC:返回不可编辑状态 dd:在不可编辑状态下,dd可删除光标所在的行,2dd删除两行,以此类推 u:在不可编辑状态下,u可恢复删除的行 yy: ...

  10. 21天学通C++学习笔记（三）：变量和常量

    1. 简述 内存是一种临时存储器,也被称为随机存取存储器(RAM),所有的计算机.智能手机及其他可编程设备都包含微处理器和一定数量的内存,用地址来定位不同的存储区域,像编号一样. 硬盘可以永久的存储数 ...