zoukankan      html  css  js  c++  java
  • 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

     1     <script id="commentTemplate" type="text/template">
     2         <li>
     3             <div class="photo">
     4                 <a href="#">
     5                     <img src="[UserImg]" /></a>
     6             </div>
     7             <p>
     8                 <a href="#">[UserName]:</a><span class="time">[CreateDate]</span>
     9             </p>
    10             <div class="clear">
    11             </div>
    12         </li>
    13     </script>
     1 <div id="comment_ul_2">
     2         </div>
     3         <input type="button" id="addFun" value="click me" />
     4         <script type="text/javascript">
     5             var reg = new RegExp("\[([^\[\]]*?)\]", 'igm'); //i g m是指分别用于指定区分大小写的匹配、全局匹配和多行匹配。
     6             $("#addFun").click(function () {
     7                 var html = document.getElementById("commentTemplate").innerHTML;
     8                 var source = html.replace(reg, function (node, key) { return { 'UserImg': '1', 'UserName': 'zhang', 'CreateDate': '2011-1-1' }[key]; });
     9                 $("#comment_ul_2").append(source);
    10             });
    11 
    12             var zzl = "name:[name]";
    13             zzl = zzl.replace(reg, function (node, key) { return { 'name': '占占' }[key]; });
    14             //alert(zzl);
    15 
    16         </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>
  • 相关阅读:
    Winform 打包,卸载程序制作获取ProductCode
    委托/事件的重写
    反序列化无法找到程序集
    Control.Invoke注意事项
    操作config文件
    MemoEdit自动滚动到结尾
    读取局域网内的共享文件
    命令行卸载程序
    获取执行程序的路径
    SCSF 系列:使用 Visualizer 监控 SCSF 运行状态
  • 原文地址:https://www.cnblogs.com/zk-zhou/p/6655421.html
Copyright © 2011-2022 走看看