jquery随记---ajax之操作javascript对象

最新推荐文章于 2022-07-11 17:43:44 发布

bzuld

最新推荐文章于 2022-07-11 17:43:44 发布

阅读量453

点赞数

分类专栏： jquery---随记文章标签： javascript jquery function html class div

本文链接：https://blog.csdn.net/bzuld/article/details/6774758

版权

jquery---随记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

*******************************************************************************************************************************************

操作javascript对象就是把javascript对象放到json文件中用{}表示javascript对象，用[]表示javascript数组；

通过$.getJSON(b.json,function(data){})得到b.json文件，用function(data){}函数处理得到的对象，data此处表示b.json中的内容；

用$.each(data,function(entryIndex,entry){})遍历b.json文件中的内容，entryIndex表示当前循环的索引，entry表示当前循环的对象，即{}中的内容

*******************************************************************************************************************************************

<!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>无标题文档</title>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//点击A时
$('#letter-a a').click(function(){
$('#dictionary').load('a.html');
alert("load……");
return false;
})
//点击B时
$('#letter-b a').click(function(){
  $.getJSON('b.json',function(data){
   $('#dictionary').empty();
   $.each(data,function(entryIndex,entry){
    var html='<div class="entry">';
    html+='<h3 class="term">'+entry['term']+'</h3>';
    html+='<div class="part">'+entry['part']+'</div>';
    html+='<div class="definition">';
    html+=entry['definition'];
    if(entry['quote']){
     html+='<div class="quote">'
     $.each(entry['quote'],function(lineIndex,line){
      html+='<div class="quote-line">'+line+'</div>';
      });
      if(entry['author']){
       html+='<div class="quote-author">'+entry['author']+'</div>'
       }
       html+='</div>'
     }
    html+='</div>';
    html+='</div>';
    $('#dictionary').append(html);
    })
   })
   return false;
  })
})
</script>
</head>
<body>
    <div class="letters" style="float:left;">
    <div class="letter" id="letter-a">
        <h3><a href="#">A</a></h3>
        </div>
        <div class="letter" id="letter-b">
        <h3><a href="#">B</a></h3>
        </div>
        <div class="letter" id="letter-c">
        <h3><a href="#">C</a></h3>
        </div>
        <div class="letter" id="letter-c">
        <h3><a href="#">D</a></h3>
        </div>
    </div>
    <div id="dictionary" style="float:right;">
    </div>
</body>
</html>

************************************************************************************

以下是b.json文件

************************************************************************************

[
{
  "term":"BACCHUS",
  "part":"n.",
  "definition":"A convenient deity invented by the ...",
  "quote":[
   "Is public worship,then, a sin,",
   "That for devotions paid to Bacchus,",
   "The lictors dare to run us in,",
   "And tesolutely thump and whack us?"
  ],
  "author":"Jorace"
},
{
  "term":"BACKBITE",
  "part":"v.t.",
  "definition":"To speak of a man as you find him when ..."
},
{
  "term":"BEARD",
  "part":"n.",
  "definition":"The hair that is commonly cut off by..."

},
]

bzuld

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jquery随记---ajax之操作javascript对象

*******************************************************************************************************************************************
复制链接

扫一扫