JvaScript的type属性等于text/html 例子

简介:

在使用javascript标签<script>的时候,其中type最常用的就是text/javascript

其实这个type还有其他用法,下面直接给出例子:



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>

再看上面的代码片段,我们在下面的代码中怎么使用,如下:

<html>
<head>
<title>标题</title>
</head>
<body>
	<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' : '张',
					'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>
</body>
</html>

这里解释一下:其中有一个replace,在替换时,可以接受一个json字符串,然后根据json的key来对比js模块里的key,进行赋值!



另外,网上有一些比较好的关于 text/template 模版用法的插件js,也是个很好用的模版技术。






目录
相关文章
|
1月前
|
存储 开发者 SEO
|
1月前
|
移动开发 JavaScript 前端开发
编程笔记 html5&css&js 028 HTML输入属性(2/2)
编程笔记 html5&css&js 028 HTML输入属性(2/2)
|
1月前
|
JavaScript 前端开发
编程笔记 html5&css&js 027 HTML输入属性(1/2)
编程笔记 html5&css&js 027 HTML输入属性(1/2)
|
1月前
编程笔记 html5&css&js 023 HTML表单属性
编程笔记 html5&css&js 023 HTML表单属性
|
1月前
|
存储 移动开发 前端开发
编程笔记 html5&css&js 010 HTML全局属性
编程笔记 html5&css&js 010 HTML全局属性
|
2月前
|
移动开发 前端开发 JavaScript
分享24个强大的HTML属性,建议每位前端工程师都应该掌握!
HTML属性非常多,除了一些基础属性外,还有许多有用的特别强大的属性
|
3月前
|
XML JavaScript 数据格式
python - bs4提取XML/HTML中某个标签下的属性
python - bs4提取XML/HTML中某个标签下的属性
28 0
|
3月前
|
人工智能 Go
鲜为人知但很有用的 HTML 属性
鲜为人知但很有用的 HTML 属性
|
4月前
|
Web App开发 移动开发 HTML5
HTML中input标签的23种type类型
HTML中input标签的23种type类型