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 面向对象编程(一) 封装
Aug 28 Javascript
JQuery onload、ready概念介绍及使用方法
Apr 27 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
Mar 09 Javascript
AngularJs实现ng1.3+表单验证
Dec 10 Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 Javascript
javascript获取以及设置光标位置
Feb 16 Javascript
基于JavaScript实现的快速排序算法分析
Apr 14 Javascript
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 Javascript
webpack4从0搭建组件库的实现
Nov 29 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
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
新浪SAE搭建PHP项目教程
2015/01/28 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
javascript五图轮播切换实用版
2012/08/17 Javascript
关于JavaScript中string 的replace
2013/04/12 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
javascript中一些util方法汇总
2015/06/10 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
基于jQuery仿淘宝产品图片放大镜特效
2020/10/19 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
2016/10/10 Javascript
jQuery中的一些小技巧
2017/01/18 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
微信小程序实现下拉刷新动画
2019/06/21 Javascript
vue实现输入框自动跳转功能
2020/05/20 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
给你选择Python语言实现机器学习算法的三大理由
2017/11/15 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
对django2.0 关联表的必填on_delete参数的含义解析
2019/08/09 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
Python request操作步骤及代码实例
2020/04/13 Python
详细分析Python垃圾回收机制
2020/07/01 Python
python基于Kivy写一个图形桌面时钟程序
2021/01/28 Python
幼儿园小班教师随笔
2015/08/14 职场文书
2016大学生社会实践单位评语
2015/12/01 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书