Anwendungsbeispiele für die Kombination von jQuery und getJson-js-Tutorial-php.cn

Anwendungsbeispiele für die Kombination von jQuery und getJson

PHPz

Freigeben： 2018-09-29 11:43:41

Original

1314 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Verwendung von jQuery und getJson anhand von Beispielen analysiert. Freunde, die dies benötigen, können sich darauf beziehen wie folgt:

Hier ist ein Anwendungsbeispiel für die Kombination von jQuery und getJson. Da JSON relativ leicht und praktisch zum Speichern von Daten ist, bevorzuge ich persönlich die Json-Funktion, um einfach eine Navigationsmenüfunktion zu schreiben Es ist relativ einfach und dient dazu, die Verwendung von jQuery und Json zu demonstrieren.

Der Screenshot des Laufeffekts lautet wie folgt:

Der spezifische Code lautet wie folgt:

<!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" : "//www.jb51.net/"},
    {"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 = &#39;&#39;; m < li2Size; m++){
 li2 += &#39;<li id="li_&#39;+i+&#39;_&#39;+m+&#39;"><a href="&#39; + val.siteList[m].url + &#39;" title="&#39; + val.siteList[m].sName + &#39;" target="_blank">&#39; + val.siteList[m].sName + &#39;</a></li>&#39;;
}
 items.push(&#39;<li><dl id="li_&#39; + i + &#39;"><dt>&#39; + val.siteClass +&#39;</dt><dd><ul>&#39;+ li2 + &#39;</ul></dd></dl></li>&#39;); 
 }); 
 $(&#39;<ul/>&#39;, { 
 &#39;style&#39;: &#39;color:red;&#39;,
 &#39;class&#39;: &#39;my-new-list&#39;, 
 html: items.join(&#39;&#39;) 
 }).appendTo(&#39;body&#39;); 
})
</script>
</head>
<body>
</body>
</html>

Nach dem Login kopieren

Das Obige ist Den gesamten Inhalt dieses Kapitels und weitere verwandte Tutorials finden Sie unter jQuery-Video-Tutorial, JSON-Video-Tutorial!