使用jQuery简化Ajax开发——Ajax开发入门[1]

原文作者:Jesse Skinner
原文链接:Simplify Ajax development with jQuery
译者:令狐葱

jQuery 是一个可以简化 JavaScript™以及AJAX(Asynchronous JavaScript + XML,异步Javascript和XML)编程的Javascript库。不同于其他的Javascript库,jQuery有他自己的哲学,使你可以 很简单的编写代码。这篇文章就会带领你见识一下jQuery的哲学,探讨一下他的特性以及功能,并且会做一些ajax的示例,以及如何使用plug-in (插件)来扩展jQuery。

1. 什么是jQuery?

jQuery是个很优秀的Javascript 库,它诞生于2006年,出自John Resig之手。不管你是一个javascript新手,但是却想尝试一下DOM(Document Object Model)以及Ajax的繁杂,抑或你是个javascript专家级人物,但是已经厌倦了反复的重复那无味的DOM以及Ajax脚本,jQuery都 将是你的不二选择。

jQuery会帮助你保持代码的简单和简洁。你不必再去写一大堆重复的循环或者是DOM调用脚本,使用jQuery,你将很快找到关键点,并且可以以最少的代码表达你的思想。

jQuery的哲学其实很单一:简单、可重用。当你理解并且认同这种思想的时候,你就可以开始体会一下使用jQuery能让你的编程变得多么轻松愉快了!

2. 一些简单概念

这里是个简单的例子,向你展示jQuery如何影响你编写的代码。做的事情其实很简单,比如对页面上某一区域内的所有链接都添加一个click响应事件,你可以使用一般的Javascript以及DOM来写,代码见Listing1:

Listing 1. DOM scripting without jQuery
var external_links = document.getElementById('external_links');
var links = external_links.getElementsByTagName('a');
for (var i=0;i < links.length;i++) {
var link = links.item(i);
link.onclick = function() {
return confirm('You are going to visit: ' + this.href);
};
}

如果使用jQuery的话实现如下:

Listing 2. DOM scripting with jQuery

$('#external_links a').click(function() {
return confirm('You are going to visit: ' + this.href);
});


很惊讶,是吧?使用jQuery的话,你可以很快找到关键点,并且只需要表达你需要表达的,
而不需要罗里罗嗦。不需要对这些元素进行循环,click()函数可以处理好这一切。而且你不要谢太多的操作DOM的代码,
你需要的仅仅是使用很少的字符定义你要找的那个元素。

来看一下这段代码是如何工作的,有点小技巧。首先,看到$()函数--jQuery里最有用的最强大的函数.大部分情况下,
你使用这个函数从文档中选择元素.在这个例子中,使用这个函数传递带有一些级联样式表(Cascading Style Sheets,CSS)
语法的字符串,jQuery可以很方便的找到这个元素.

如果你懂一点基本的CSS选择符的只是,我想这个语法应该看起来相当熟悉.在Listing2中,#external_links用来寻找带有id为
external_links的元素.接下来的空格表示jQuery要找到在
#external_links元素内的所有的<a>元素.用口语开表达的话有点费劲--
用DOM脚本来写也挺麻烦,不过,在CSS里,没有比这个更简单的了.
$()函数返回一个包含与css选择符匹配的所有元素的一个jQuery对象. jQuery对象的概念就像是数组,但是它可能含有许多jQuery函数. 举例来说,你可以调用click函数来绑定一个click事件响应到jQuery对象中的每个元素上.

你还可以向$()函数传递一个元素或者是元素的数组,它将把所有的元素打包成一个jQuery对象.你可能想要把这一特性应用到象窗口对象上面.举例来说, 你有可能使用此函数来加载事件,像这样:

window.onload = function() {
// do this stuff when the page is done loading
};
如果使用jQuery的话,你可以这样写:

$(window).load(function() {
// run this when the whole page has been downloaded
});

如你所知,等待一个窗口的加载是异常痛苦的,因为必须加载整个页面,包括页面上所有的图片. 某些情况下,你需要首先加载图片,
但是大部分时候,你可能只需要看到一下超文本的标记(HTML).jQuery通过在文档上创建一个很特殊的事件ready来解决这个问题,
使用方法如下:

