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入门教程(12) js对象化编程
Jan 31 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
jquery插件开发之实现md5插件
Mar 17 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
创建你的第一个AngularJS应用的方法
Jun 16 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
深入理解Angular4中的依赖注入
Jun 07 Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
JavaScript Math对象和调试程序的方法分析
May 13 Javascript
详解用js代码触发dom事件的实现方案
Jun 10 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数组的概述及分类与声明代码演示
2013/02/26 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
文字幻灯片
2006/06/26 Javascript
Javascript MD4
2006/12/20 Javascript
JavaScript中的其他对象
2008/01/16 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
2015/10/13 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
js实现漫天星星效果
2017/01/19 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
js实现课堂随机点名系统
2019/11/21 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
[00:48]DOTA2国际邀请赛公开赛报名开始 扫码开启逐梦之旅
2018/06/06 DOTA
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
详解Python编程中包的概念与管理
2015/10/16 Python
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
浅谈python中的变量默认是什么类型
2016/09/11 Python
python中ImageTk.PhotoImage()不显示图片却不报错问题解决
2018/12/06 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
python如何发送带有附件、正文为HTML的邮件
2021/02/27 Python
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
质检部职责
2013/12/28 职场文书
生产部统计员岗位职责
2014/01/05 职场文书
有关打架的检讨书
2014/01/25 职场文书
国家助学金获奖感言
2014/01/31 职场文书
工作违纪检讨书
2014/02/17 职场文书
小学三好学生事迹材料
2014/08/15 职场文书
物业公司管理制度
2015/08/05 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
变长双向rnn的正确使用姿势教学
2021/05/31 Python
MySQL学习之基础操作总结
2022/03/19 MySQL