使用template

1.放置html片段模板

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

</script>

2.放置html片段模板

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

</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的更多相关文章

为.NET Core项目定义Item Template
作为这个星球上最强大的IDE,Visual Studio不仅仅提供了很多原生的特性,更重要的是它是一个可定制的IDE,比如自定义Project Template和Item Template就是一个非常 ...
jQuery.template.js 简单使用
之前看了一篇文章<我们为什么要尝试前后端分离>,深有同感,并有了下面的评论: 我最近也和前端同事在讨论这个问题,比如有时候前端写好页面给后端了,然后后端把这些页面拆分成很多的 views, ...
2000条你应知的WPF小姿势基础篇<69-73 WPF Freeze机制和Template>
在正文开始之前需要介绍一个人:Sean Sexton. 来自明尼苏达双城的软件工程师.最为出色的是他维护了两个博客:2,000ThingsYou Should Know About C# 和 2,00 ...
tornado template
若果使用Tornado进行web开发可能会用到模板功能,页面继承,嵌套... 多页应用模板的处理多半依赖后端(SPA就可以动态加载局部视图),就算是RESTfull的API设计,也不妨碍同时提供部分模 ...
设计模式(九): 从醋溜土豆丝和清炒苦瓜中来学习"模板方法模式"(Template Method Pattern)
今天是五.四青年节,祝大家节日快乐.看着今天这标题就有食欲,夏天到了,醋溜土豆丝和清炒苦瓜适合夏天吃,好吃不上火.这两道菜大部分人都应该吃过,特别是醋溜土豆丝,作为“鲁菜”的代表作之一更是为大众所熟知 ...
C++泛型编程：template模板
泛型编程就是以独立于任何特定类型的方式编写代码,而模板是C++泛型编程的基础. 所谓template,是针对“一个或多个尚未明确的类型”所编写的函数或类. 使用template时,可以显示的或隐示的将 ...
新手入门Underscore.js 中文（template）
Underscore.js是一个很精干的库,压缩后只有4KB.它提供了几十种函数式编程的方法,弥补了标准库的不足,大大方便了javaScript的编程.MVC框架Backbone.js就将这个库作为自 ...
knockoutjs如何动态加载外部的file作为component中的template数据源
玩过knockoutjs的都知道,有一个强大的功能叫做component,而这个component有个牛逼的地方就是拥有自己的viewmodel和template, 比如下面这样: ko.compon ...
JavaScript模板引擎artTemplate.js——template.helper()方法
上一篇文章我们已经讲到了helper()方法,但是上面的例子只是一个参数的写法,如果是多个参数,写法就另有区别了. <div id="user_info"></d ...
linux下, 再次遇到使用thinkphp的模板标签时,报错used undefined function \Think\Template\simplexml_load_string() 是因为没有安装 php-xml包
linux下, 使用thinkphp的模板标签,如 eq, gt, volist defined, present , empty等标签时, 报错: used undefined function ...

随机推荐

个人博客作业-week5-敏捷开发方法读后感
满篇英文对一个非单词狂魔来说真的是很吃力啊… 敏捷软件开发方法是一种从1990年代开始逐渐引起广发关注的一些新型软件开发方法,是一种应对快速变化的需求的一种软件开发能力,他们的具体名称.理念.过程.术 ...
Java中JDK和JRE的区别是什么？它们的作用分别是什么？
JDK和JRE是Java开发和运行工具,其中JDK包含了JRE,但是JRE是可以独立安装的,它们在Java开发和运行的时候起到不同的作用~ 1.JDK JDK是Java Development Kit ...
html总结：固定表格中单元格宽度
当然要提前设置好table的width值,然后再写这个,使得每列宽度都相等. <style> table { table-layout: fixed; } </style>
mysql问题汇总——持续更新
1.this is incompatible with sql_mode=only_full_group_by set @@sql_mode='STRICT_TRANS_TABLES,NO_ZERO_ ...
php常用方法
在日常开发中,经常我们使用系统方法或者是自己封装的方法进行项目的开发.再此总结一下!!! 一.对于字符串截取 1.使用mbstring扩展 (注意编码的设置) mb_substr($str,2,5, ...
金蝶CLOUD与EAS的区别
1.金蝶K/3 WISE主要面向单体制造企业(主要是离散制造企业):2.金蝶K/3 Cloud主要面向业务类型单一(即主营业务单一)的.注重供应链与生产业务协同的.中小型(二层集团??)集团性企业(主 ...
js中的arguments
了解这个对象之前先来认识一下javascript的一些功能: 其实Javascript并没有重载函数的功能,但是Arguments对象能够模拟重载.Javascrip中国每个函数都会有一个Argume ...
EmpireCMS的使用
1.下载安装empirecms 下载完成后解压将upload目录整体上传到服务器,并更名为empirecms_test 更改目录文件的权限: chmod -R 777 empirecms_test 配 ...
Promise是什么？
一. Promise是什么? Promise是一种异步操作的解决方案,将写法复杂的传统的回调函数和监听事件的异步操作,用同步代码的形式表达出来. 避免了多级异步操作的回调函数嵌套. Promise最早 ...
SQL字段类型bit 查询时注意
sql 查询时字段=1 或字段=0 c# 里也是

使用template

使用template的更多相关文章

随机推荐

热门专题