$(document).ready(function() {
// do this stuff when the HTML is all ready
});
这段代码创建一个document元素的jQuery对象, 然后当html DOM文档准备完毕后调用此实例. 你可以无限次的调用这个函数. 另外,
在真正的jQuery风格代码中,这个函数还有一个缩写形式.简单的传递一个函数给$()函数:

$(function() {
// run this when the HTML is done downloading
});
到现在位置,我已经向你展示了三种不同的使用$()函数的方法.第四种方式, 你可以使用一个字符串创建一个元素. 结果是一个包含此元素的jQuery对象. Listing3展示了一个增加一段到页面上的例子:

Listing 3. Creating and appending a simple paragraph
	
$('<p></p>')
.html('Hey World!')
.css('background', 'yellow')
.appendTo("body");
正如你从上面的例子中看到的一样,jQuery还有一个很强大的功能就是方法链(method chaining), 每次你对一个jQuery对象调用一个方法,这个方法将同样返回一个jQuery对象. 这就是说如果你需要对一个jQuery对象调用多个方法的话, 你可以不必重复写css选择符,可以像这样:

$('#message').css('background', 'yellow').html('Hello!').show();

3.jQuery让Ajax变得异常简单

使用jQuery,Ajax恐怕不能变得再简单了. jQuery有一系列的函数,可以使简单的事情变得真正简单,让复杂的事情也能变得尽可能
的简单.

Ajax的一个一般用法就是加载一段html代码到页面上的某一区域. 要实现这个,你只要简单的选中这个元素,然后使用load()函数.
下面是个例子,用来更新一些统计信息.

$('#stats').load('stats.html');
通 常,你可能需要向服务器端的页面传递一些参数. 你可能猜到了, 使用jQuery来实现的话会十分简单. 你可以选择使用$.post()或者$.get(), 当然要根据你的具体需要. 如果需要, 你可以传递一个可选的数据对象和一个回调函数. Listing4是一个发送数据以及使用回调函数的简单例子:

Listing 4. Sending data to a page with Ajax
	
$.post('save.cgi', {
text: 'my string',
number: 23
}, function() {
alert('Your data has been saved.');
});
如果你真的想要一些复杂的Ajax代码,那就是用$.ajax()函数. 你可以指定数据类型为xml, html, script或者json, jQuery 会为你自动准备好结果一遍你的回调函数能够立即使用这些数据. 你还可以设定 beforeSend, error, success, 以及 complete 回调函数来给用户一些ajax体验的更多提示信息. 另外,还有一些参数,可以让你设置ajax请求的超时时间,或者一个页面的"最后更改"状态. Listing5展示了一个获取xml文档并使用我上面提到的一些参数的简单例子:

Listing 5. Complex Ajax made simple with $.ajax()
	
$.ajax({
url: 'document.xml',
type: 'GET',
dataType: 'xml',
timeout: 1000,
error: function(){
alert('Error loading XML document');
},
success: function(xml){
// do something with xml
}
});
当 你成功的获得xml反馈的时候, 你可以使用jQuery来遍历xml文档,就像你操作html的方式一样. 这使操作一个xml文件以及整合内容到页面上变得十分的简单. Listing6 扩展了success函数, 根据xml文档里的每个<item>在页面上增加一个了list(列表)条目.

Listing 6. Working with XML using jQuery
	
success: function(xml){
$(xml).find('item').each(function(){
var item_text = $(this).text();

$('<li></li>')
.html(item_text)
.appendTo('ol');
});
}
阅读更多

使用jQuery简化Ajax 开发

11-09

