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

Source: Internet
Author: User
Tags object model

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 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.