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