What is jQuery? Use jQuery to simplify Ajax Development

Source: Internet
Author: User

JQuery was created by John Resig in early 2006. It is a very useful JavaScript library for any programmer who makes JavaScript code. Whether you are new to the JavaScript language and want to obtain a library that can solve some complex problems in Document Object Model (DOM) scripts and Ajax development, jQuery is your first choice as a senior JavaScript expert tired of DOM scripts and boring repetitive work in Ajax development.
JQuery helps you ensure that the Code is concise and easy to read. You no longer have to write a bunch of repeated loop code and DOM script library calls. With jQuery, You can grasp the key points of the problem and use as few code as possible to implement the functions you want.

There is no doubt that jQuery's principle is unique: its purpose is to ensure that the Code is concise and reusable. After understanding and understanding this principle, you can start to learn this tutorial and see how many improvements jQuery has made to our programming methods.

Simplified code

The following is a simple example to illustrate the impact of jQuery on code. To execute some really simple and common tasks, for example, attaching a click event to each link in a certain area of the page, you can use pure JavaScript code and DOM scripts, as shown in Listing 1.

Listing 1. The jQuery DOM script is not used

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 functions implemented using jQuery.

Listing 2. Using the jQuery DOM script
$ ('# External_links a'). click (function () {return confirm ('you are going to visit: '+ this. href );});

Is it amazing? With jQuery, You can grasp the key points of the problem and only let the code implement the functions you want, saving some tedious processes. You do not need to cycle the elements. The click () function completes these operations. You do not need to call multiple DOM scripts. You only need to use a short string to define the required elements.

Understanding how this code works may be a little complicated. First, we use the $ () function, the most powerful function in jQuery. We usually use this function to select elements from the document. In this example, a string containing some Cascading Style Sheet (CSS) syntax is passed to the function, and jQuery finds these elements as efficiently as possible.

If you have basic knowledge about CSS selectors, you should be familiar with these syntaxes. In Listing 2, # external_links is used to retrieve the element whose id is external_links. The space after a indicates that jQuery needs to retrieve all <a> elements in the external_links element. It is very difficult to say in English, even in DOM scripts, but in CSS, this is no more simple.

The $ () function returns a jQuery object containing all elements that match the CSS selector. JQuery objects are similar to arrays, but they come with a large number of special jQuery functions. For example, you can call the click function to specify the click handler to all elements in the jQuery object.

You can also pass an element or an element array to the $ () function, which encapsulates these elements in a jQuery object. You may want to use this function to use jQuery functions for some objects, such as window objects. For example, we usually allocate a function to a loading event as follows:

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

Code with the same functions written using jQuery:

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

You may be aware that the process of waiting for window loading is very slow and painful, because it is necessary to wait until the entire page loads all the content, including all the images on the page. Sometimes you want to load images first, but in most cases, you only need to load Hypertext Markup Language (HTML. By creating a special ready event in the document, jQuery solves this problem by using the following methods:

$(document).ready(function() {   // do this stuff when the HTML is all ready}); 

This Code creates a jQuery object around the document element and creates a function to call the instance when the html dom document is ready. You can call this function as needed. In addition, you can use shortcuts to call this function in the real jQuery format. This is simple. You only need to pass a function to the $ () function:

$(function() {  // run this when the HTML is done downloading}); 

So far, I have introduced three usage methods of the $ () function. The fourth method can use strings to create elements. A jQuery object containing the element is generated. The example shown in listing 3 adds a section to the page.

Listing 3. Creating and attaching a simple Section

 $('

 

') .html('Hey World!') .css('background', 'yellow') .appendTo("body");

In the previous example, you may have noticed that another powerful feature of jQuery is method chaining ). Each time you call a method on a jQuery object, the same jQuery object is returned for the method. This means that if you need to call multiple methods for the jQuery object, you do not have to re-type the selector to achieve this purpose:

$('#message').css('background', 'yellow').html('Hello!').show(); 
  • Four pages in total:
  • Previous Page
  • 1
  • 2
  • 3
  • 4
  • Next Page

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: info-contact@alibabacloud.com 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.