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 可 ...
随机推荐
- WCF服务库创建-20140919
1. 创建wcf服务库 2. 宿主到web程序上 // 宿主wcf服务库 RouteTable.Routes.Add(new ServiceRoute("ctserver.dll" ...
- 我的linux操作习惯
标签(空格分隔): ubuntu 最佳操作 用linux随时可能会有宕机的危险,谁知道我哪会神经病犯了呢.用deepin宕机的可能性会更高的,所以我才不得不安装一个windows做备份,然后把数据备份 ...
- 索引值迭代-enumerate
你想在迭代一个序列的同时跟踪正在被处理的元素索引?内置的enumerate() 函数可以很好的解决这个问题: list_c = ['a', 'b', 'c'] for i, c in enumerat ...
- codeforces 295C Greg and Friends(BFS+DP)
One day Greg and his friends were walking in the forest. Overall there were n people walking, includ ...
- 第一周—Fortran语言学习
使用教材:Fortran95程序设计[彭国伦] 第二章 编译器的使用 编译结果的好坏 1.翻译正确 2.执行文件的运行效率 3.翻译出来的执行码的长短 4.编译过程花费的时间 5.编译器提供Debug ...
- lintcode-32-最小子串覆盖
最小子串覆盖 给定一个字符串source和一个目标字符串target,在字符串source中找到包括所有目标字符串字母的子串. 注意事项 如果在source中没有这样的子串,返回"" ...
- alpha阶段个人总结(201521123031林庭亦)
一.个人总结 第一部分:硬的问题 第二部分:软的问题,在成长路上学到了什么? 1 当你看到不靠谱的设计.糟糕的代码.过时的文档和测试用例的时候,不要想 "既然别人的代码已经这样了,我的代码也 ...
- 从大量的IP访问记录中找到访问次数最多的IP
1.内存不受限 一个IP有32bit(4Byte),1GB=10亿,那么在4GB内存的情况下,可以存10亿个IP.用HashMap,边存入IP边维护一个最大次数,这样遍历一遍就可以求出,时间复杂度为O ...
- WCF面试精典题汇总
1.WCF接口中的参数改名问题 在写WCF Web Service接口的时候,如果你对接口的参数名做改动的时候,一定要记住Update所有应用该Web service的客户端的Referrence,否 ...
- PHP给图片添加图片水印
涉及到的函数: 1.file_get_contents():用于将文件的内容读入到一个字符串中的首选方法.如果操作系统支持,还会使用内存映射技术来增强性能. 2.list():list() 函数用于在 ...