《JQuery基础教程》第四版课后练习代码--第六章

最新推荐文章于 2018-12-26 09:30:22 发布

原创最新推荐文章于 2018-12-26 09:30:22 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #jquery基础教程 #ajax

软件专栏收录该内容

4 篇文章

订阅专栏

本文介绍了使用jQuery实现页面加载后的内容提取、鼠标悬停加载特定内容、错误处理及通过JSONP获取GitHub仓库列表的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、页面加载后，把exercises-content.html的主体（body）内容提取到页面的内容区域

$(document).ready(function () {
    $("#letter-a a").click(function(event){
        event.preventDefault();
        $("#dictionary").load('exercises-content.html');
    })
})

2、不要一次就显示整个文档，请为左侧的字母列表创建“提示条”，当用户鼠标放到字母上时，从exercises-content.html中加载与该字母有关的内容

$(document).ready(function () {
    $(".letter").mouseover(function(event){
        event.preventDefault();
        var $text=$(this).text().trim().charAt(0).toLowerCase();
        $("#dictionary").load('exercises-content.html #letter-'+$text);
    })
})
3、为页面加载添加错误处理功能，在页面的内容区显示错误消息。修改脚本，请求does-not-exsit.html而不是exerises-content.html，以测试错误处理功能。

$(document).ready(function () {
    $(".letter").mouseover(function(event){
        event.preventDefault();
        var $text=$(this).text().trim().charAt(0).toLowerCase();
        $("#dictionary").load('does-not-exist.html #letter-'+$text,function(response,status,xhr){
            if(status=='error'){
                $("#dictionary").html("An error occured:"+xhr.status+' '+xhr.statusText);
            }
        })
    })
})
4、挑战：页面加载后，向GitHub发送一个JSONP请求，取得某个用户代码库的列表。把每个代码库的名称和URL插入到页面的内容区。取得JQuery项目代码库的URL是：https://api.github.com/users/jquery/repos

$(document).ready(function () {
    $.getJSON('https://api.github.com/users/jquery/repos',function(data){
        var html='';
        $.each(data,function(jsonindex,json){
            html+="<div>"+(jsonindex+1)+"<br>";
            html+="name: "+json.name+"<br>";
            html+="url: "+json.html_url+"<br>";
            html+="</div>"
        })
        $("#dictionary").html(html);
    })
})