当<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 ...
随机推荐
- C++包括头文件<>和""差额
#include "book.h" #include<iostream.h> 在刚開始学习都会有这样的迷惑.有的程序用<>.有的却用"" ...
- [LeetCode299]Bulls and Cows
题目: You are playing the following Bulls and Cows game with your friend: You write down a number and ...
- 2013成都邀请赛J称号||HDU4725 The Shortest Path in Nya Graph(spfa+slf最短的优化)
职务地址:HDU 4725 这题卡了好长时间了,建图倒是会建,可是不会最短路的算法优化,本以为都须要堆去优化的,打算学了堆之后再来优化.可是昨晚CF的一道题..(那题也是不优化过不了..)然后我就知道 ...
- asm 盘头损失,破坏
BUG 14693394 – ORA-15196: INVALID ASM BLOCK HEADER [KFC.C:26076] [ENDIAN_KFBH] BUG 14758001 – ORA-15 ...
- CSS——(2)与标准流盒模型
部分博客<CSS--(1)基础>中简介了CSS的概念和几种用法,如今主要是介绍其的核心内容. 盒子模型 为了理解盒子模型,我们能够先从生活中的盒子入手.盒子是用来放置物品的,内部除了有物品 ...
- Swift 书面 ToDo App
下面的代码是使用的全部Xcode Version 6.0.1 (6A317)书面. 因为当使用团队开发stroyboard在并购的诸多不便的时间,所有或使用.xib该文件准备ToDo App. 想要实 ...
- SQL Server高可用——日志传送(4-3)——使用
原文:SQL Server高可用--日志传送(4-3)--使用 顺接上一篇:SQL Server高可用--日志传送(4-2)--部署 本文为本系列最重要的一篇,讲述如何使用日志传送及一些注意事项.从上 ...
- JDK自带的监控分析工具JConsole
非常多开发人员认为自己懂Java编程.事实是大多数开发人员都仅仅领会到了Java平台的皮毛.所学也仅仅够应付工作. 作者将深度挖掘Java平台的核心功能.揭示一些鲜为人知的事实.帮助您解决最棘手的编程 ...
- 使用CASE表达式替代SQL Server中的动态SQL
原文:使用CASE表达式替代SQL Server中的动态SQL 翻译自: http://www.mssqltips.com/sqlservertip/1455/using-the-case-expre ...
- Unity3D合并着色器
unity 3d倒每次模型更多的是一种着色器.我可以拥有这些车型共享的地图想分享一个着色器.所以每次删除,然后附加,很麻烦.如何才能合并这些着色器? 采纳TexturePacking对 1.遍历gam ...