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 相关文章推荐
XP折叠菜单&amp;仿QQ2006菜单
Dec 16 Javascript
关于图片验证码设计的思考
Jan 29 Javascript
javascript笔试题目附答案@20081025_jb51.net
Oct 26 Javascript
文本框输入时 实现自动提示(像百度、google一样)
Apr 05 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
Dec 25 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
Aug 22 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 Javascript
Vue.js实现实例搜索应用功能详细代码
Aug 24 Javascript
Vue中的Vux配置指南
Dec 08 Javascript
vue实现全匹配搜索列表内容
Sep 26 Javascript
给原生html中添加水印遮罩层的实现示例
Apr 02 Javascript
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
上海无线电三厂简史修改版
2021/03/01 无线电
S900/ ETON E1-XM 收音机
2021/03/02 无线电
PHP中几个常用的魔术常量
2012/02/23 PHP
php递归函数中使用return的注意事项
2014/01/17 PHP
php简单统计在线人数的方法
2016/05/10 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
微信支付 JS API支付接口详解
2016/07/11 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
原生js实现公告滚动效果
2021/01/10 Javascript
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
web.py在模板中输出美元符号的方法
2014/08/26 Python
介绍Python中的文档测试模块
2015/04/28 Python
Python实现登录接口的示例代码
2017/07/21 Python
python生成圆形图片的方法
2020/03/25 Python
python 集合 并集、交集 Series list set 转换的实例
2018/05/29 Python
Python实现程序判断季节的代码示例
2019/01/28 Python
深入浅析Python中的迭代器
2019/06/04 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
Django和Flask框架优缺点对比
2019/10/24 Python
安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错: “所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 ”的解决方法
2020/08/18 Python
HTML5 manifest离线缓存的示例代码
2018/08/08 HTML / CSS
倩碧美国官网:Clinique美国
2016/07/20 全球购物
匈牙利墨盒和碳粉购买网站:CDRmarket
2018/04/14 全球购物
建筑文秘专业个人求职信范文
2013/12/28 职场文书
设计顾问服务计划书
2014/05/04 职场文书
酒店开业庆典策划方案
2014/05/28 职场文书
幼儿园六一活动总结
2014/08/27 职场文书
2015年底工作总结范文
2015/05/15 职场文书
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python
Python matplotlib绘制雷达图
2022/04/13 Python