jquery随记---ajax之取javascript对象（二）

最新推荐文章于 2024-06-17 09:28:21 发布

原创最新推荐文章于 2024-06-17 09:28:21 发布 · 467 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery #html #class #function #div

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

19 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的在线字典项目，通过点击不同的字母加载相应的词条内容。利用$.getScript()加载JavaScript文件，使用$.getJSON()解析JSON数据，并通过$('#dictionary').html()和$('#dictionary').append()来更新显示内容。

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

$.getScript()用来得到js文件

$('#dictionary').html(html)和$('#dictionary').append(html);的区别:

前者会覆盖$('#dictionary')中的内容，后者是在$('#dictionary')后面添加；

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

<!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;
  });

//点击C时
$('#letter-c a').click(function(){
  $('#dictionary').empty();
  $.getScript('c.js');
  });
})
</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>

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

c.js

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

// JavaScript Document
var entries=[
{
"term":"CALAMITY",
"part":"n.",
"definition":"A more than commonly plain and ..."
},
{
"term":"ACNNIBAL",
"part":"n.",
"definition":"A gastronome of the old school who..."
},
{
"term":"CHILDHOOD",
"part":"n.",
"definition":"The period of human life intermediate..."
},
{
"term":"CLATIONET",
"part":"n.",
"definition":"An instrument of torture operated by..."
},
{
"term":"CORSAIR",
"part":"n.",
"definition":"A politician of the seas."
}
];
var html='';
$.each(entries,function(){
html+='<div class="entry">';
html+='<h3 class="term">'+this['term']+'</h3>';
html+='<div class="part">'+this['part']+'</div>';
html+='<div class="definition">'+this['definition']+'</div>';
html+='</div>';
});
$('#dictionary').html(html);