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 相关文章推荐
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
Apr 10 Javascript
Extjs 几个方法的讨论
Jan 28 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
Oct 14 Javascript
这些年、我收集的JQuery代码小结
Aug 01 Javascript
Jquery图形报表插件 jqplot简介及参数详解
Oct 10 Javascript
JavaScript中双符号的运算详解
Mar 12 Javascript
javascript 中select框触发事件过程的分析
Aug 01 Javascript
Vue自定义toast组件的实例代码
Aug 15 Javascript
vue开发环境配置跨域的方法步骤
Jan 16 Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
May 14 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递归列出所有文件和目录的代码
2008/09/10 PHP
一个典型的PHP分页实例代码分享
2011/07/28 PHP
PHP实现将视频转成MP4并获取视频预览图的方法
2015/03/12 PHP
php实现点击可刷新验证码
2015/11/07 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
PHP切割汉字的常用方法实例总结
2019/04/27 PHP
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
Jquery对数组的操作技巧整理
2014/03/25 Javascript
jQuery中empty()方法用法实例
2015/01/16 Javascript
jQuery实现图片渐入渐出切换展示效果
2015/08/15 Javascript
javascript日期比较方法实例分析
2016/06/17 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
2019/05/09 Javascript
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
Python格式化压缩后的JS文件的方法
2015/03/05 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
浅谈spring boot 集成 log4j 解决与logback冲突的问题
2020/02/20 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
Python 通过正则表达式快速获取电影的下载地址
2020/08/17 Python
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
The North Face北面法国官网:美国著名户外品牌
2019/11/01 全球购物
建筑工程专业学生的自我评价
2013/12/25 职场文书
安全标准化汇报材料
2014/02/03 职场文书
超市优秀员工事迹材料
2014/05/01 职场文书
毕业生找工作自荐书
2014/06/30 职场文书
民事赔偿协议书
2014/11/02 职场文书
心得体会格式及范文
2016/01/25 职场文书
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android
python中使用redis用法详解
2022/12/24 Redis