jQuery基础教程-第6章练习

$(document).ready(function(){
var dictionary=$('#dictionary');
//Answer 1
dictionary.load('exercises-content.html .letter');

//Answer 2
$('.letter').mouseenter(function(e){
var letterId=this.id;
console.log(letterId);
dictionary.load('exercises-content.html #'+letterId);
}).mouseleave(function(e){
dictionary.html('');
});

//Answer 3
$('.letter').mouseenter(function(e){
var letterId=this.id;
console.log(letterId);
dictionary.load('does-not-exist.html #'+letterId, function(response,status,xhr){
if(status == "error"){
dictionary.html('An error occurred: ' + xhr.status)
.append(xhr.responseText);
}
});
}).mouseleave(function(e){
dictionary.html('');
});

//Answer 4
$.getJSON("http://examples.learningjquery.com/jsonp/g.php?callback=?",function(data){
var html='';
$.each(data, function(i,item){
html += '<div class="entry">';
html += '<h3 class="term">'+ item.term + '</h3>';
html += '<h3 class="part">'+ item.part +'</h3>';
html += '<div class="definition">'+ item.definition;
if(item.quote){
html +='<div class="quote">';
$.each(item.quote, function(qi,qitem){
html += '<div class="quote-line">'+ qitem +'</div>';
});
html +='</div>';
}
if(item.author){
html +='<div class="quote-author">' + item.author +'</div>';
}
html += '</div>';
html += '</div>';

});
dictionary.append($(html));
});
});