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ụ.