jQuery与getJson结合的用法实例


Posted in Javascript onAugust 07, 2015

本文实例讲述了jQuery与getJson结合的用法。分享给大家供大家参考。具体如下:

这里分析jQuery与getJson结合的一个应用实例,因为json保存数据比较轻巧实用,所以个人比较喜欢Json功能,用这个简单写了一个导航菜单的功能,比较简单的那种,目的是演示如何将jQuery与Json结合起来。

运行效果截图如下:

jQuery与getJson结合的用法实例

具体代码如下:

<!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" : "https://3water.com/"},
    {"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程序设计有所帮助。

Javascript 相关文章推荐
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
Sep 08 Javascript
ParseInt函数参数设置介绍
Jan 02 Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 Javascript
JavaScript实现的多种鼠标拖放效果
Nov 03 Javascript
每天一篇javascript学习小结(Array数组)
Nov 11 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
Sep 14 Javascript
JS实现搜索框文字可删除功能
Dec 28 Javascript
JavaScript 中 apply 、call 的详解
Mar 21 Javascript
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
Aug 24 Javascript
react+redux仿微信聊天界面
Jun 21 Javascript
vue中动态select的使用方法示例
Oct 28 Javascript
《JavaScript函数式编程》读后感
Aug 07 #Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 #Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 #Javascript
C++中的string类的用法小结
Aug 07 #Javascript
Grunt入门教程(自动任务运行器)
Aug 06 #Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 #Javascript
jQuery实现hover合成事件的方法
Aug 06 #Javascript
You might like
php下使用strpos需要注意 === 运算符
2010/07/17 PHP
PHP中register_globals参数为OFF和ON的区别(register_globals 使用详解)
2012/02/05 PHP
CI框架源码阅读,系统常量文件constants.php的配置
2013/02/28 PHP
PHP取整函数:ceil,floor,round,intval的区别详细解析
2013/08/31 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
文字不间断滚动(上下左右)实例代码
2013/04/21 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
详解Vue中watch的详细用法
2018/11/28 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
[01:05:32]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第一局
2016/03/04 DOTA
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
Flask框架的学习指南之开发环境搭建
2016/11/20 Python
利用python微信库itchat实现微信自动回复功能
2017/05/18 Python
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
Python读取YUV文件,并显示的方法
2018/12/04 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
简单了解django索引的相关知识
2019/07/17 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
2016/03/22 HTML / CSS
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
电子商务专业推荐信范文
2013/12/02 职场文书
最新大学职业规划书范文
2013/12/30 职场文书
2014年幼儿园植树节活动方案
2014/03/02 职场文书
2014年创先争优活动总结
2014/05/04 职场文书
教师遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
会计简历自我评价
2015/03/10 职场文书
2015年幼儿园师德师风建设工作总结
2015/10/23 职场文书
关于拾金不昧的感谢信(五篇)
2019/10/18 职场文书
Python max函数中key的用法及原理解析
2021/06/26 Python
使用Redis实现分布式锁的方法
2022/06/16 Redis