1.放置html片段模板

<script id="tpl" type="text/html">

<p>$title</p><table id="datatable"></table>

<div class="descript"><p class="descripttitle"></p></div>

</script>

2.放置html片段模板

<template id="tpl">

<p>$title</p><table id="datatable"></table>

<div class="descript"><p class="descripttitle"></p></div>

</template>

js取出模板内容

  

// 得到这个模板元素对象
let tpldom = document.querySelector('#tpl'); // 根据ID取出模板中的table元素
// 注意content这个属性,取templete内容需要使用这个只读属性
let tab = tpldom.content.querySelectorAll('#datatable'); // 然后可以操作这个table,比如向其中插入数据,然后显示在DOM中

用JQ取出模板内容

var html=$('#tpl').html();// 适用第二种,第一种取不到内容.

var html=$('#tpl').text();// 都适用

var html=tpl.innerHTML;//

var html=tpl.innerText;//

如此,取出的内容都是字符串.转成JQ对象

var htmlJQ=$(html);    // 是一堆DOM的集合,然后用选择器找里面的元素

htmlJQ.filter('p').eq(0);    // 取直接子元素的第一个p <p>$title</p>

htmlJQ.find('.descripttitle').eq(0);    // 取后代子元素的第一个p <p class="descripttitle"></p>

使用template时,用content取内容

var htmldom=$('#tpl').prop('content');// 这取出的是DOM片段,不再是字符串

var htmldom=tpl.content;

htmldom.querySelector('p');// 取出第一个p <p>$title</p>

如果使用JQ,与取字符串后转成JQ对象有区别

var htmlJQ=$(htmldom);    // 这里面是<template id="tpl">的JQ对象,不再是它里面的DOM集合

htmlJQ.children('p').eq(0);    // 取直接子元素的第一个p <p>$title</p>

htmlJQ.children().find('.descripttitle').eq(0);    // 取后代子元素的第一个p <p class="descripttitle"></p>

这里有个疑惑未解,取DOM片段转JQ后,里面是<template id="tpl">对象,如果使用htmlJQ.find()这个方法找它的后代元素,结果是空.使用上面的children则能找到.

3.动态生成模板元素

  如果需要将已有的DOM文档暂时放到某个地方,可以使用这个模板元素.

  例如页面上有个<div id="eName" class="name">...</div>,需要将它取出暂放到templete.

  $('body').append('<templete id="tpl_eName"></templete>');// 建一个模板元素

  $('#tpl_eName').append($('#eName'));// 向其中添加内容.

  当动态向templete元素中添加内容时,使用JQ选择器可以选中模板内的元素.(直接写在文档中的模板元素则不会被选中).FF的F12工具看不到直接写的,但能看到动态生成的.谷歌工具都能看到.

  如果只是希望将文档暂时放到一个"缓存"中,并且不希望被选中,那么就不能使用暂放到templete元素.可以使用document.createDocumentFragment()这个方法,建立文档片断,将需要缓存的DOM放到里面.

  一般情况下,都是直接写好模板元素放在HTML中的,取用的时候都是将其中的内容复制一份使用,而不会直接使用模板中的内容

