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 相关文章推荐
新页面打开实际尺寸的图片
Aug 25 Javascript
javascript中为某个元素指定事件的三种方式
Aug 07 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
Sep 04 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
Sep 23 Javascript
简单谈谈Vue 模板各类数据绑定
Sep 25 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
Oct 31 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
May 04 Javascript
微信小程序云开发之新手环境配置
May 16 Javascript
浅谈Three.js截图并下载的大坑
Nov 01 Javascript
三剑客:offset、client和scroll还傻傻分不清?
Dec 04 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 不错的学习资料
2009/02/06 PHP
网页游戏开发入门教程二(游戏模式+系统)
2009/11/02 PHP
PHP PDOStatement::getColumnMeta讲解
2019/02/01 PHP
PHP7使用ODBC连接SQL Server2008 R2数据库示例【基于thinkPHP5.1框架】
2019/05/06 PHP
Prototype 学习 工具函数学习($w,$F方法)
2009/07/12 Javascript
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
基于vue如何发布一个npm包的方法步骤
2019/05/15 Javascript
JavaScript this关键字的深入详解
2021/01/14 Javascript
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
Python3基础之函数用法
2014/08/13 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
python中的文件打开与关闭操作命令介绍
2018/04/26 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
Pandas GroupBy对象 索引与迭代方法
2018/11/16 Python
Python批量查询关键词微信指数实例方法
2019/06/27 Python
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
Windows平台Python编程必会模块之pywin32介绍
2019/10/01 Python
利用html5的websocket实现websocket聊天室
2013/12/12 HTML / CSS
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
个人教师自我评价范文
2013/12/02 职场文书
受欢迎的大学生自我评价
2013/12/05 职场文书
农村葬礼主持词
2014/03/31 职场文书
家长对孩子的评语
2014/04/18 职场文书
安全标语口号
2014/06/09 职场文书
市场营销专业毕业生求职信
2014/07/21 职场文书
数据库连接池
2021/04/06 MySQL
了解Redis常见应用场景
2021/06/23 Redis
一篇文章带你了解Python和Java的正则表达式对比
2021/09/15 Python
Python四款GUI图形界面库介绍
2022/06/05 Python