Rumah > Artikel > hujung hadapan web > Contoh penggunaan menggabungkan jQuery dan getJson

Contoh penggunaan menggabungkan jQuery dan getJson

PHPzasal: 2016-05-16 15:46:341290semak imbas

Artikel ini terutamanya memperkenalkan penggunaan jQuery dan getJson Ia menganalisis kemahiran operasi berkaitan jquery untuk menghuraikan data json dan traversal tatasusunan dengan contoh. Rakan yang memerlukannya boleh merujuknya seperti berikut:

Berikut ialah contoh aplikasi gabungan jQuery dan getJson Oleh kerana json agak ringan dan praktikal untuk menyimpan data, saya secara peribadi lebih suka fungsi Json ini untuk menulis fungsi menu navigasi . Ia agak mudah dan tujuannya adalah untuk menunjukkan cara menggunakannya.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Kod khusus adalah seperti berikut:

<!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>

Di atas ialah keseluruhan kandungan bab ini, lebih banyak tutorial berkaitan Sila lawati Tutorial Video jQuery, Tutorial Video JSON!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：jQuery kaedah pelaksanaan kesan penarafan bintang dinamik_jqueryArtikel seterusnya：jQuery kaedah pelaksanaan kesan penarafan bintang dinamik_jquery

Artikel berkaitan

Lihat lagi