尝试在让script的type属性等于text/html

我们可以在<script>片断中定义一个被JS调用的代码，但代码又不在页面上显示，这时，我们可以使用下面的方法：


代码如下:

<script id="commentTemplate" type="text/html">
<li>
<div class="photo">
<a href="#">
<img src="[UserImg]" /></a></div>
<p>
<a href="#">[UserName]：</a><span class="time">[CreateDate]</span></p>
<div class="clear">
</div>
</li>
</script>

代码如下:

<div id="comment_ul_2">
</div>
<input type="button" id="addFun" value="click me" />
<script type="text/javascript">
var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm'); //i g m是指分别用于指定区分大小写的匹配、全局匹配和多行匹配。
$("#addFun").click(function () {
var html = document.getElementById("commentTemplate").innerHTML;
var source = html.replace(reg, function (node, key) { return { 'UserImg': '1', 'UserName': 'zhang', 'CreateDate': '2011-1-1'}[key]; });
$("#comment_ul_2").append(source);
});
var zzl = "name:[name]";
zzl = zzl.replace(reg, function (node, key) { return { 'name': '占占'}[key]; });
alert(zzl);
</script>

OK，这个意思是说，当你单击按钮时，可以把commentTemplate的内容追到comment_ul_2里，这很有意思吧，呵呵！

而其中有一个replace，也很有意思，向在替换时，可以接受一个json字符串，然后根据json的key来对比js模块里的key，进行赋值！
真的很有意思！

赞 (0)

