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

原创 2016年08月28日 16:21:18

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


版权声明:本文为博主原创文章,未经博主允许不得转载。

学习笔记:《jQuery基础教程》第四版第六章课后练习——通过Ajax发送数据

页面加载后,把exercises-content.html的主体(body)内容提取到页面的内容区域。 不要一次就显示整个文档,请为左侧的字母列表创建“提示条”,当用户鼠标放到字母上时,从exerci...
  • la413972057
  • la413972057
  • 2015年12月23日 20:56
  • 828

学习笔记:《jQuery基础教程》第四版第二章课后练习

学习笔记——《jQuery基础教程》第四版第二章课后练习最近抽时间系统的学习下jQuery相关知识,看看《jQuery基础教程》。顺便把课后练习的代码整理发上来看看。 给位于嵌套列表第二个层次的所有<...
  • la413972057
  • la413972057
  • 2015年10月08日 19:48
  • 1356

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

1、在Charles Dickens被单击时,给它应用selected样式       $(function(){ $(".author").click(function(){ ...
  • qq_22655689
  • qq_22655689
  • 2016年08月12日 19:58
  • 677

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

1、修改样式表,一开始先隐藏页面内容,当页面加载后,慢慢地淡入内容 $(document).ready(function () { var $body=$("body"); $bod...
  • qq_22655689
  • qq_22655689
  • 2016年08月25日 19:33
  • 344

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

1、修改添加back to top链接的代码,以便这些链接只从第四段后面才开始出现 $(document).ready(function(){ var $p=$('div.chapter p...
  • qq_22655689
  • qq_22655689
  • 2016年08月26日 14:32
  • 538

学习笔记:《jQuery基础教程》第四版第五章课后练习——操作DOM

修改添加back top链接的代码,以便这些链接只从第四段后面才开始出现。 在单击back to top链接时,为每个链接后面添加一个新段落,其中包含You were here字样。确保链接仍然有效。...
  • la413972057
  • la413972057
  • 2015年11月26日 20:16
  • 1179

学习笔记:《jQuery基础教程》第四版第三章课后练习

在Charles Dickens被单击时,给它应用selected样式。 在双击章标题()时,切换章文本的可见性。 当用户按下向右方向键时,切换到下一个body类;右方向键的键码是39. 挑战:使用c...
  • la413972057
  • la413972057
  • 2015年10月08日 20:12
  • 648

《jQuery基础教程》第四版第七章课后练习——使用插件

把幻灯片的切换周期延长到1.5秒,把动画效果修改为下一张幻灯片淡入之前,前一张幻灯片淡出。请参考Cycle插件的文档,找到实现上述功能的选项。 设置名为cyclePaused的cookie,将它的有效...
  • la413972057
  • la413972057
  • 2015年12月27日 14:51
  • 561

学习笔记:《jQuery基础教程》第四版第四章课后练习——样式与动画

1、修改样式表,一开始先隐藏页面内容,当页面加载后,慢慢地淡入内容。$(document).ready(function() { $('body').css('display', 'none'...
  • la413972057
  • la413972057
  • 2015年11月19日 15:39
  • 796

jQuery基础教程(第四版)

最近恶补 HTML CSS JavaScript JQuery ajax json 等前端的东东,还有就是JBPM工作流,为接下来的工作上的项目应用做好准备!加油...
  • shangguanwuxi
  • shangguanwuxi
  • 2014年06月06日 20:12
  • 243
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:《JQuery基础教程》第四版课后练习代码--第六章
举报原因:
原因补充:

(最多只允许输入30个字)