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 部分属性值分析的更多相关文章

  1. html中设置data-*属性值 并在js中进行获取属性值

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Js script type="text/template"的使用简单说明

    <script type="text/template" id="treeTableTpl"> <tr id="{{row.id}} ...

  3. [转]js对象中取属性值(.)和[ ]的区别

    原文地址:https://www.jianshu.com/p/6a76530e4f8f 今天在写js的过程中遇到这么一个问题,取一个对象的属性值,通过obj.keys怎么都取不出来,但是用obj[ke ...

  4. JS 获取元素的属性值,非内联样式

    //获取样式表的属性值,IE8及以下不兼容 ,方法 window.getComputedStyle(dom对象,"伪类").style属性;   //IE8及以下获取样式表的属性值 ...

  5. Js数组对象的属性值升序排序,并指定数组中的某个对象移动到数组的最前面

    需求整理: 本篇文章主要实现的是将一个数组的中对象的属性值通过升序的方式排序,然后能够让程序可以指定对应的数组对象移动到程序的最前面. 数组如下所示: var arrayData= [{name: & ...

  6. js动态更改对象属性值的方法

    下面代码,替换属性名称包含date的属性中的T为空格. for (var o in data) {                        //console.info(eval("d ...

  7. js监听input输入框值的实时变化实例

    情景:监听input输入框值的实时变化实例 解决方法:1.在元素上同时绑定oninput和onporpertychanger事件 实例:<script type="text/JavaS ...

  8. js 获取、清空 input type="file"的值 .(转)

    上传控件基础知识说明: 上传控件(<input type="file"/>)用于在客户端浏览并上传文件,用户选取的路径可以由value属性获取,但value属性是只读的 ...

  9. HTML5中script的async属性异步加载JS

    HTML5中script的async属性异步加载JS     HTML4.01为script标签定义了5个属性: charset 可选.指定src引入代码的字符集,大多数浏览器忽略该值.defer 可 ...

随机推荐

  1. LeetCode 135——分发糖果

    1. 题目 2. 解答 初始化左序奖赏全为 1,从左往右遍历,如果右边的人评分比左边高,右边奖赏比左边奖赏增 1. 初始化右序奖赏全为 1,从右往左遍历,如果左边的人评分比右边高,左边奖赏比右边奖赏增 ...

  2. [转载] RCNN/SPP/FAST RCNN/FASTER RCNN/YOLO/SSD算法简介

    RCNN: RCNN(Regions with CNN features)是将CNN方法应用到目标检测问题上的一个里程碑,由年轻有为的RBG大神提出,借助CNN良好的特征提取和分类性能,通过Regio ...

  3. BZOJ 3166 HEOI2013 ALO 可持久化trie+st表

    题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=3166(洛谷上也有) 题意概述: 给出一个序列,对于一个区间,其权值为区间中的次大值亦或区 ...

  4. 第一次课堂作业---circle

    链接:circle

  5. LintCode-69.二叉树的层次遍历

    二叉树的层次遍历 给出一棵二叉树,返回其节点值的层次遍历(逐层从左往右访问) 样例 给一棵二叉树 {3,9,20,#,#,15,7} : 返回他的分层遍历结果: [     [3],     [9,2 ...

  6. Mysql8 忘记Root密码(转)

    第一步:修改配置文件免密码登录mysql vim /etc/my.cnf 1.2 在 [mysqld]最后加上如下语句 并保持退出文件: skip-grant-tables 1.3 重启mysql服务 ...

  7. 第五部分shell项目一监控脚本

    需求: 使用shell定制各种个性化告警工具,但需要统一化管理.规范化管理. 思路:指定一个脚本包,包含主程序.子程序.配置文件.邮件引擎.输出日志等.主程序:作为整个脚本的入口,是整个系统的命脉.配 ...

  8. Java中关于 ArrayList 和 Map 的常用遍历方法 (学习笔记,便于以后查询)

    一.学习ArrayList与Map时,关于常用遍历方法的记录如下:  二.附源码如下: package com.study.in.myself; import java.util.ArrayList; ...

  9. TCP协议的滑动窗口具体是怎样控制流量的

    首先明确: 1)TCP滑动窗口分为接受窗口,发送窗口滑动窗口协议是传输层进行流控的一种措施,接收方通过通告发送方自己的窗口大小,从而控制发送方的发送速度,从而达到防止发送方发送速度过快而导致自己被淹没 ...

  10. SpringBoot2.0(五) CORS跨域

    部分跨域 @CrossOrigin注解支持类级别,方法级别添加.可以在controller类或者方法上添加,支持部分接口跨域.在两者上都添加时,方法级别的覆盖类级别的. 属性 说明 origins 允 ...