jQuery與getJson結(jié)合的用法實(shí)例
本文實(shí)例講述了jQuery與getJson結(jié)合的用法。分享給大家供大家參考。具體如下:
這里分析jQuery與getJson結(jié)合的一個(gè)應(yīng)用實(shí)例,因?yàn)閖son保存數(shù)據(jù)比較輕巧實(shí)用,所以個(gè)人比較喜歡Json功能,用這個(gè)簡(jiǎn)單寫了一個(gè)導(dǎo)航菜單的功能,比較簡(jiǎn)單的那種,目的是演示如何將jQuery與Json結(jié)合起來。
運(yùn)行效果截圖如下:
具體代碼如下:
<!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結(jié)合的一個(gè)應(yīng)用例子</title> <script src="jquery-1.6.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ var data = { "siteData" : [ { "siteClass" : "網(wǎng)頁制作", "siteList" : [ {"sName" : "腳本之家", "url" : "http://www.dbjr.com.cn/"}, {"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" : "趕集網(wǎng)", "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>
希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。
相關(guān)文章
基于jquery的設(shè)置頁面文本框 只能輸入數(shù)字的實(shí)現(xiàn)代碼
之前寫過的方法有缺陷,可以輸入空格?,F(xiàn)在將空格也屏蔽了。就是在之前的代碼里加入了過濾空格的功能。2011-04-04Jquery中children與find之間的區(qū)別詳細(xì)解析
這篇文章主要是對(duì)Jquery中children與find之間的區(qū)別進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-11-11jQuery+ajax讀取json數(shù)據(jù)并按照價(jià)格排序示例
這篇文章主要介紹了jQuery+ajax讀取json數(shù)據(jù)并按照價(jià)格排序,涉及jQuery基于ajax動(dòng)態(tài)獲取json文件數(shù)據(jù)并進(jìn)行數(shù)據(jù)遍歷與排序的相關(guān)操作技巧,需要的朋友可以參考下2018-03-03jquery調(diào)用asp.net 頁面后臺(tái)的實(shí)現(xiàn)代碼
前一篇介紹jquery調(diào)用webservice,這一篇引用的是用jquery直接調(diào)用aspx后臺(tái)方法。2011-04-04淺析onsubmit校驗(yàn)表單時(shí)利用ajax的return false無效問題
前幾天,在校驗(yàn)一個(gè)表單數(shù)據(jù)用到ajax時(shí),遇到 return false 無效問題,以下就是對(duì)這個(gè)問題進(jìn)行了分析介紹,需要的朋友可以參考下2013-07-07jQuery.form.js插件不能解決連接超時(shí)(timeout)的原因分析及解決方法
jQuery.form.js是一個(gè)form插件,支持ajax表單提交和ajax文件上傳。最近在使用jquery.form.js提交包含文件的表單時(shí),當(dāng)碰上網(wǎng)速較慢時(shí),而我們又設(shè)置了timeout時(shí)我們的頁面會(huì)死在這里,怎么回事呢,下面腳本之家小編給大家解答下2016-10-10