js script type 部分属性值分析
1. text/javascript:
(1)<script type="text/javascript" src="Js/jquery-1.10.2.min.js"></script> ---引用外部js
(2)编码js代码
2.text/template&&text/html
<script id="commentTemplate" type="text/template">
<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>
3.type="text/x-handlebars-template"
<div id="list"> </div>
<script type="text/javascript" src="Js/handlebars.js"></script>
<script id="people-template" type="text/x-handlebars-template">
{{#people}}
<div class="person">
<h2>{{first_name}} {{last_name}}</h2>
<div class="phone">{{phone}}</div>
<div class="email"><a href="mailto:{{email}}">{{email}}</a></div>
<div class="since">User since {{member_since}}</div>
</div>
{{/people}}
</script>
<script type="text/javascript">
$(document).ready(function () { // compile our template
var template = Handlebars.compile($("#people-template").html()); var data = {
people: [
{ first_name: "rui", last_name: "fengyun", phone: "1234567890", email: "alan@test.com", member_since: "Mar 25, 2011" },
{ first_name: "Allison", last_name: "House", phone: "0987654321", email: "allison@test.com", member_since: "Jan 13, 2011" },
{ first_name: "Nick", last_name: "Pettit", phone: "9836592272", email: "nick@test.com", member_since: "Apr 9, 2009" },
{ first_name: "Jim", last_name: "Hoskins", phone: "7284927150", email: "jim@test.com", member_since: "May 21, 2010" },
{ first_name: "Ryan", last_name: "Carson", phone: "8263729224", email: "ryan@test.com", member_since: "Nov 1, 2008" }
]
}; $('#list').html(template(data));
});
</script>
js script type 部分属性值分析的更多相关文章
- html中设置data-*属性值 并在js中进行获取属性值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Js script type="text/template"的使用简单说明
<script type="text/template" id="treeTableTpl"> <tr id="{{row.id}} ...
- [转]js对象中取属性值(.)和[ ]的区别
原文地址:https://www.jianshu.com/p/6a76530e4f8f 今天在写js的过程中遇到这么一个问题,取一个对象的属性值,通过obj.keys怎么都取不出来,但是用obj[ke ...
- JS 获取元素的属性值,非内联样式
//获取样式表的属性值,IE8及以下不兼容 ,方法 window.getComputedStyle(dom对象,"伪类").style属性; //IE8及以下获取样式表的属性值 ...
- Js数组对象的属性值升序排序,并指定数组中的某个对象移动到数组的最前面
需求整理: 本篇文章主要实现的是将一个数组的中对象的属性值通过升序的方式排序,然后能够让程序可以指定对应的数组对象移动到程序的最前面. 数组如下所示: var arrayData= [{name: & ...
- js动态更改对象属性值的方法
下面代码,替换属性名称包含date的属性中的T为空格. for (var o in data) { //console.info(eval("d ...
- js监听input输入框值的实时变化实例
情景:监听input输入框值的实时变化实例 解决方法:1.在元素上同时绑定oninput和onporpertychanger事件 实例:<script type="text/JavaS ...
- js 获取、清空 input type="file"的值 .(转)
上传控件基础知识说明: 上传控件(<input type="file"/>)用于在客户端浏览并上传文件,用户选取的路径可以由value属性获取,但value属性是只读的 ...
- HTML5中script的async属性异步加载JS
HTML5中script的async属性异步加载JS HTML4.01为script标签定义了5个属性: charset 可选.指定src引入代码的字符集,大多数浏览器忽略该值.defer 可 ...
随机推荐
- [2018 ACL Short and System] 对话系统
Short Paper(s) 1. Task-oriented Dialogue System for Automatic Diagnosis. (Cited by 0) Zhongyu Wei, ...
- Python+Opencv实现把图片转为视频
1. 安装Opencv包 在Python命令行输入如下命令(如果你使用的Anaconda,直接进入Anaconda Prompt键入命令即可.如果你不知道Anaconda是什么,可以参考王树义老师的文 ...
- day21 TFRecord格式转换MNIST并显示
首先简要介绍了下TFRecord格式以及内部实现protobuf协议,然后基于TFRecord格式,对MNIST数据集转换成TFRecord格式,写入本地磁盘文件,再从磁盘文件读取,通过pyplot模 ...
- HTMLTestRunner解决UnicodeDecodeError: ‘ascii’ codec can’t decode byte 0xe5 in position 108: ordinal not in range(128)
其中HTML和数据库都是设置成utf-8格式编码,插入到数据库中是正确的,但是当读取出来的时候就会出错,原因就是python的str默认是ascii编码,和unicode编码冲突,就会报这个标题错误. ...
- POJ 3525/UVA 1396 Most Distant Point from the Sea(二分+半平面交)
Description The main land of Japan called Honshu is an island surrounded by the sea. In such an isla ...
- SFTP服务器之创建普通用户
这篇博客主要写以下几点: 1.介绍SFTP服务器 2.用SFTP服务器的root用户a创建普通用户 3.修改普通用户名称以及默认登入时的目录名称 4.创建普通用户踩过的坑以及收获 一.介绍SFTP服务 ...
- HBase 参考文档翻译之 Getting Started
本篇是对HBase官方参考文档的大体翻译,介于本人英文水平实在有限,难免有纰漏之处.本篇不只是对官方文档的翻译,还加入了一些本人对HBase的理解.在翻译过程中,一些没有营养的废话,我就忽略了没有翻译 ...
- c# 两个软件传参
1.socket 传参,类似于小型的服务器和客户端,一端发送,另一端保持监听状态. 2.通过第三方 数据库或者文件.
- encode 与 decode
decode 将其它编码的字符串转换成unicode编码,例如:str1.decode("gb2312"),表示将gb2312编码的字符串转换成unicode编码 encode 将 ...
- coreldraw x5提示盗版警告解决方法
CorelDRAW是一款图形图像软件,大多数用户使用的都是coreldraw x5破解版,所以基本上都收到了coreldraw x5提示盗版警告,导致不能用,没关系,绿茶小编有解决方法. coreld ...