jquery 模板的应用示例


Posted in Javascript onNovember 12, 2013
<body> <h1>天地盟主 QQ:467713292</h1> 
<!-- 将模版放置的位置标签 --> 
<div id="contactContainer"></div> 
<!-- 定义模板的内容布局 和定义显示的字段 --> 
<script id="contactTemplate" type="text/html"> 
<div> 
姓名: {{= name }} <br /> 
手机号: {{= phone }} 
</div> 
</script> 
//引用两个js

<script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script> 
<script src="Scripts/jquery.tmpl.js" type="text/javascript"></script> 
<script type="text/javascript"> var contacts = [ 
{name:"天地盟主", phone:"467713292"}, 
{name:"与狼共舞", phone: "206-555-7878" }, 
{name:"程序员中的菜鸟", phone: "415-555-8888" } 
]; 
//只需要这样一句话就可以将上面定义好的json数据填充到模板里 呈现出来

$("#contactTemplate").render(contacts).appendTo("#contactContainer"); 
</script> 
</body>
Javascript 相关文章推荐
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
Oct 17 Javascript
Js,alert出现乱码问题的解决方法
Jun 19 Javascript
js借助ActiveXObject实现创建文件
Sep 29 Javascript
Javascript浅谈之引用类型
Dec 18 Javascript
jquery实现表格隔行换色效果
Nov 19 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
Bootstrap媒体对象学习使用
Mar 07 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 Javascript
React/Redux应用使用Async/Await的方法
Nov 16 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
Dec 01 Javascript
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
jQuery 无刷新分页实例代码
Nov 12 #Javascript
JS图片切换的具体方法(带缩略图版)
Nov 12 #Javascript
JS实现遮罩层效果的简单实例
Nov 12 #Javascript
javascript静态页面传值的三种方法分享
Nov 12 #Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 #Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 #Javascript
JavaScript中的字符串操作详解
Nov 12 #Javascript
You might like
PHP采集腾讯微博的实现代码
2012/01/19 PHP
php后门URL的防范
2013/11/12 PHP
php简单实现MVC
2015/02/05 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
PHP生成腾讯云COS接口需要的请求签名
2018/05/20 PHP
Laravel 实现关系模型取出需要的字段
2019/10/10 PHP
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
js实现文字无缝向上滚动
2017/02/16 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
vue全局使用axios的方法实例详解
2018/11/22 Javascript
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
Python实现的括号匹配判断功能示例
2018/08/25 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
详解在Python中以绝对路径或者相对路径导入文件的方法
2019/08/30 Python
Python爬虫之爬取淘女郎照片示例详解
2020/07/28 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
django使用channels实现通信的示例
2020/10/19 Python
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
2015/08/31 HTML / CSS
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
GWT的应用有哪两种部署模式
2012/12/21 面试题
董事长秘书职责
2014/01/31 职场文书
市场营销专业大学生职业生涯规划文
2014/03/06 职场文书
邹越感恩父母演讲稿
2014/08/28 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
介绍信如何写
2015/01/31 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle