<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>书签</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
var arr =[
{"text":"条件注释判断浏览器","url":"http://www.cnblogs.com/dtdxrk/archive/2012/03/06/2381868.html"},
{"text":"Bootstrap_带有案例","url":"http://bootstrap.kinghack.com/"},
{"text":"Bootstrap案例","url":"http://www.thinkphp.cn/topic/9261.html"},
{"text":"Bootstrap案例","url":"http://www.yixieshi.com/web/11120.html"},
{"text":"开源资料","url":"https://github.com/viljamis/responsive-nav.js"},
{"text":"JQ入门 学习网站","url":"http://www.cnblogs.com/zhangziqiu/archive/2009/04/30/jQuery-Learn-1.html"},
{"text":"W3CSCHOOL菜鸟教程","url":"http://www.w3cschool.cc/"},
{"text":"图表区选项","url":"http://higrid.net/c-art-highcharts_api.htm"},
{"text":"折线图等图代码","url":"http://www.highcharts.me/demo/index.php?p=10&theme=default"},
{"text":"Highcharts","url":"http://www.highcharts.me/"},
{"text":"Highcharts中文教程","url":"http://www.highcharts.me/docs/index.php"},
{"text":"HighCharts系列文章说明","url":"http://www.52wulian.org/highcharts-menu/"},
{"text":"Highcharts 中文文档翻译","url":"http://zerxd.iteye.com/blog/1542628 "},
{"text":"ITeye3.0","url":"http://www.iteye.com/"},
{"text":"极客标签","url":"http://www.gbtags.com/gb/gblibrary.htm "},
{"text":"c资讯----- HTML5 开发工具 ","url":"http://www.csdn.net/article/2014-02-07/2818326-HBuilder-the-fastest-web-ide"},
{"text":"2014年设计趋势","url":"http://blog.enqoo.com/blog/2014/01/24/2014-web-design-trends/ "},
{"text":"博客","url":"http://blog.sina.com.cn/s/articlelist_1763356541_0_1.html"},
{"text":"好看网站","url":"http://www.ruifox.com/"},
{"text":"好看网站-凡科","url":"http://www.faisco.com/ "},
{"text":"IE6,IE7,IE8 css bug搜集及浏览器兼容性问题解决方法汇总 ","url":"http://www.w3cfuns.com/blog-3-5396310.html"},
{"text":"数组具有的一系列方法用法","url":"http://www.w3cfuns.com/blog-1286-5396353.html"},
{"text":"数组的一系列用法","url":"http://www.w3school.com.cn/js/jsref_lastindexof.asp"},
{"text":"浏览器的重绘与重排","url":"http://www.w3cfuns.com/thread-5598410-1-1.html"},
{"text":"收集常用的正则表达式","url":"http://www.w3cfuns.com/blog-5414721-5396487.html"},
{"text":"手机网站前端开发布局技巧","url":"http://www.w3cfuns.com/blog-5396571-5396726.html"},
{"text":"手机网站前端开发经验总结","url":"http://www.w3cfuns.com/blog-5396571-5396727.html"},
{"text":"IE css bug及解决方案参考","url":"http://www.w3cfuns.com/article-5599265-1-1.html"},
{"text":"调皮的javascript","url":"http://www.w3cfuns.com/article-1295-1.html "},
{"text":"各类js效果集合","url":"http://popub.net:81/script/MSClass.html"},
{"text":"前端利器啊","url":"http://alloyteam.github.io/AlloyDesigner/worddoc.html"},
{"text":"传智php视频","url":"http://php.itcast.cn/news/caa9b58b/37b1/47f6/98e3/bd3600c98cfc.shtml"},
{"text":"百度效果库","url":"http://gmu.baidu.com"},
{"text":"yss的Web前端开发之旅之感之想- 博客频道 - CSDN.NET","url":"http://blog.csdn.net/do_it__?viewmode=contents"},
{"text":"html5游戏集合","url":"http://www.dlnuhome.cn/personal_webpage/works.html"},
{"text":"web小图标集合","url":"http://icomoon.io/app/#browse "},
{"text":"jquery event对象详","url":"http://www.cnblogs.com/snandy/archive/2011/06/17/2081213.html"},
{"text":"人人FED CSS编码规范浏览器特效支持规范","url":"http://bbs.zhinengshe.com/thread-47-1-5.html"},
{"text":"Can I use","url":"http://caniuse.com/#"},
{"text":"TaoBaoUED学习网站","url":"http://ued.taobao.com/blog/category/bowen/frontend/?qq-pf-to=pcqq.c2c"},
{"text":"人人都是产品经理","url":"http://www.woshipm.com/xiazai/33532.html"},
{"text":"模板王","url":"http://www.mobanwang.com/mb/201010/9043.html"},
{"text":"UICOC:","url":"http://www.uicoc.com/"},
{"text":"茶图网——设计师网址导航","url":"http://hao.teapic.com/"},
{"text":"UI设计师网址导航","url":"http://hao.uisdc.com/"},
{"text":"COCOA CHINA ","url":"http://www.cocoachina.com/bbs/thread.php?fid-23.html"},
{"text":"苹果开发中文网站优艾网","url":"http://www.chinaui.com/default.shtml "},
{"text":"设计达人—分享设计理念和资源","url":"http://www.shejidaren.com/"},
{"text":"包含前端技术，设计灵感‘设计资源）UCD China","url":"http://ucdchina.com/"},
{"text":"最全ps礼仪管理","url":"http://hao.uisdc.com/ps/"},
{"text":"uehtml","url":"http://www.uehtml.com/"},
{"text":"抠图器","url":"http://clippingmagic.com"},
{"text":"懒人程序","url":"http://www.kuitao8.com/all_41"},
{"text":"apress","url":"http://apress.com/book/view/1430228474"},
{"text":"regular-expressions.info","url":"http://www.regular-expressions.info"},
{"text":"The prototype object of JavaScript","url":"http://www.javascriptkit.com/javatutors/proto.shtml"},
{"text":"cookie 点赞","url":"http://uncletoo.com/html/application/790.html"},
{"text":"JQuery实现智能输入提示（仿机票预订网站）","url":"http://www.cnblogs.com/kyle_zhao/archive/2010/02/27/1674819.html"},
{"text":"Webkit内核的浏览器默认CSS属性","url":"http://www.blogjava.net/ThinkingTalking/archive/2010/07/12/325855.html"},
{"text":"破解无线密码","url":"http://wenku.baidu.com/view/842d8d24e2bd960590c677ce.html"},
{"text":"工具下载站","url":"http://msdn.itellyou.cn/"},
{"text":"bootstrap 学习中文网站","url":"http://www.bootcss.com/ "},
{"text":"yii中文教程网址","url":"http://www.yiiframework.com/doc/guide/1.1/zh_cn/quickstart.installation"},
{"text":"yii中文开发手册","url":"http://www.yiiframework.com/doc/guide/1.1/zh_cn/basics.convention#directory"},
{"text":"bootstrap","url":"http://getbootstrap.com/customize/"},
{"text":"之前做的测试版本没正式运营的网站","url":"http://bj.620866.com/counter/fangdai"},
{"text":"学习jquery网址","url":"http://www.css88.com/jqapi-1.9/ "},
{"text":"快捷编辑器配合sublime","url":"http://docs.emmet.io/ "},
{"text":"bootstrap 3.2.0版本就ie8兼容","url":"http://www.ypgogo.com/Event/info/vid/54846 "},
{"text":"Less源码","url":"https://github.com/less/less.js "}
];
var $jsondata = $("#bookmarks");
var strHtml = '<ol>';
$jsondata.empty();
$.each(arr,function(index,bookmarks){
//alert(this.text+" "+this.url);
strHtml += '<li>'+(index+1)+'、';
strHtml += '<a href="'+bookmarks["url"]+'" target="_blank">'+bookmarks["text"];
strHtml += '</a></li>';
})
strHtml +='</ol>';
$jsondata.append(strHtml);
// $(arr).each(function(){
// alert(this.text+" "+this.value);
// });
$("h3").css({
"background-color":"#f8f8f8",
"padding":"20px"
})
$("ol").css({
"list-style":"none",
"padding":"0px",
"margin":"0px"
})
$("li").css({
"padding":"10px",
"background-color":"#f8f8f8",
"color":"#333",
"height":"30px",
"line-height":"30px",
"margin-bottom":"20px"
})
$("li a").css("color",function(){ return "#333";})
$("body").css("padding","20px 30px")
})
</script>
</head>
<body>
<div>
<h3>书签</h3>
<div id="bookmarks"></div>
</div>
</body>
</html>
用外部获取的方式得到json数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>书签</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
$.ajaxSettings.async = false; //设置ajax 同步，若不设置的话，在执行getJSON的内容同时，下面的jquery也进行执行，由getJSON生成的strHtml里面的内容不能根据下面jquery设置的样式显示，在执行ol li等样式设置的时候strHtml还没有完全返回，因此执行jquery样式的时候页面找不到ol li 等元素，等strHtml返回完成后jquery设置ol li的样式也已经执行完了，所以ol li 等元素是没有样式的。因此一定要设置同步。
$.getJSON("bookmarks.json",function(data){
var $jsondata = $("#bookmarks");
var strHtml = '<ol>';
$jsondata.empty();
$.each(data,function(index,bookmarks){
//alert(this.text+" "+this.url);
strHtml += '<li>'+(index+1)+'、';
strHtml += '<a href="'+bookmarks["url"]+'" target="_blank">'+bookmarks["text"];
strHtml += '</a></li>';
})
strHtml +='</ol>';
$jsondata.append(strHtml);
})
$("h3").css({
"background-color":"#f8f8f8",
"padding":"20px"
})
$("ol").css({
"list-style":"none",
"padding":"0px",
"margin":"0px"
})
$("li").css({
"padding":"10px",
"background-color":"#f8f8f8",
"color":"#333",
"height":"30px",
"line-height":"30px",
"margin-bottom":"20px"
})
$("li a").css("color",function(){ return "#333";})
$("body").css("padding","20px 30px")
})
</script>
</head>
<body>
<div>
<h3>书签</h3>
<div id="bookmarks"></div>
</div>
</body>
</html>
json文件
[
{"text":"条件注释判断浏览器","url":"http://www.cnblogs.com/dtdxrk/archive/2012/03/06/2381868.html"},
{"text":"Bootstrap_带有案例","url":"http://bootstrap.kinghack.com/"},
{"text":"Bootstrap案例","url":"http://www.thinkphp.cn/topic/9261.html"}
]
扫一扫
1439
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
