jQuery扩展

jQuery.fn.extend({
'jsonBind':function(json){
var dom=this;
dom.find('[json-bind]').each(function(){
var val=$.trim(json[$(this).attr('json-bind')]);
if(val!='') $(this).html(val);
});
dom.find('[json-bind-attr]').each(function(){
var s=$(this).attr('json-bind-attr').split('|');
if($(this).attr(s[]).indexOf('{%s}')>-){
$(this).attr(s[],$(this).attr(s[]).replace('{%s}',json[s[]]));
}else{
$(this).attr(s[],json[s[]]);
}
});
}
});

使用方法

<ul>
<li json-bind="name"></li>
<li json-bind="year"></li>
<li json-bind="birth"></li>
<li json-bind="work"></li>
<li><a href="#" json-bind-attr="href|website" json-bind="website"></a></li>
<li><a href="http://zcc.ren/article/{%s}" json-bind-attr="href|article">来源</a></li>
</ul>
$('ul').jsonBind({'name':'canson','year':,'birth':'1970-01-01','work':'webfront','website':'http://zcc.ren/','article':});

【实用代码片段】将json数据绑定到html元素 (转)的更多相关文章

  1. PHP实用代码片段(三)

    1. 目录清单 使用下面的 PHP 代码片段可以在一个目录中列出所有文件和文件夹. function list_files($dir) { if(is_dir($dir)) { if($handle ...

  2. PHP实用代码片段(二)

    1. 转换 URL:从字符串变成超链接 如果你正在开发论坛,博客或者是一个常规的表单提交,很多时候都要用户访问一个网站.使用这个函数,URL 字符串就可以自动的转换为超链接. function mak ...

  3. 回归 | js实用代码片段的封装与总结(持续更新中...)

      上一次更博还是去年10月28号了,截至今天已经有整整4个月没有更新博客了,没更新博客不是代表不学了,期间我已经用vue做了两个项目,微信小程序做了一个项目,只是毕竟找到工作了,想偷偷懒,你懂的. ...

  4. C#程序员经常用到的10个实用代码片段 - 操作系统

    原文地址  如果你是一个C#程序员,那么本文介绍的10个C#常用代码片段一定会给你带来帮助,从底层的资源操作,到上层的UI应用,这些代码也许能给你的开发节省不少时间.以下是原文: 1 读取操作系统和C ...

  5. Android 实用代码片段

    一些不常见确又很实用的代码块. 1.精确获取屏幕尺寸(例如:3.5.4.0.5.0寸屏幕) public static double getScreenPhysicalSize(Activity ct ...

  6. C#程序员经常用到的10个实用代码片段

    1 读取操作系统和CLR的版本 OperatingSystem os = System.Environment.OSVersion; Console.WriteLine(“Platform: {}”, ...

  7. [python实用代码片段]python获取当前时间的前一天,前一周,前一个月

    python获取当前时间的前一天,前一周,前一个月. 实用python的datetime.timedelta方法,避免了有的月份是30和31等不同的情况. 获取前一个月的时间,方法实现:首先datet ...

  8. PHP实用代码片段(一)

    1. 发送 SMS 在开发 Web 或者移动应用的时候,经常会遇到需要发送 SMS 给用户,或者因为登录原因,或者是为了发送信息.下面的 PHP 代码就实现了发送 SMS 的功能. 为了使用任何的语言 ...

  9. Android实用代码片段

    有时候,需要一些小的功能,找到以后,就把它贴到了博客下面,作为留言,查找起来很不方便,所以就整理一下,方便自己和他人. 一.  获取系统版本号: 1 PackageInfo info = this.g ...

随机推荐

  1. java 基础数据结构源码详解及数据结构算法

    http://www.cnblogs.com/skywang12345/category/455711.html http://www.cnblogs.com/liqiu/p/3302607.html

  2. printf回到上一行开头以及回到本行开头的方法

    回到上一行开头 #include <stdio.h> #include <unistd.h> int main(void) { ; ){ printf("%d\n&q ...

  3. Android调用系统相机、自定义相机、处理大图片

    Android调用系统相机和自定义相机实例 本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显示出来,该例子也会涉及到Android加载大图片时候的处理 ...

  4. lua中遍历table的几种方式比较

    当我在工作中使用lua进行开发时,发现在lua中有4种方式遍历一个table,当然,从本质上来说其实都一样,只是形式不同,这四种方式分别是: for key, value in pairs(tbtes ...

  5. Source Insight 源代码查看工具

    在开发的过程中,有时候我们需要研究源代码,查看源码是一个好的习惯,能帮我们学到很多的东西,比如JDK可以帮助我们理解很多设计模式在实际开发中的应用,又或者android开发者,源代码更是必不可少的,当 ...

  6. java解析json数组

      java解析json数组 import org.json.JSONArray; import org.json.JSONException; import org.json.JSONObject; ...

  7. 初见-TensorRT简介<转>

    下面是TensorRT的介绍,也可以参考官方文档,更权威一些:https://developer.nvidia.com/tensorrt 关于TensorRT首先要清楚以下几点: 1. TensorR ...

  8. 二十道经典C#面试题

    1.在下面的代码中,如何引用命名空间fabulous中的great? namespace fabulous{// code in fabulous namespace}namespace super{ ...

  9. window yii2 安装插件 报yiisoft/yii2 2.0.x-dev requires ext-mbstring错

    Problem 1 - yiisoft/yii2 2.0.x-dev requires ext-mbstring * -> the requested PHP extens ion mbstri ...

  10. Linux挂载命令mount用法及参数详解

    导读 mount是Linux下的一个命令,它可以将分区挂接到Linux的一个文件夹下,从而将分区和该目录联系起来,因此我们只要访问这个文件夹,就相当于访问该分区了. 挂接命令(mount) 首先,介绍 ...