Simplify Ajax development with jQuery 使用Jquery简化Ajax开发(I)

Simplify Ajax development with jQuery

使用 Jquery 简化 Ajax 开发

Discover how easy Ajax and DOM scripting can be

原来 DOM 和 Ajax 是如此简单

 

Level: Intermediate

文章等级：中级

Jesse Skinner, Web Developer, Freelance

Jesse Skinner ， Web 开发 ，自由撰稿人

10 Apr 2007

jQuery is a JavaScript library that helps simplify your JavaScript™ and Asynchronous JavaScript + XML (Ajax) programming. Unlike similar JavaScript libraries, jQuery has a unique philosophy that allows you to express common complex code succinctly. Learn about the jQuery philosophy, discover its features and functions, perform some common Ajax tasks, and find out how to extend jQuery with plug-ins.

jQuery 是一种可以简化 javascript 脚本和 Ajax 开发的一组库函数。与其他和 javascript 相似的库函数不同， jQuery 观点是让你使用简洁的开发出通常很复杂的代码。学习 jQuery 的观点，探索它的新特性和新功能，实现一些常见的 Ajax 功能，并且会学会使用 Jquery 的一些扩展插件。

What's jQuery?

什么是 jQuery ？

Created by John Resig in early 2006, jQuery is a great library for anyone who works with JavaScript code. Whether you're new to the JavaScript language and want a library to address some of the complexities of Document Object Model (DOM) scripting and Ajax or you're an advanced JavaScript guru and tired of the boring repetition involved with DOM scripting and Ajax, jQuery will suit you well.

jQuery helps you keep your code simple and succinct. You no longer have to write a bunch of repetitious loops and DOM scripting library calls. With jQuery, you can get right to the point and express yourself in the fewest possible characters.

The jQuery philosophy is certainly unique: It's designed to keep things simple and reusable. When you understand and feel comfortable with the philosophy, you'll start to see just how much jQuery can improve the way you program.

2006 年 John Resig 创造 jQuery ，这是一个对于任何一个使用 Javascript 工作的人都是一个相当不错的库。不论你是刚刚学会 Javascript 并且需要一个库来做一些复杂的 DOM 操作脚本，实现一些 Ajax ；还是一位已经厌倦了包含大量重复代码的资深的 Javascript 大师， jQuery 将是一个很好的选择。

 

 

Some simple simplifications

一些简化的例子

Here's a simple example of the impact jQuery can have on your code. To do something really simple and common, such as attach a click event to every link in an area of a page, you'd use plain JavaScript code and DOM scripting, as shown in Listing 1.

这有一些可能会出现在你的项目里的一些简洁的 jQuery 代码。展现了一些简单而又常见的功能，例如使页面上的某段区域的每一个链接都附加上一个单击事件，你可能会用到像 Listing1 那样的 Javascript 和 DOM 脚本。

 

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

    };

}

 

Listing 2 shows the same functionality achieved using jQuery.

Listing 2. DOM scripting with jQuery

        

$('#external_links a').click(function() {

    return confirm('You are going to visit: ' + this.href);

});

 

Amazing, isn't it? With jQuery, you get right to the point, and express only what you want the code to do without all the hassle. No need to loop over the elements; the click() function takes care of that. Also no need to make multiple DOM scripting calls: All that you need is a short string to define the elements to work on.

是不是很令人惊讶？使用 jQuery ，直切正题，毫不犹豫的写出你所需要的代码。不需要遍历所有的元素。 Click （）方法负责这项任务。当然也不需要重复的 DOM 脚本调用；所有你需要作的就是一小段代码去定义元素开始如何工作；

It can be a bit tricky to understand how this code even gets the job done. First, you have the $() function -- the most powerful function in jQuery. Mostly, you use this function to select elements from the document. In this example, the function is passed a string containing some Cascading Style Sheets (CSS) syntax, and jQuery finds the elements as efficiently as possible.

解释这些代码使如何工作的可能会有一些复杂。首先，你使用了 $() 方法―― jQuery 中最强大的方法。大多数情况下，你使用它来从文档对象中选择元素对象，这个方法传送一个包含 CSS 变量的字符串， jQuery 会以最有效率的方法找到它。

