jQuery is a fast, functional, multi-functional JavaScript library created by John Resig in 2006 with a meaningful motto: Write less, do more - Write less, do more .

jQuery simplifies HTML document browsing, event handling, animation and Ajax interaction for fast web development. Web analytics has shown that jQuery is the most widely deployed JavaScript library.

jQuery is a set of JavaScript tools designed to simplify different tasks by writing less code. The following lists some of the most important features supported by jQuery:

1. Manipulating the DOM - jQuery makes it easy to select DOM elements to traverse (browse) as easily as using CSS, and edit their content by using the open source Selector media, which is called Sizzle .
2. Event handling - jQuery helps to interact with users better by handling diverse events without making HTML code messy with Event Handler.
3. AJAX support - jQuery helps you a lot to develop a feature-rich and responsive site using AJAX technology.
4. Animated effects - jQuery comes with a lot of beautiful animation effects that you can use for your websites.
5. Compact - jQuery is a lightweight library - it is only about 19KB (gzipped).
6. Most supported by modern browsers - jQuery is supported mostly by modern browsers, and works well on IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+.
7. Update and support the latest technologies - jQuery supports CSS3 Selector and basic XPath syntax.

How to use jQuery?

There are two ways to use jQuery:

Local installation - You can download the jQuery Library on your computer and include it in the HTML code.

Using from CDN (CDN Based Version) - You can put jQuery library into HTML code directly from the Content Delivery Network (CDN).

Install jQuery internally

Visit https://jquery.com/download/ to download the latest version of jQuery. Now put jquery-2.1.3.min.js file into a folder in your Website, for example / jquery .

Now you can include the jquery library in your HTML file as follows:

 The jQuery Example  type = "text/javascript" src = "./jquery/jquery-2.1.3.min.js" >  type = "text/javascript" > $ ( document ). ready ( function (){ document . write ( "Xin chào bạn!" ); }); 

 Hello 

It will result:

 Hello! 

Use CDN

You can include the jQuery library in HTML code directly from the Content Delivery Network (CDN). Google and Microsoft provide the latest version.

In this series, we use Google CDN.

For example

Now we rewrite the above example using the jQuery library from Google CDN.

 The jQuery Example  type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" >  type = "text/javascript" > $ ( document ). ready ( function (){ document . write ( "Xin chào bạn!" ); }); 

 Hello 

It will result:

 Hello! 

How to call a jQuery library function?

Similar to JavaScript, before we use jQuery's code to read or edit DOM objects, we need to make sure we start adding events as soon as the DOM is ready.

If you want an event to work on your page, you should call it inside the $ (document) .ready () function. Everything inside will load immediately after the DOM is loaded and before the page content is loaded.

To do this, we register an event ready for the document as follows:

 $ ( document ). ready ( function () { // thực hiện khi DOM sẵn sàng }); 

To call any jQuery library function, use the HTML script tags as below:

 The jQuery Example  type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" >  type = "text/javascript" language = "javascript" > $ ( document ). ready ( function () { $ ( "div" ). click ( function () { alert ( "Xin chào bạn!" );}); });  id = "mydiv" > Nhấp vào đây để xem hộp hội thoại.