jQuery插件Tmpl的简单使用方法_jquery

1.引入脚本

2.编写模板

2.1假设此时有一个,从后台一json格式发送来的数据

复制代码 代码如下:

[{"tId":1,"tName":"张三","tAge":14,"tClass":1,"TeachClass":{"cId":1,"cName":"1班"}},

复制代码 代码如下:

{"tId":2,"tName":"李四","tAge":25,"tClass":1,"TeachClass":{"cId":1,"cName":"1班"}},

复制代码 代码如下:

{"tId":4,"tName":"赵六 ","tAge":16,"tClass":2,"TeachClass":{"cId":2,"cName":"2班"}}]

2.2此时你要显示的内容如下

然后按照你要显示的内容,设置模板:

【类似于aspx中的repeater控件】

【注:记得要设置id】

3.填写模板

按照上面的假设,后台返回的是一个json格式的字符串,那么通过ajax请求,并填写 模板

4.看到了效果页面

以上所述就是本文的全部内容了,希望大家能够喜欢。

时间: 2024-11-03 06:00:26

jQuery插件Tmpl的简单使用方法_jquery的相关文章

jQuery插件Tmpl的简单使用方法

  JavaScript 也可以利用模版来解决这些问题,比如基于 jQuery 的 jquery.tmpl,现在已经被接受为官方的模版插件了.详细的 API 在 jQuery 的 Templates 里,内置的 demo 也尽情地演示了各种用法. 1.引入脚本 2.编写模板 2.1假设此时有一个,从后台一json格式发送来的数据 代码如下: [{"tId":1,"tName":"张三","tAge":14,"tCla

jquery拖拽排序简单实现方法(效果增强版)_jquery

本文实例讲述了jquery拖拽排序简单实现方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 原来没有新建动作,分析代码后发现很容易增强~~ 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试的拖拽功能</title

jQuery插件zepto.js简单实现tab切换

这篇文章主要介绍了jQuery插件zepto.js简单实现tab切换的代码,十分的简洁,有需要的小伙伴可以参考下 老规矩,先贴代码 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <script> $(function(){ window.onload = function() { var $li = $('.taocan-title li'); var $ul = $('.taocan-content .con110');   $li.mouse

jQuery使用$.each遍历json数组的简单实现方法_jquery

本文实例讲述了jQuery使用$.each遍历json数组的简单实现方法.分享给大家供大家参考,具体如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&quo

jquery动态切换背景图片的简单实现方法_jquery

本文实例讲述了jquery动态切换背景图片的简单实现方法.分享给大家供大家参考,具体如下: (function() { var bgCounter = 0, backgrounds = [ "Images/BACKGROUND_1_TEST.png", "Images/BACKGROUND_2_TEST.png", "Images/BACKGROUND_3_TEST.png" ]; function changeBackground() { bg

jquery获取复选框checkbox的值的简单实现方法_jquery

jQuery API : each(callback) :以每一个匹配的元素作为上下文来执行一个函数. :checked :匹配所有选中的被选中元素(复选框.单选框等,不包括select中的option) js: //js获取复选框值 var obj = document.getElementsByName("interest");//选择所有name="interest"的对象,返回数组 var s='';//如果这样定义var s;变量s中会默认被赋个null值

jquery通过name属性取值的简单实现方法_jquery

jquery通过name属性取值的简单实现方法 alert($("input[name='inputTest']").val()); alert($("input[type='text']").attr("id")); //这个是取id的值,方便记就写在这儿了 $("input[name='inputTest']").each( function(){ alert($(this).val()); } ) alert($(&qu

JQuery给网页更换皮肤的方法_jquery

本文实例讲述了JQuery给网页更换皮肤的方法.分享给大家供大家参考.具体分析如下: 为了更好的提升用户体验,很多网页都有换肤的功能,那么这是怎么实现的那,其实,换肤只不过是在对应的位置改了Css样式罢了!! 下面就演示如何简单的换肤 在设计HTmL代码时,注意一些小技巧,可以将皮肤选项按钮的id设置成和皮肤样式文件名称相同,这样皮肤切换的操作就简单多了样式连接要带一个有Id样式的连接表,通过操作该链接的href属性的值,从而实现换肤.即: 用户点击完就可以换肤了,但是,当用户刷新或者关闭浏览器

轮播的简单实现方法_jquery

1.闪现方式的轮播 不论述,实现比较简单,效果也比较好 2.滑动轮播 以下面的html代码为例(向左滑动) <div class="example" style="overflow: hidden; width: 266px;"> <ul style="width: 798px; float: left; height: 216px; margin-left: 0px;"> <li style="width