The Document Ready Event

You might have noticed that all jQuery methods in our examples, are inside a document ready event:

$(document).ready(function(){

  // jQuery methods go here...

});

This is to prevent any jQuery code from running before the document is finished loading (is ready).

It is good practice to wait for the document to be fully loaded and ready before working with it. This also allows you to have your JavaScript code before the body of your document, in the head section.

Here are some examples of actions that can fail if methods are run before the document is fully loaded:

• Trying to hide an element that is not created yet
• Trying to get the size of an image that is not loaded yet

Tip: The jQuery team has also created an even shorter method for the document ready event:

$(function(){

  // jQuery methods go here...

});

Use the syntax you prefer. We think that the document ready event is easier to understand when reading the code.

Convert giữa các đối tượng của jQuery và DOM

từ DOM sang jQuery

jqueryObject = $(domObject);

từ jQuery sang DOM

domObject = jqueryObject.get(0);
domObject = jqueryObject.get()[0];

jQuery Callback Functions

A callback function is executed after the current effect is 100% finished.

---

jQuery Callback Functions

JavaScript statements are executed line by line. However, with effects, the next line of code can be run even though the effect is not finished. This can create errors.
To prevent this, you can create a callback function.
A callback function is executed after the current effect is finished.
Typical syntax: $(selector).hide(speed,callback);
Examples
The example below has a callback parameter that is a function that will be executed after the hide effect is completed:

Example with Callback

$("button").click(function(){
    $("p").hide("slow", function(){
        alert("The paragraph is now hidden");
    });
});

The example below has no callback parameter, and the alert box will be displayed before the hide effect is completed:

Example without Callback

$("button").click(function(){
    $("p").hide(1000);
    alert("The paragraph is now hidden");
});

jQuery Introduction

The purpose of jQuery is to make it much easier to use JavaScript on your website.

---

What You Should Already Know

Before you start studying jQuery, you should have a basic knowledge of:

• HTML
• CSS
• JavaScript

If you want to study these subjects first, find the tutorials on our Home page.

---

What is jQuery?

jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.
jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.
The jQuery library contains the following features:

• HTML/DOM manipulation
• CSS manipulation
• HTML event methods
• Effects and animations
• AJAX
• Utilities

Tip: In addition, jQuery has plugins for almost any task out there.

---

Why jQuery?

There are lots of other JavaScript frameworks out there, but jQuery seems to be the most popular, and also the most extendable.
Many of the biggest companies on the Web use jQuery, such as:

• Google
• Microsoft
• IBM
• Netflix

Will jQuery work in all browsers?

The jQuery team knows all about cross-browser issues, and they have written this knowledge into the jQuery library. jQuery will run exactly the same in all major browsers, including Internet Explorer 6!

jquery.com

What is jQuery?

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

jQueryUI

jQuery Mobile

QUnit

Sizzle

Resources

• jQuery Core API Documentation
• jQuery Learning Center
• jQuery Blog
• Contribute to jQuery
• About the jQuery Foundation
• Browse or Submit jQuery Bugs

A Brief Look

DOM Traversal and Manipulation

Get the <button> element with the class 'continue' and change its HTML to 'Next Step...'

1	$( "button.continue" ).html( "Next Step..." )

Event Handling

Show the #banner-message element that is hidden with display:none in its CSS when any button in #button-container is clicked.

1 2 3 4

var hiddenBox = $( "#banner-message" ); $( "#button-container button" ).on( "click", function( event ) { hiddenBox.show(); });

Ajax

Call a local script on the server /api/getWeather with the query parameter zipcode=97201 and replace the element #weather-temp's html with the returned text.

1 2 3 4 5 6 7 8 9

$.ajax({ url: "/api/getWeather", data: { zipcode: 97201 }, success: function( result ) { $( "#weather-temp" ).html( "<strong>" + result + "</strong> degrees" ); } });