写了个json数据快捷展示的jq插件

本篇文章主要介绍了"写了个json数据快捷展示的jq插件"，主要涉及到方面的内容，对于Javascriptjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： 俗话说，分久必合，合久必分什么东西都阻挡不了大势，俗话说，大势所趋就是这个道理在多终端的环境下，以前让服务端比如php那些煞笔在页面上直接输出数据的年代早就过去...

俗话说，分久必合，合久必分

什么东西都阻挡不了大势，俗话说，大势所趋就是这个道理

在多终端的环境下，以前让服务端比如php那些煞笔在页面上直接输出数据的年代早就过去啦，

什么？你们还这样做？

那就有人要问了，那现在流行什么呢？请容我细细道来

那就是数据和前端绝对的分开，服务器只负责提供 一串json数据，至于数据怎么展示，就交给前端啦，所以一个接口可以满足web，ios，android，等各种需求

哎呦，需求很强烈呀！

对于网页前端的我们，以前的那些遍历数据的操作就全部到我们手里了

所以各种

$("#xxx").val()
$("#xxx").html()
$("#xxx").attr()

就出现了，一个一个写，好烦啊

甚至还有数组，我们要这样

for(var i=0;i
"+xx+"eee"+""+"
").apendTo(xxxx)
}

怎么办呢？能不能我只要写好一些属性，你就我自动给生成呢？

比如

自动把json的里的name给塞进去，多舒服

下面楼主就给大家写一个插件

啥叫插件？就是插进去的一件东西。。。

有朋友说了？噢。。。那我也有。。。

jrender

一个基于jQuery的json数据快速展示系统

用法

html代码

<divclass="info">
    <spanrender-html="weather">span>
    <ulrender-loop="seven_days">
            <lirender-html="seven_days.weather">li>
    ul>
div>

html代码

var data = {
    weather:'晴',
    seven_days:[
        {
            weather:'阴'
        },
        {
            weather:'雾霾'
        },
        {
            weather:'小雨'
        }
    ]
};
$(".info").renderValues(data);

说明

1.所有的数据展示都是在某一个标签内 比如

<spanrender-html="username">span>

循环类型的只循环，子元素的第一个元素，所以尽量套一个div进去

<divrender-loop="seven_days">
    <div>
        <spanrender-html="seven_days.temperature">span>
        <spanrender-html="seven_days.weather">span>
    div>
div>

错误的写法

<divrender-loop="seven_days">
    <spanrender-html="seven_days.temperature">span>
    <spanrender-html="seven_days.weather">span>
div>

2.可以render的类型有如下一个

render-html, 
render-src, 
render-value, 
render-href, 
render-loop, 
render-attr(这个类型自定义属性例子:render-attr="userid=uid")

代码地址当然要在github上拉

https://github.com/suxianbaozi/jrender

ok就到这里,大家去试试吧

以上就介绍了写了个json数据快捷展示的jq插件，包括了方面的内容，希望对Javascriptjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播有兴趣的朋友有所帮助。

本文网址链接：http://www.codes51.com/article/detail_265531.html