zoukankan      html  css  js  c++  java
  • 当<script>中的type等于text/html时,我们可以做很多事件!

    我们可以在<script>片断中定义一个被JS调用的代码,但代码又不在页面上显示,这时,我们可以使用下面的方法:

     1   <script id="commentTemplate" type="text/html">
     2      <li>
     3         <div class="photo">
     4             <a href="#">
     5                 <img src="[UserImg]" /></a></div>
     6         <p>
     7             <a href="#">[UserName]:</a><span class="time">[CreateDate]</span></p>
     8         <div class="clear">
     9         </div>
    10     </li>
    11     </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>

    OK,这个意思是说,当你单击按钮时,可以把commentTemplate的内容追到comment_ul_2里,这很有意思吧,呵呵!

    而其中有一个replace,也很有意思,向在替换时,可以接受一个json字符串,然后根据json的key来对比js模块里的key,进行赋值!

    真的很有意思!

  • 相关阅读:
    最容易懂的红黑树
    Chapter 9 (排序)
    【WC2013】糖果公园
    【Luogu1903】数颜色
    【笔记】Sigmoid函数
    【笔记】费马小定理、数论欧拉定理
    【笔记】单层感知机
    2020ICPC.小米 网络选拔赛第一场
    【Luogu3366】模板:最小生成树
    Codeforces Raif Round 1
  • 原文地址:https://www.cnblogs.com/lori/p/2665802.html
Copyright © 2011-2022 走看看