这篇文章主要介绍了jquery与getjson结合的用法，实例分析了jquery解析json数据及数组遍历的相关操作技巧，具有一定参考借鉴价值，需要的朋友可以参考下，具体如下：
这里分析jquery与getjson结合的一个应用实例，因为json保存数据比较轻巧实用，所以个人比较喜欢json功能，用这个简单写了一个导航菜单的功能，比较简单的那种，目的是演示如何将jquery与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"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>jquery与json结合的一个应用例子</title><script src="jquery-1.6.2.min.js" type="text/javascript"></script><script type="text/javascript">$(function(){ var data = { "sitedata" : [ { "siteclass" : "网页制作", "sitelist" : [ {"sname" : "脚本之家", "url" : "//www.jb51.net/"}, {"sname" : "51cto", "url" : "http://www.51cto.com/"}, {"sname" : "博客园", "url" : "http://www.cnblogs.com/"} ] }, { "siteclass" : "在线音乐", "sitelist" : [ {"sname" : "百度mp3", "url" : "http://mp3.baidu.com/"}, {"sname" : "千千静听", "url" : "http://www.music2.com/"}, {"sname" : "酷狗音乐", "url" : "http://www.kugou.com/"} ] }, { "siteclass" : "求职招聘", "sitelist" : [ {"sname" : "58同城", "url" : "http://www.58.com/"}, {"sname" : "赶集网", "url" : "http://www.ganji.com/"} ] } ] } var items = []; $.each(data.sitedata, function(i, val) {var li2size = val.sitelist.length;for(var m=0, li2 = ''; m < li2size; m++){ li2 += '<li id="li_'+i+'_'+m+'"><a href="' + val.sitelist[m].url + '" title="' + val.sitelist[m].sname + '" target="_blank">' + val.sitelist[m].sname + '</a></li>';} items.push('<li><dl id="li_' + i + '"><dt>' + val.siteclass +'</dt><dd><ul>'+ li2 + '</ul></dd></dl></li>'); }); $('<ul/>', { 'style': 'color:red;', 'class': 'my-new-list', html: items.join('') }).appendto('body'); })</script></head><body></body></html>
以上就是本章的全部内容，更多相关教程请访问jquery视频教程，json视频教程！