相关推荐

  • JavaScript中的prototype.bind()方法介绍

    以前,你可能会直接设置self=this或者that=this等等,这样做当然也能起作用,但是使用Function.prototype.bind()会更好,看上去也更专业.下面举个简单的例子: 复制代码 代码如下: var myObj = {    specialFunction: function () {    },    anotherSpecialFunction: function () {    },    getAsyncData: function (cb) {        c

  • 不错的一篇关于javascript-prototype继承

    1.最基本的用法 把ClassA的一个实例赋值给ClassB, ClassB就继承了ClassA的所有属性. 代码入下: function ClassA() { this.a='a'; } function ClassB() { this.b='b'; } ClassB.prototype=new ClassA(); var objB=new ClassB(); for(var p in objB)document.write(p+" "); [Ctrl+A 全选 注:如需引入外部Js

  • script标签属性用type还是language

    被人问起一个问题: 复制代码 代码如下: <script language = "JavaScript"> <script type="text/javascript"> <script> 这三个标签的使用有什么区别? 虽然一直在用,却也没有好好去弄清楚,这里详细说明一下. 查阅一些资料,主要是浏览器支持问题.type 和 language 属性都可用来指定 <script> 标签中的脚本的类型.language 属性

  • script标签属性type与language使用选择

    被人问起一个问题: <script language = "JavaScript"> <script type="text/javascript"> <script> 这三个标签的使用有什么区别? 虽然一直在用,却也没有好好去弄清楚,这里详细说明一下. 查阅一些资料,主要是浏览器支持问题.type 和 language 属性都可用来指定 <script> 标签中的脚本的类型.language 属性在 HTML 和 XH

  • javascript typeof的用法与typeof运算符介绍[详细]第1/2页

    经常会在js里用到数组,比如 多个名字相同的input, 若是动态生成的, 提交时就需要判断其是否是数组. if(document.mylist.length != "undefined" ) {} 这个用法有误. 正确的是 if( typeof(document.mylist.length) != "undefined" ) {} 或 if( !isNaN(document.mylist.length) ) {} typeof的运算数未定义,返回的就是 "

  • 尝试在让script的type属性等于text/html

    我们可以在<script>片断中定义一个被JS调用的代码,但代码又不在页面上显示,这时,我们可以使用下面的方法: 复制代码 代码如下: <script id="commentTemplate" type="text/html"> <li> <div class="photo"> <a href="#"> <img src="[UserImg]"

  • js修改input的type属性问题探讨

    js修改input的type属性有些限制.当input元素还未插入文档流之前,是可以修改它的值的,在ie和ff下都没问题.但如果input已经存在于页面,其type属性在ie下就成了只读属性了,不可以修改.在ff下仍是可读写属性. 今天遇到个问题,输入框有默认值"密码",但获得焦点时,"密码"两字会去掉,输入时直接变成"****"的password类型.很明显,一开始的时候,input的类型是text,后来变成了password类型.直观的思路是

  • script的async属性以非阻塞的模式加载脚本

    script的async属性以非阻塞的模式加载脚本

    1.HTML5实现了script的async属性,这个新的属性可以让js在浏览器中以非阻塞的模式加载,另外script还有一个defer属性,这个属性目前所有浏览器都已实现(除了firefox和chrome的早期版本),IE这方面做得好,从一开始就支持些属性. 复制代码 代码如下: //async <script async src="dquery.js" async></script> //defer <script async src="dq

  • ie8下修改input的type属性报错的解决方法

    ie8下修改input的type属性报错的解决方法

    摘要: 现在有一个需求如图所示,当用户勾选显示明文复选框时,要以明文显示用户输入的密码,去掉勾选时要变回密文,刚开始想到的就是修改输入框的type来决定显示明文还是密文,使用jQuery的attr来做试验,测试结果是chrome,Firefox,ie9+都是好的,在ie8以下就会报错,查找了下原因,ie8中是不允许修改input的type属性,最终换了种思路实现. 当勾选显示明文时替换输入框为type="text",不勾选时在将输入框替换为type="password&quo

  • js修改input的type属性及浏览器兼容问题探讨与解决

    js修改input的type属性有些限制.当input元素还未插入文档流之前,是可以修改它的值的,在ie和ff下都没问题.但如果input已经存在于页面,其type属性在ie下就成了只读属性了,不可以修改.在ff下仍是可读写属性. 今天遇到个问题,输入框有默认值"密码",但获得焦点时,"密码"两字会去掉,输入时直接变成"****"的password类型.很明显,一开始的时候,input的类型是text,后来变成了password类型.直观的思路是

  • Javascript 动态改变imput type属性

    Javascript 动态改变imput type属性: 代码实现: <script type="text/javascript"> function shoppw(thebox){ var ps = document.getElementById('ps'); var pass = document.getElementById('pass'); ps.removeChild(pass); var psImput = document.createElement(&quo

  • VBS教程：属性-Type 属性

    Type 属性返回文件或文件夹的类型信息.例如,对于扩展名为 .TXT 的文件,返回"Text Document". object.Type object 应为 File 或 Folder 对象的名称. 说明以下代码举例说明如何使用 Type 属性返回文件夹的类型.在此示例中,试图向过程提供"回收站"或其他唯一文件夹的路径. Function ShowFolderType(filespec) Dim fso, f, s Set fso = CreateObject(

  • js动态修改input输入框的type属性(实现方法解析)

    需要实现的效果:一个输入框,当输入框未获得焦点的时候,value 值为 "密码":当输入框失去焦点的时候,输入内容显示为"*****" <input name="password" type="text" id="showPwd" tabindex="2″ class="input" value="密码" /> 我们很直接会想到下面的js $(&

  • 关于Script的Defer属性 原创

    1.没有defer属性的运行 document.write "关于Script的Defer属性 - jb51.net" &vbcrlf for i=100 to 1 step -1 document.write i&" "&vbcrlf next document.write "jb51.net" &vbcrlf [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 2. document.write &qu

  • jQuery通过改变input的type属性实现密码显示隐藏切换功能

    一般我们做登录注册的时候都会提供一个让用户选择自己输入的密码是否显示的需求, 这种需求我们肯定会想到只要动态改变input的type属性不就好了(text显示/password隐藏): 于是我用了$(''#id).attr('type', 'password')这个API 然而结果并不是我想的那样,出错了 HTML 代码 Uncaught Error: type property can't be changed 意思大概就是这个属性不能被修改. 于是我就googl一手. 然而我得到的结果是这样

随机推荐