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 相关文章推荐
在页面上点击任一链接时触发一个事件的代码
Apr 07 Javascript
初学JavaScript第二章
Sep 30 Javascript
关于jQuery中的end()使用方法
Jul 10 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
Vue.JS入门教程之自定义指令
Dec 08 Javascript
jQuery 表单序列化实例代码
Jun 11 jQuery
AngularJS实现tab选项卡的方法详解
Jul 05 Javascript
Layui数据表格之获取表格中所有的数据方法
Aug 20 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
详解Puppeteer前端自动化测试实践
Feb 21 Javascript
Vue源码学习之关于对Array的数据侦听实现
Apr 23 Javascript
electron 如何将任意资源打包的方法步骤
Apr 16 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
Jquery获取复选框被选中值的简单方法
2013/07/04 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
jQuery实现高亮显示的方法
2015/03/10 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
2015/06/19 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
2016/10/10 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
js评分组件使用详解
2017/06/06 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
nodejs基础之多进程实例详解
2018/12/27 NodeJs
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
JavaScript中this函数使用实例解析
2020/02/21 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
python根据unicode判断语言类型实例代码
2018/01/17 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
python os.path.isfile()因参数问题判断错误的解决
2019/11/29 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
如何配置关联Python 解释器 Anaconda的教程(图解)
2020/04/30 Python
安装pyinstaller遇到的各种问题(小结)
2020/11/20 Python
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
前端实现打印图像功能
2019/08/27 HTML / CSS
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
成功的餐厅经营创业计划书
2014/01/15 职场文书
中学自我评价
2014/01/31 职场文书
商铺租房协议书范本
2014/12/04 职场文书
土建技术员岗位职责
2015/04/11 职场文书
Python Parser的用法
2021/05/12 Python
在pycharm中无法import所安装的库解决方案
2021/05/31 Python
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android