If you know the basics of CSS selectors, this syntax should look familiar. In Listing 2, #external_links looks for the element with an id of external_links . A space followed by a tells jQuery to look for all the <a> elements inside the external_links element. That's a mouthful to say in English -- and even in DOM scripting -- but in CSS, it couldn't be simpler.

 

如果你比较熟悉 CSS 的选择器，在 Listing2 中的这个变量可能会看起开很熟悉，

#external_links 寻找 id 为 #external_links 的所有元素。一个 a 后面的空格告诉 jQuery 去寻找所有在 #external_links 内的 <a> 标签的元素对象。可能在 DOM 之中不会是最简洁的写法，但是对于 CSS ，这已经是最简单的写法了。

The $() function returns a jQuery object containing all the elements that match the CSS selector. A jQuery object is something like an array but comes with a ton of special jQuery functions. For example, you can assign a click handler function to each element in the jQuery object by calling the click function.

You can also pass an element or an array of elements to the $() function, and it will wrap a jQuery object around the elements. You might want to use this functionality to employ jQuery functions on things like the window object. For example, you typically assign the function to the load event like this:

$() 方法返回所有包含在所符合 CSS 选择器的内的 jQuery 对象。一个 jQuery 对象就像是一个数组，但是它包含了许多特殊的函数。例如，你可以通过调用 click 方法为每一个元素对象分配一个点击函数的句柄。

 

window.onload = function() {

    // do this stuff when the page is done loading

};

 

Using jQuery, you write the same code like this:

$(window).load(function() {

    // run this when the whole page has been downloaded

});

 

As you probably already know, waiting for the window to load is painfully slow, because the whole page must finish loading, including all the images on the page. Sometimes, you want the images to finish loading first, but most of the time, you just need the Hypertext Markup Language (HTML) to be there. jQuery solves this problem by creating a special ready event on the document, used like this:

你可能知道，等待一个窗口的缓慢是一件非常痛苦的事情，因为这个页面必须完全载入，包括所有页面上的图片。有些时候，你可能会需要一些图片首先被载入，但是大多数的情况下，你仅仅需要的是 HTML 语句。 jQuery 通过 ready 时间解决了这个问题，甚至是整个文档对象。

$(document).ready(function() {

    // do this stuff when the HTML is all ready

});

 

This code creates a jQuery object around the document element, then sets up a function to call the instance when the HTML DOM document is ready. You can call this function as many times as necessary. And, in true jQuery style, a shortcut calls this function. Simply pass a function to the $() function:

这段代码围绕 document 元素对象建立了一个 jQuery 对象，然后当页面 DOM 元素被载入的时候使用一个方法调用它的实例。你可以按照需要的次数条用这个方法。而且，实际情况下，可以使用 $() 方法

简化这一切

$(function() {

    // run this when the HTML is done downloading

});

 

So far, I've shown you three different ways to use the $() function. With a fourth way, you can create an element using a string. The result is a jQuery object containing that element. Listing 3 shows an example that adds a paragraph to the page.

到现在，我已经从三个不同的方面向你介绍 $() 方法的使用方法。在第四种方法里，你可以使用字符串建立元素。返回的结果是一个包含哪个元素对象的 jQuery 对象。

Listing 3. Creating and appending a simple paragraph

        

$('<p></p>')

    .html('Hey World!')

    .css('background', 'yellow')

    .appendTo("body");

 

As you might have noticed from the previous example, another powerful feature of jQuery is method chaining. Every time you call a method on a jQuery object, the method returns the same jQuery object. This means that if you need to call multiple methods on a jQuery object, you can do it without re-typing the selector:

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

 

通过前面几个例子，你可能注意到 jQuery 的另一个强大的特性是 method chaining （函数链）。每当你在 jQuery 对象中调用一个方法的时候，这个方法同样会返回一个 jQuery 对象。这就意味着当你需要对一个 jQuery 对象使用一连串方法的时候，你可以这样写：