转载:[url=http://www.8211.cn/repository/list_1524.html ]http://www.8211.cn/repository/list_1524.html [/url]rnrnrn[url=http://www.8211.cn/books/list/book_3460.html]jQuery[/url] 是一个JavaScript 库,它有助于简化 JavaScript? 以及 Asynchronous JavaScript + XML (Ajax) 编程。与类似的 JavaScript 库不同,jQuery 具有独特的基本原理,可以简洁地表示常见的复杂代码。学习 jQuery 基本原理,探索其特性和功能,执行一些常见的 Ajax 任务并掌握如何使用插件扩展 jQuery。rn rnrnrnrn 请访问 Ajax 技术资源中心,这是有关 Ajax 编程模型信息的一站式中心,包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。rn rn rnjQuery 由 John Resig 创建于 2006 年初,对于任何使用 JavaScript 代码的程序员来说,它是一个非常有用的 JavaScript 库。无论您是刚刚接触 JavaScript 语言,并且希望获得一个能解决文档对象模型(Document Object Model,DOM)脚本和 Ajax 开发中一些复杂问题的库,还是作为一个厌倦了 DOM 脚本和 Ajax 开发中无聊的重复工作的资深 JavaScript 专家,[url=http://www.8211.cn/books/list/book_3460.html]jQuery [/url]都会是您的首选。rnrnjQuery 能帮助您保证代码简洁易读。您再也不必编写大堆重复的循环代码和 DOM 脚本库调用了。使用 jQuery,您可以把握问题的要点,并使用尽可能最少的代码实现您想要的功能。rnrn毫无疑问,jQuery 的原理是独一无二的:它的目的就是保证代码简洁并可重用。当您理解并体会这一原理后,便可以开始学习本教程了,看看 jQuery 对我们的编程方式有多少改进吧。rnrnrnrnrn下面是一个简单示例,它说明了 jQuery 对代码的影响。要执行一些真正简单和常见的任务,比方说为页面的某一区域中的每个链接附加一个单击(click)事件,您可以使用纯 JavaScript 代码和 DOM 脚本来实现,如 清单 1 所示。rn rnvar external_links = document.getElementById('external_links');rnvar links = external_links.getElementsByTagName('a');rnfor (var i=0;i < links.length;i++) rn var link = links.item(i);rn link.onclick = function() rn return confirm('You are going to visit: ' + this.href);rn ;rnrn rnrn清单 2 显示了使用 jQuery 实现的相同的功能。rnrnrnrnrnrn rn$('#external_links a').click(function() rn return confirm('You are going to visit: ' + this.href);rn);rn rnrn是不是很神奇? 使用 jQuery,您可以把握问题的要点,只让代码实现您想要的功能,而省去了一些繁琐的过程。无需对元素进行循环,click() 函数将完成这些操作。同样也不需要进行多个 DOM 脚本调用。您只需要使用一个简短的字符串对所需的元素进行定义即可。rnrn理解这一代码的工作原理可能会有一点复杂。首先,我们使用了 $() 函数 —— jQuery 中功能最强大的函数。通常,我们都是使用这个函数从文档中选择元素。在本例中,一个包含有一些层叠样式表(Cascading Style Sheet,CSS)语法的字符串被传递给函数,然后 jQuery 尽可能高效地把这些元素找出来。rnrn如果您具备 CSS 选择器的基本知识,那么应该很熟悉这些语法。在 清单 2 中,#external_links 用于检索 id 为 external_links 的元素。a 后的空格表示 jQuery 需要检索 external_links 元素中的所有 元素。用英语说起来非常绕口,甚至在 DOM 脚本中也是这样,但是在 CSS 中这再简单不过了 rnrn$() 函数返回一个含有所有与 CSS 选择器匹配的元素的 jQuery 对象。jQuery 对象 类似于数组,但是它附带有大量特殊的 jQuery 函数。比方说,您可以通过调用 click 函数把 click 处理函数指定给 jQuery 对象中的所有元素。rnrn还可以向 $() 函数传递一个元素或者一个元素数组,该函数将把这些元素封装在一个 jQuery 对象中。您可能会想要使用这个功能将 jQuery 函数用于一些对象,比方说 window 对象。例如,我们通常会像下面这样把函数分配给加载事件:rnrnrnwindow.onload = function() rn // do this stuff when the page is done loadingrn;rn rnrn使用 jQuery 编写的功能相同的代码:rnrnrn$(window).load(function() rn // run this when the whole page has been downloadedrn);rn rnrn您可能有所体会,等待窗口加载的过程是非常缓慢而且令人痛苦的,这是因为必须等整个页面加载完所有的内容,包括页面上所有的的图片。有的时候,您希望首先完成图片加载,但是在大多数情况下,您只需加载超文本标志语言(Hypertext Markup Language,HTML)就可以了。通过在文档中创建特殊的 ready 事件,[url=http://www.8211.cn]jQuery [/url]解决了这个问题,方法如下:rnrnrn$(document).ready(function() rn // do this stuff when the HTML is all readyrn);rn rnrn这个代码围绕 document 元素创建了一个 jQuery 对象,然后建立一个函数,用于在 HTML DOM 文档就绪的时候调用实例。可以根据需要任意地调用这个函数。并且能够以真正的 jQuery 格式,使用快捷方式调用这个函数。这很简单,只需向 $() 函数传递一个函数就可以了:rnrnrn$(function() rn // run this when the HTML is done downloadingrn);rn rnrn到目前以止,我已经向大家介绍了 $() 函数的三种用法。第四种方法可以使用字符串来创建元素。结果会产生一个包含该元素的 jQuery 对象。清单 3 显示的示例在页面中添加了一个段落。rn rn$(' ')rn .html('Hey World!')rn .css('background', 'yellow')rn .appendTo("body");rn rnrn使用 jQuery 将使 Ajax 变得及其简单。[url=http://www.8211.cn]jQuery [/url]提供有一些函数,可以使简单的工作变得更加简单,复杂的工作变得不再复杂。rnrnAjax 最常见的用法就是把一块 HTML 代码加载到页面的某个区域中去。为此,只需简单地选择所需的元素,然后使用 load() 函数即可。下面是一个用于更新统计信息的示例:rnrnrn$('#stats').load('stats.html');rn rnrn通常,我们只需简单地把一些参数传递给服务器中的某个页面。正如您所预料的,使用 jQuery 实现这一操作非常地简单。您可以使用 $.post() 或者 $.get(),这由所需的方法决定。如果需要的话,您还可以传递一个可选的数据对象和回调函数。清单 4 显示了一个发送数据和使用回调的简单示例。rn rn$.post('save.cgi', rn text: 'my string',rn number: 23rn, function() rn alert('Your data has been saved.');rn);rn rnrn如果您确实需要编写一些复杂的 Ajax 脚本,那么需要用到 $.ajax() 函数。您可以指定 xml、script、html 或者 json,jQuery 将自动为回调函数准备合适的结果,这样您便可以立即使用该结果。还可以指定 beforeSend、error、success 或者 complete 回调函数,向用户提供更多有关 Ajax 体验的反馈。此外,还有一些其它的参数可供使用,您可以使用它们设置 Ajax 请求的超时,也可以设置页面 “最近一次修改” 的状态。清单 5 显示了一个使用一些我所提到的参数检索 XML 文档的示例。rnrn rn$.ajax(rn url: 'document.xml',rn type: 'GET',rn dataType: 'xml',rn timeout: 1000,rn error: function()rn alert('Error loading XML document');rn ,rn success: function(xml)rn // do something with xmlrn rn);rn rnrn当 success 回调函数返回 XML 文档后,您可以使用 jQuery 检索这个 XML 文档,其方式与检索 HTML 文档是一样的。这样使得处理 XML 文档变得相当地容易,并且把内容和数据集成到了您的 Web 站点里面。清单 6 显示了 success 函数的一个扩展,它为 XML 中的每个 元素都添加了一个列表项到 Web 页面中。rnrn rnsuccess: function(xml)rn $(xml).find('item').each(function()rn var item_text = $(this).text();rnrn $(' ')rn .html(item_text)rn .appendTo('ol');rn );rnrn rn 回页首 rn rnrnrnrnrn可以使用 jQuery 处理基本的动画和显示效果。animate() 函数是动画代码的核心,它用于更改任何随时间变化的数值型的 CSS 样式值。比方说,您可以变化高度、宽度、不透明度和位置。还可以指定动画的速度,定为毫秒或者预定义的速度:慢速,中速或快速。rnrn下面是一个同时变化某个元素高度和宽度的示例。请注意,这些参数没有开始值,只有最终值。开始值取自元素的当前尺寸。同时我也附加了一个回调函数。rnrnrn$('#grow').animate( height: 500, width: 500 , "slow", function()rn alert('The element is done growing!');rn);rn rnrnjQuery 的内置函数使更多常见的动画更容易完成。可以使用 show() 和 hide() 元素,立即显示或者以特定的速度显示。还可以通过使用 fadeIn() 和 fadeOut(),或者 slideDown() 和 slideUp() 显示和隐藏元素,这取决于您所需要的显示效果。下面的示例定义了一个下滑的导航菜单。rnrnrn$('#nav').slideDown('slow');rn rnrn 回页首 rn 或许 jQuery 最擅长的就是简化 DOM 脚本和事件处理。遍历和处理 DOM 非常简单,同时附加、移除和调用事件也十分容易,且不像手动操作那样容易出错。rnrn从本质上说,jQuery 可以使 DOM 脚本中的常用操作变得更加容易。您可以创建元素并且使用 append() 函数把它们与其它的一些元素链接到一起,使用 clone() 复制元素,使用 html() 设置内容,使用 empty() 函数删除内容,使用 remove() 函数删除所有的元素,即便是使用 wrap() 函数,用其他元素将这些元素包装起来。rnrn通过遍历 DOM,一些函数可以用于更改 jQuery 对象本身的内容。可以获得元素所有的 siblings()、parents() 和 children()。还可以选择 next() 和 prev() 兄弟元素。find() 函数或许是功能最强大的函数,它允许使用 jQuery 选择器搜索 jQuery 对象中元素的后代元素。rnrn如果结合使用 end() 函数,那么这些函数将变得更加强大。这个函数的功能类似于 undo 函数,用于返回到调用 find() 或 parents() 函数(或者其它遍历函数)之前的 jQuery 对象。rnrn如果配合方法链接(method chaining)一起使用,这些函数可以使复杂的操作看上去非常简单。清单 7 显示了一个示例,其中包含有一个登录表单并处理了一些与之有关的元素。rnrn rn$('form#login')rn // hide all the labels inside the form with the 'optional' classrn .find('label.optional').hide().end()rnrn // add a red border to any password fields in the formrn .find('input:password').css('border', '1px solid red').end()rnrn // add a submit handler to the formrn .submit(function()rn return confirm('Are you sure you want to submit?');rn );rn rnrn不管您是否相信,这个示例只是一行满是空白的被链接的代码。首先,选择登录表单。然后,发现其中含有可选标签,隐藏它们,并调用 end() 返回表单。然后,我创建了密码字段,将其边界变为红色,再次调用 end() 返回表单。最后,我在表单中添加了一个提交事件处理程序。其中尤为有趣的就是(除了其简洁性以外),jQuery 完全优化了所有的查询操作,确保将所有内容很好地链接在一起后,不需要对一个元素执行两次查询。rnrn处理常见事件就像调用函数(比方说 click()、submit() 或 mouseover())和为其传递事件处理函数一样简单。此外,还可以使用 bind('eventname', function()) 指定自定义的事件处理程序。可以使用 unbind('eventname') 删除某些事件或者使用 unbind() 删除所有的事件。有关这些函数的使用方法的完整列表,请参阅 参考资料 中的 jQuery 应用程序编程接口(Application Program Interface,API)文档。rnrn我们经常会使用 ID 来选择元素,比如 #myid,或者通过类名,比如 div.myclass 来选择元素。然而,jQuery 提供了更为复杂和完整的选择器语法,允许我们在单个选择器中选择几乎所有的元素组合。rnrnjQuery 的选择器语法主要是基于 CSS3 和 XPath 的。对 CSS3 和 XPath 了解的越多,使用 jQuery 时就越加得心应手。有关 jQuery 选择器的完整列表,包括 [url=http://www.8211.cn/web/classList_17.html]CSS 和 XPath[/url],请参阅 参考资料 中的链接。rnrnCSS3 包含一些并不是所有浏览器都支持的语法,因此我们很少使用它。然而,我们仍然可以在 jQuery 中使用 CSS3 选择元素,因为 jQuery 具备自己的自定义选择器引擎。比方说,要在表格中的每一个空列中都添加一个横杠,可以使用::empty 伪选择器(pseudo-selector):rnrnrn$('td:empty').html('-');rn rnrn如果需要找出所有不含特定类的元素呢? CSS3 同样提供了一个语法可以完成这个目的,使用 :not 伪选择器: 如下代码显示了如何隐藏所有不含 required 类的输入内容:rnrnrn$('input:not(.required)').hide();rn rnrn与在 CSS 中一样,可以使用逗号将多个选择器连接成一个。下面是一个同时隐藏页面上所有类型列表的简单示例:rnrnrn$('ul, ol, dl').hide();rn rnrnXPath 是一种功能强大的语法,用于在文档中搜寻元素。它与 CSS 稍有区别,不过它能实现的功能略多于 CSS。要在所有复选框的父元素中添加一个边框,可以使用 XPath 的 /.. 语法:rnrnrn$("input:checkbox/..").css('border', '1px solid #777');rn rnrnjQuery 中也加入了一些 CSS 和 XPath 中没有的选择器。比方说,要使一个表更具可读性,通常可以在表格的奇数行或偶数行中附加一个不同的类名 —— 也可以称作把表分段(striping)。使用 jQuery 不费吹灰之力就可以做到这点,这需要归功于 odd 伪选择器。下面这个例子使用 striped 类改变了表格中所有奇数行的背景颜色:rnrnrn$('table.striped > tr:odd').css('background', '#999999');rn rnrn我们可以看到强大的 jQuery 选择器是如何简化代码的。不论您想处理什么样的元素,不管这个元素是具体的还是模糊的,都有可能找到一种方法使用一个 jQuery选择器对它们进行定义。rnrn与大多数软件不同,使用一个复杂的 API 为 jQuery 编写插件并不是非常困难。事实上,jQuery 插件非常易于编写,您甚至希望编写一些插件来使代码更加简单。下面是可以编写的最基本的 jQuery 插件:rnrnrn$.fn.donothing = function()rn return this;rn;rn rnrn虽然非常简单,但是还是需要对这个插件进行一些解释。首先,如果要为每一个 jQuery 对象添加一个函数,必须把该函数指派给 $.fn。第二,这个函数必须要返回一个 this(jQuery 对象),这样才不至于打断 方法链接(method chaining)。rnrn可以轻松地在这个示例之上构建。要编写一个更换背景颜色的插件,以替代使用 css('background'),可以使用下面的代码:rnrnrn$.fn.background = function(bg)rn return this.css('background', bg);rn;rn rnrn清注意,可以只从 css() 返回值,因为已经返回了 jQuery 对象。因此,方法链接(method chaining)仍然运作良好。rnrn我建议在需要重复工作的时候使用 jQuery 插件。比方说,如果您需要使用 each() 函数反复执行相同的操作,那么可以使用一个插件来完成。rnrn由于 jQuery 插件相当易于编写,所以有上百种可供你选择使用。jQuery 提供的插件可用于制表、圆角、滑动显示、工具提示、日期选择器,以及我们可以想到的一切效果。有关插件的完整列表,请参阅 参考资料。rnrn最为复杂、使用最为广泛的插件要属界面(Interface),它是一种动画插件,用于处理排序、拖放功能、复杂效果、以及其它有趣和复杂的用户界面(User Interface,UI)。界面对于 jQuery 来说就如 Scriptaculous 对于 Prototype 一样。rnrn表单插件也同样流行且非常有用,通过它可以使用 Ajax 在后台中轻松地提交表单。这个插件用于处理一些常见的情况:您需要截获某个表单的提交事件,找出所有不同的输入字段,并使用这些字段构造一个 Ajax 调用。rnrnrnrn我只是简要地介绍了使用 jQuery 可能完成的任务。jQuery 使用起来非常有趣,因此我们总是能学到看上去很简单的新技巧和新特性。从刚开始使用 jQuery 的那一刻起,jQuery 便可以完全简化您的 JavaScript 和 Ajax 编程;每学会一点新知识,您的代码就会更简单一点。rnrn学习了 jQuery 之后,我在使用 JavaScript 语言进行编程的同时也获得了许多的乐趣。不用操心所有无聊的内容,我可以专注地编写有趣的内容。使用 jQuery 后,我几乎就告别了编写 for 循环代码的时代。甚至在想到要使用其它 JavaScript 库时,不禁会有所畏缩不前。jQuery 确确实实改变了我对 [url=http://www.8211.cn/web/classList_17.html]JavaScript 编程[/url]的看法。rnrn rnrnjQuery 相关学习资料rnrn rn[url=http://www.8211.cn/books/list/book_912.html]Learning+jquery中文版[/url]rn rn[url=http://www.8211.cn/books/list/book_4376.html]rnjQuery入门指南(中文)[/url]rn[url=http://www.8211.cn/books/list/book_5849.html]15天学习jQuery [/url]rn rn[url=http://www.8211.cn/books/list/book_5849.html]rnjQuery in Action [/url]rnrn rn

没有更多推荐了,返回首页