使用template的更多相关文章

  1. 为.NET Core项目定义Item Template

    作为这个星球上最强大的IDE,Visual Studio不仅仅提供了很多原生的特性,更重要的是它是一个可定制的IDE,比如自定义Project Template和Item Template就是一个非常 ...

  2. jQuery.template.js 简单使用

    之前看了一篇文章<我们为什么要尝试前后端分离>,深有同感,并有了下面的评论: 我最近也和前端同事在讨论这个问题,比如有时候前端写好页面给后端了,然后后端把这些页面拆分成很多的 views, ...

  3. 2000条你应知的WPF小姿势 基础篇<69-73 WPF Freeze机制和Template>

    在正文开始之前需要介绍一个人:Sean Sexton. 来自明尼苏达双城的软件工程师.最为出色的是他维护了两个博客:2,000ThingsYou Should Know About C# 和 2,00 ...

  4. tornado template

    若果使用Tornado进行web开发可能会用到模板功能,页面继承,嵌套... 多页应用模板的处理多半依赖后端(SPA就可以动态加载局部视图),就算是RESTfull的API设计,也不妨碍同时提供部分模 ...

  5. 设计模式(九): 从醋溜土豆丝和清炒苦瓜中来学习"模板方法模式"(Template Method Pattern)

    今天是五.四青年节,祝大家节日快乐.看着今天这标题就有食欲,夏天到了,醋溜土豆丝和清炒苦瓜适合夏天吃,好吃不上火.这两道菜大部分人都应该吃过,特别是醋溜土豆丝,作为“鲁菜”的代表作之一更是为大众所熟知 ...

  6. C++泛型编程:template模板

    泛型编程就是以独立于任何特定类型的方式编写代码,而模板是C++泛型编程的基础. 所谓template,是针对“一个或多个尚未明确的类型”所编写的函数或类. 使用template时,可以显示的或隐示的将 ...

  7. 新手入门Underscore.js 中文(template)

    Underscore.js是一个很精干的库,压缩后只有4KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了javaScript的编程.MVC框架Backbone.js就将这个库作为自 ...

  8. knockoutjs如何动态加载外部的file作为component中的template数据源

    玩过knockoutjs的都知道,有一个强大的功能叫做component,而这个component有个牛逼的地方就是拥有自己的viewmodel和template, 比如下面这样: ko.compon ...

  9. JavaScript模板引擎artTemplate.js——template.helper()方法

    上一篇文章我们已经讲到了helper()方法,但是上面的例子只是一个参数的写法,如果是多个参数,写法就另有区别了. <div id="user_info"></d ...

  10. linux下, 再次遇到使用thinkphp的模板标签时,报错used undefined function \Think\Template\simplexml_load_string() 是因为没有安装 php-xml包

    linux下, 使用thinkphp的模板标签,如 eq, gt, volist defined, present , empty等 标签时, 报错: used undefined function ...

随机推荐

  1. HTML,CSS笔记

    text-indent 属性规定文本块中首行文本的缩进.允许使用负值.如果使用负值,那么首行会被缩进到左边.p{ text-indent:50px; } HTML <label> 标签的 ...

  2. linux命令:拷贝命令家族(cp、scp、rsync)

    Linux命令中:rsync和cp之间的区别 - 小 楼 一 夜 听 春 雨 - 博客园https://www.cnblogs.com/kex1n/p/7008178.html cp,scp,rsyn ...

  3. Cannot connect to database because the database client

    问题描述: arcgis server10.1  arcgis sde10出现下面问题 Cannot connect to  database because the database client ...

  4. php 对象赋值后改变成员变量影响赋值对象

    话不多说看代码 打印结果 对obj1的操作 直接影响了obj2 , 对obj2的操作 直接影响了obj1

  5. taro 与uni-app对比

    https://www.jianshu.com/p/03e08399587e   (copy)

  6. hive字符函数

  7. centos安装Tesseract

    yum安装(推荐) yum search tesseract yum install tesseract.x86_64 -y pip3 install pytesseract pip3 install ...

  8. k8s HPA自动收缩

    HPA自动收缩 autoscale 自动调整一个 Deployment, ReplicaSet, 或者 ReplicationController 的副本数量 #创建一个replicaset测试 [r ...

  9. Debian下配置防火墙iptables

    debian下iptables输入命令后即时生效,但重启之后配置就会消失,可用iptables-save快速保存配置,因为Debian上iptables是不会保存规则的,然后在开机自动的时候让ipta ...

  10. Spring注解标签详解@Autowired @Qualifier等 @Slf4j

    @Slf4j @Slf4j注解实现日志输出 自己写日志的时候,肯定需要: private final Logger logger = LoggerFactory.getLogger(LoggerTes ...