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