*************************************************************************************************
$.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);