jquery.tmpl 基础用法
2023-06-13 09:12:10 时间
大家好,又见面了,我是你们的朋友全栈君。
jQuer.tmpl
通过动态请求返回数据时通过HTML显示到页面快速便捷实用的方法。只需要在预先定义好一个模板在动态数据返回后调用jQuery对应实现的方法即可对HTML进行拼接同时显示出来。并且定义模板时可以使用一些逻辑判断的标签。 个人认为jQuer.tmpl有个不好的地方就是没有错误提示;例如在使用标签进行判断时可能有个地方字段写错的但是没有提示需要花一点时间去找问题,那就会有一些苦恼。
jQuery.tmpl的几种常用标签分别有: {动态数据字段名}, { {each}}, { {if}}, { {else}} 在jsp中使用标签时是需要在{}前加上”\”(\
示例1:${}
<table>
<thead>
<tr>
<th>用户ID</th>
<th>用户名称</th>
</tr>
</thead>
<tbody id="user_demo1">
</tbody>
</table>
<script type="text/javascript" src="javascript/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="javascript/jquery.tmpl.js"></script>
<script id="demo1" type="text/x-jquery-tmpl">
<tr>
<td>${id}</td>
<td>${name}</td>
</tr>
</script>
<script type="text/javascript">
var data = [{id:1,name:"张三"},{id:2,name:"李四"}];//返回的数据需要是json数据
$("#demo1").tmpl(data).appendTo('#user_demo1');
//appendTo()是jQuery里的方法:把所有匹配的元素追加到另一个指定的元素元素集合中。
</script>
示例2:{ {if}} { {else}} { {/if}} 这里的if else 有些不同于JavaScript中的(if else)用法而类似于(if() else if())
<table>
<thead>
<tr>
<th>用户ID</th>
<th>用户名称</th>
</tr>
</thead>
<tbody id="user_demo1">
</tbody>
</table>
<script type="text/javascript" src="javascript/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="javascript/jquery.tmpl.js"></script>
<script id="demo1" type="text/x-jquery-tmpl">
<tr>
{
{if ${id == 1}}}
<td style="color:gules">${id}</td>
{
{else ${id == 2}}}
<td style="color:yellow">${id}</td>
{
{else}}
<td>${id}</td>
{
{/if}}
<td>${name}</td>
</tr>
</script>
<script type="text/javascript">
var data = [{id:1,name:"张三"},{id:2,name:"李四"},{id:3,name:"李四"}];//返回的数据需要是json数据
$("#demo1").tmpl(data).appendTo('#user_demo1');
//appendTo()是jQuery里的方法:把所有匹配的元素追加到另一个指定的元素元素集合中。
</script>
示例3:{ {each}} 用于循环 { {each(j,major) majors}}{ {/each}} majors循环的数组,major表示对象,j表示索引(从0开始)
<table>
<thead>
<tr>
<th>用户ID</th>
<th>用户名称</th>
<th>专业</th>
</tr>
</thead>
<tbody id="user_demo1">
</tbody>
</table>
<script type="text/javascript" src="javascript/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="javascript/jquery.tmpl.js"></script>
<script id="demo1" type="text/x-jquery-tmpl">
<tr>
<td>${id}</td>
<td>${name}</td>
<td>
{
{each(i,major) majors}}
${major.name}
{
{/each}}
</td>
</tr>
</script>
<script type="text/javascript">
var data = [{id:1,name:"张三",majors:[{name:"英语"},{name:"数学"}]},{id:2,name:"李四",majors:[{name:"语文"},{name:"数学"}]},{id:3,name:"李四",majors:[{name:"政治"},{name:"数学"}]}];//返回的数据需要是json数据
$("#demo1").tmpl(data).appendTo('#user_demo1');
//appendTo()是jQuery里的方法:把所有匹配的元素追加到另一个指定的元素元素集合中。
</script>
以上jquer.tmpl的一些基础用法,如果有什么不对的地方还请大神指出。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/148665.html原文链接:https://javaforall.cn
相关文章
- 【NLP基础】英文关键词抽取RAKE算法
- jquery ajax步骤,jquery ajax(ajax请求的五个步骤jQuery)
- jQuery 基础知识(五)
- jquery实现返回顶部效果详解编程语言
- jquery 简单实现购物车 cookie与json操作详解编程语言
- jquery取消绑定的方法详解编程语言
- jquery layui的巨坑详解编程语言
- jQuery filter()和has()方法
- Jquery基础学习笔记
- jQuery技巧大放送学习jquery的朋友可以看下
- jquery表单取值常用代码
- Jquery实战_读书笔记1—选择jQuery
- Jquery从头学起第四讲jquery入门教程
- jQuery源码分析-02正则表达式RegExp常用正则表达式
- jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
- JQuery中关于jquery.js与jquery.min.js的比较探讨
- jQuery列表拖动排列具体实现
- jquery队列queue与原生模仿其实现方法分享
- jQuery顶部导航跟随滚动条滚动固定浮动在顶部
- jQuery写的简单打字游戏可以提示正确和错误的次数
- jQuery学习笔记之基础中的基础
- 使用jquery解析XML示例代码
- 使用jsdom和jquery分别实现简单增删改