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 相关文章推荐
[HTML/CSS/Javascript]WWTJS
Sep 25 Javascript
javascript css styleFloat和cssFloat
Mar 15 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
Jan 04 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
Feb 22 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 Javascript
js实现带缓动动画的导航栏效果
Jan 16 Javascript
详解VueJs前后端分离跨域问题
May 24 Javascript
Bootstrap Table使用整理(四)之工具栏
Jun 09 Javascript
jquery DataTable实现前后台动态分页
Jun 17 jQuery
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 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
php smarty模版引擎中的缓存应用
2009/12/02 PHP
PHP缓存技术的使用说明
2011/08/06 PHP
php array的学习笔记
2012/05/16 PHP
php pki加密技术(openssl)详解
2013/07/01 PHP
YII模块实现绑定二级域名的方法
2014/07/09 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
2016/12/08 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
2019/09/26 Javascript
JS几个常用的函数和对象定义与用法示例
2020/01/15 Javascript
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
Python模拟登录验证码(代码简单)
2016/02/06 Python
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
python3 读写文件换行符的方法
2018/04/09 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
python读取图片并修改格式与大小的方法
2018/07/24 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
2019/10/11 Python
python垃圾回收机制(GC)原理解析
2019/12/30 Python
基于Tensorflow高阶读写教程
2020/02/10 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
机关节能减排实施方案
2014/03/17 职场文书
全国优秀辅导员事迹材料
2014/05/14 职场文书
优秀班主任材料
2014/12/16 职场文书
CSS实现单选折叠菜单功能
2021/11/01 HTML / CSS
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript