The Ready Event - The Complete JQuery Tutorial

jQuery Tutorial TOC Table of Contents

Chapter/article TOC

1. What is jQuery?
2. A jQuery editor
3. Getting started
4. Hello, world!
5. The ready event
6. Method chaining

Introduction

• What is jQuery?
• A jQuery editor
• Getting started
• Hello, world!
• The ready event
• Method chaining

Selectors

• Introduction to jQuery selectors
• Using elements, ID's and classes
• Using attributes
• Parent/child relation selectors

Effects

• Fading elements
• Sliding elements
• Custom animations with the animate() method
• Stopping animations with the stop() method

DOM manipulation

• Introduction to DOM manipulation
• Getting and setting content [text(), html() and val()]
• Getting and setting attributes [attr()]
• Getting and setting CSS classes
• The append() and prepend() methods
• The before() and after() methods
• The remove() and empty() methods

Events

• Introduction to events
• The bind() method
• The unbind() method
• The live() method

AJAX

• Introduction to AJAX
• The load() method
• The get() and post() methods
• Same Origin Policy
• Requesting a file from a different domain using JSONP
• Showing progress
• Aborting an AJAX request

Working with dimensions

• Working with widths and heights

Utilities & Helpers

• Looping with the each() method
• The toArray() and makeArray() methods

Misc

• Other frameworks and the noConflict() method

• jQuery
• ASP.NET MVC
• ASP.NET WebForms
• C#
• CSS3
• HTML5
• JavaScript
• PHP5
• WPF

Need to learn JavaScript? jQuery is a JavaScript framework, so if you don't already know about the JavaScript programming language, we recommend that you learn it now: Learn JavaScript

This article is currently in the process of being translated into Vietnamese (~99% done).

If you are fluent in Vietnamese, then please help us - just point to any untranslated element (highlighted with a yellow left border - remember that images should have their titles translated as well!) inside the article and click the translation button to get started. Or have a look at the current translation status for the Vietnamese language.

If you see a translation that you think looks wrong, then please consult the original article to make sure and then use the vote button to let us know about it.

Metadata

Please help us by translating the following metadata for the article/chapter, if they are not already translated.

If you are not satisfied with the translation of a specific metadata item, you may vote it down - when it reaches a certain negative threshold, it will be removed. Please only submit an altered translation of a metadata item if you have good reasons to do so!

Please login to translate metadata! Already logged in? Please try reloading the page!

• More info...
• Looking for the original article in English?

Introduction: The ready event

Như đã đề cập trong chương trước, phải để document được tải hết trước khi dùng. Nó cho phép bạn thêm mã JavaScript vào trước thân của document, trong phần head hay thông qua link của một file JavaScript bên ngoài. Bạn có thể làm vậy bằng cách đặt code vào trong sự kiện document đã sẵn sành. Bạn sẽ dùng cùng một ví dụ như trong "Hello, world!" nhưng code ở bên trong sự kiện ready:

<div id="divTest1"></div> <script type="text/javascript"> function DocumentReady() { $("#divTest1").text("Hello, world!"); } $(document).ready(DocumentReady); </script>

Những gì chúng ta làm tại đây là tạo một function gọi là DocumentReady được thực hiện ngay khi document đã sẵn cho thao tác trên DOM. Trong dòng cuối, chúng ta dùng phương thức ready() để gán function tới sự kiện ready để cho jQuery biết ngay khi document được tải thì chúng ta gọi hàm.

Tuy nhiên, chúng ta có thể viết ngắn lại bằng cách dùng hàm nặc danh. Nó về cơ bản có nghĩa là thay vì cung cấp tên hàm thì chúng ta chỉ đơn giản tạo ra nó và gọi từ hàm ready(). Nếu bạn mới dùng JavaScript thì nó hơi phức tạp nhưng khi quen với nó thì bạn có thể thích vì chỉ dùng vài dòng code đã hoàn thành cùng một công việc:

<div id="divTest2"></div> <script type="text/javascript"> $(document).ready(function() { $("#divTest2").text("Hello, world!"); }); </script>

Nhưng tất nhiên, nó không đủ ngắn cho jQuery, vì vậy người ta đã tạo ra phiên bản khởi tạo jQuery có hàm ready là tham số cho ngắn hơn:

<div id="divTest3"></div> <script type="text/javascript"> $(function() { $("#divTest3").text("Hello, world!"); }); </script>

Trong ví dụ cuối, hàm nặc danh được truyền trực tiếp vào hàm khởi tạo jQuery đã được gán cho sự kiện ready. Như bạn thấy khi bạn kiểm tra code thì sự kiện được khởi tạo ngay khi trang được tải, rất nhanh và bạn không nhận ra nó.

Như đã mô tả, đóng gói code trong hàm ready là quan trọng khi làm việc với jQuery và vì vậy bạn sẽ thấy bài giảng này dùng cách tiếp cận đó trong các ví dụ.

Hello, world! Previous Method chaining Next This article has been fully translated into the following languages:

• Arabic
• Czech
• Russian
• Spanish
• Vietnamese

Is your preferred language not on the list? Click here to help us translate this article into your language!