首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

(二)入门指南——(2)jQuery可以做什么(What jQuery does)

2013-09-05 
(2)入门指南——(2)jQuery可以做什么(What jQuery does)The jQuery library provides a general-purpose abs

(2)入门指南——(2)jQuery可以做什么(What jQuery does)
The jQuery library provides a general-purpose abstraction layer for common web scripting, and is, therefore, useful in almost every scripting situation. Its extensible nature means that we could never cover all possible uses and functions in a single book, as plugins are constantly being developed to add new abilities. The core features, though, assist us in accomplishing the following tasks:

jQuery库为通用的web脚本提供了一个多用途的概念层级,因此在几乎所有的脚本环境中都是有用的。他的可扩展性因为这我们不可能在一本书中覆盖他的全部可能的使用方法和功能,正如插件不断的被开发出来去添加新功能。不过,他的核心功能帮助我们完成下面的功能:

Access elements in a document: Without a JavaScript library, web developers often need to write many lines of code to traverse the Document ObjectModel(DOM) tree and locate specific portions of an HTML document's structure. With jQuery, developers have a robust and efficient selector mechanism at their disposal, making it easy to retrieve the exact piece of the document that needs to be inspected or manipulated.

$('div.content').find('p');

存取文档元素:假如不使用js库,web开发者通常需要写很多行代码去遍历DOM树、找到在元素HTML结构中明确的位置。但是通过jQuery他们将会有一个强大且高效的选择器提供使用,这让检索那些需要被检索或者操作的文档部分变的很容易。$("div.content").find("p");

Modify the appearance of a web page: CSS offers a powerful method of influencing the way a document is rendered, but it falls short when web browsers do not all support the same standards. With jQuery, developers can bridge this gap, relying on the same standards support across all browsers. In addition, jQuery can change the classes or individual style properties applied to a portion of the document even after the page has been rendered.

$('ul > li:first').addClass('active');

修改页面的展现样式:css提供了一个影响页面渲染的有力方法,但是有一点不爽的是,不是所有的浏览器都支持相同的标准。使用jquery,开发者可以依赖所有浏览器都支持的标准度过这些空缺。另外,甚至在文档渲染以后,jquery也可以改变应用于部分文档上的类和style。

$('ul > li:first').addClass('active');

 Alter the content of a document: Not limited to mere cosmetic changes, jQuery can modify the content of a document itself with a few keystrokes. Text can be changed, images can be inserted or swapped, lists can be reordered, or the entire structure of the HTML can be rewritten and extended—all with a single easy-to-use Application Programming Interface(API).

$('#container').append('<a href="more.html">more</a>');

修改文档内容:不局限于仅仅美化页面的改变,仅仅敲几下键盘jquery就可以修改文档的内容,文本可以被修改,图片可以被插入或交换,列表可以被重新整理,全部的文档结构可以被重写或扩展---全部依靠一个简单使用的api。

$('#container').append('<a href="more.html">more</a>');

 Respond to a user's interaction: Even the most elaborate and powerful behaviors are not useful if we can't control when they take place. The jQuery library offers an elegant way to intercept a wide variety of events, such as a user clicking on a link, without the need to clutter the HTML code itself with event handlers. At the same time, its event-handling API removes browser inconsistencies that often plague web developers.

$('button.show-details').click(function() {

$('div.details').show();

});

对用户的交互作出反应:甚至最精心制作的有力的行为如果我们没有在他们发生的时候没有控制他们都是没有用的。jquery库提供了高雅的方法去处理很多种的事件,比如用户点击一个链接,而不用使用事件处理去混乱html代码。同时事件处理api还移除了通常折磨web开发者的兼容性问题。

$('button.show-details').click(function() {

$('div.details').show();

});

Animate changes being made to a document: To effectively implement such interactive behaviors, a designer must also provide visual feedback to the user. The jQuery library facilitates this by providing an array of effects such as fades and wipes, as well as a toolkit for crafting new graphic displays.

$('div.details').slideDown();

为文档添加动画改变:为了有效地实现交互行为,设计师必须也为用户提供一个视觉反馈。jquery通过提供一个效果数组,比如淡出,清除和精心制作图象展示的工具箱,实现了这一点。

$('div.details').slideDown();

Retrieve information from a server without refreshing a page: This code pattern has become known as Ajax, which originally stood for asynchronousJavaScript and XML, but has since come to represent a much greater set of technologies for communicating between the client and the server. The jQuery library removes the browser-specific complexity from this responsive, featurerich process, allowing developers to focus on the server-end functionality.

$('div.details').load('more.html #content');

无刷新的从服务器取回数据:这种代码模式已经以ajax的名字被大家熟知,代表异步的javascript和XML,但是他已经代表了一个更加强大的在客户端和服务器端交流的技术。jqery库从这个响应的很有特点的进程中移出了浏览器的复杂性,允许开发者关注服务器端的功能。

$('div.details').load('more.html #content');

Simplify common JavaScript tasks:In addition to all of the document-specific features of jQuery, the library provides enhancements to basic JavaScript constructs such as iteration and array manipulation.

$.each(obj, function(key, value) {
total += value;

});

简单的js任务:除了所有的这些文档明确的jquery特点以外,jquery提供了基础js概念的增强,比如迭代和数组控制。

$.each(obj, function(key, value) {
total += value;

});

Downloading the example code 

You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/supportand register to have the files e-mailed directly to you.

下载范例代码你可以使用你在http://www.packtpub.com上购买书籍的下载下载范例代码文件。如果你在其他别的地方购买的这本书,你可以访问http://www.packtpub.com/support然后注册,直接把这些文件发电子邮件给自己。

热点排行