jQuery 基础教程（第3版） ---第六章习题答案

//第一题
$(document).ready(function(){
    $('#dictionary').load('exercises-content.html .letter');
});
//第二题 （好像不太合理，E不能显示出来）
$(document).ready(function(){
    $('div.letter h3 a').hover(function(event){
        var id = $(this).parent().parent().get(0).id;
        $('#dictionary').load('exercises-content.html #'+id);
    },function(event){
        var id = $(this).parent().parent().get(0).id;
        $('#dictionary').html('');
    });
});

//第二题的另一个版本
$(document).ready(function(){
    $('div.letter').hover(function(event){
        var id = this.id;
        $('#dictionary').load('exercises-content.html #'+id);
    },function(event){
        $('#dictionary').html('');
    });
});


//第三题
$(document).ready(function(){
    $('div.letter').hover(function(){
        var tmp ={term:this.id};
        $.get('does-not-exist.html',tmp,function(data){
            $('#dictionary').html(data);
        }).error(function(e){
            $('#dictionary')
            .html('An error occured:'+e.status)
            .append(e.responseText);
        });
    },function(){
        //$('#dictionary').html('');
    });
});




//第四题 自己加了几个css样式，url的话，推特的不能用了，就用了个书本上出现过的，自己重新写了一遍
$(document).ready(function(){
    var url='http://examples.learningjquery.com/jsonp/g.php';
    $.getJSON(url+'?callback=?',function(data){//data将载有返回的数据
        var html='';
        $.each(data,function(entryIndex,entry){//entry是当前项组，entryIndex是当前项组的索引
            html+='<div class="bor">';
            html+='<h4 class="te">'+entry.term+'</h4>';
            html+='<span class="pa">'+entry.part+'</span>';
            html+='<div class="de">'+entry.definition+'</div>';
            if(entry.quote){
                html+='<div class="quot">';
                    $.each(entry.quote,function(lineIndex,line){
                        html+='<div class="quo-line">'+line+'</div>';
                    });
                html+='</div>';
                if(entry.author){
                html+='<div class="au">'+entry.author+'</div>';
            }
            }
            html+='</div>';
            $('#dictionary').html(html);
        });
        return false;
    });
});

/*第四题的css代码如下：*/
.bor{
    padding:0 10px 5px;
    border:1px solid #333333;
    width:600px;
    margin-bottom:5px;
}
.au{
    color:red;
}

.quot{
    background-color:#DBDBDB;
    padding:5px 7px;
    width:300px;
}