Simplifying Ajax development with jquery: see how simple Ajax and Dom scripting can be

What is JQuery?

JQuery was created by John Resig in early 2006 and is a useful JavaScript library for any programmer using JavaScript code. Whether you're just in touch with the JavaScript language, and want to get a library that solves some of the complex problems in the Document Object Model (model,dom) script and Ajax development, or as a tedious duplication of DOM scripting and Ajax development As a senior JavaScript expert, JQuery will be your first choice.

JQuery can help you keep your code simple and readable. You no longer have to write large stacks of repetitive loops and DOM script library calls. With JQuery, you can grasp the main points of the problem and implement the functionality you want with the least amount of code possible.

There is no doubt that the principle of jQuery is unique: Its purpose is to ensure that the code is concise and reusable. Once you understand this principle, you can start learning this tutorial and see how much jQuery has improved our programming style.

Some simple code simplification

The following is a simple example that illustrates the impact of JQuery on your code. To perform some really simple and common tasks, such as attaching a click event to each link in one area of a page, you can use pure JavaScript code and a DOM script, as shown in Listing 1.

Listing 1. No DOM script with 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 that was implemented using JQuery.

Listing 2. DOM script with JQuery

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

Isn't it amazing? With JQuery, you can grasp the main points of the problem and just let the code implement the functionality you want, eliminating some tedious process. You do not have to loop the elements, and the Click () function completes these operations. There is also no need for multiple DOM script calls. You only need to use a short string to define the elements that you want.

Understanding how this code works can be a bit tricky. First, we used the $ () function, the most powerful function in--jquery. Typically, we use this function to select elements from a document. In this case, a string containing some cascading style sheets (cascading style sheet,css) syntax is passed to the function, and jQuery can find the elements as efficiently as possible.

If you have a basic knowledge of CSS selectors, you should be familiar with these syntaxes. In Listing 2, #external_links is used to retrieve an element with an ID of external_links. A space after a indicates that JQuery needs to retrieve all the <a> elements in the external_links element. Speaking in English is very round the mouth, even in the DOM script, but in the CSS this is simple

The $ () function returns a JQuery object that contains all the elements that match the CSS selector. The jquery object is similar to an array, but it comes with a large number of special jquery functions. For example, you can assign the click handler to all the elements in the JQuery object by calling the Click function.

You can also pass an element or an array of elements to the $ () function that encapsulates the elements in a JQuery object. You might want to use the JQuery function for some objects, such as window objects, using this feature. For example, we typically assign functions to load events as follows:

window.onload　=　function()　{
　　//　do　this　stuff　when　 the　page　is　done　loading　
};

Code with the same functionality written in JQuery:

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