Học jquery từ cơ bản đến nâng cao phần 2 hiểu sâu hơn về $( document ).ready()

vnfit.com · 26/2/15

Một trang web là không thể thao tác nếu như mà trang chưa được tải về đẩy đủ ( ở đây ý nói là DOM chưa được tải về đầy đủ nhé nếu chưa hiểu về DOM bạn sẽ phải tìm hiểu trước).

Nói sơ lược về DOM: Nó là một cấu trúc theo kiểu cây phân cấp nó giống với phả hệ của một dòng tộc hay gia đình, trong website cũng thế cũng phân cấp một ví dụ nho nhỏ là

<div>

<p>

<a href=”vnfit.com”>vnfit.com</a>

</p>

</div>

với ví dụ này thì bạn thấy rõ luôn là thẻ “div” là ông của thẻ “a” và thẻ “p” là cha của thẻ “a”

Nói qua về DOM thế thôi bạn có thể search google và nó cực dễ để hiểu. Jquery có thể bắt được cái sự kiện là toàn bộ trang của bạn đã được tải xong ( trừ ảnh và frame,banner,..chỉ các thành phần html và text) sẵn sàng cho jquery có thể thao tác trên các thành phần. Code bên trong $( document ).ready() sẽ chỉ được thự hiện khi Document Object Model (DOM) là đã được tải về đầy đủ và sẵn sàng để có thể thao tác. Code bene trong $( window ).load(function() { ... }) sẽ chỉ chạy kho toàn bộ trang được tải về 100% (gồm cả images và iframes), không giống như là DOM.

// một ví dụ $( document ).ready() demo.
$( document ).ready(function() {
console.log( "ready!" );
});
Kinh nghiệm của nhiều developer thường hay sử dụng dạng ngắn gọn $() thay cho $( document ).ready(). Nếu bạn viết code cho người chưa có nhiều kinh nghiệm về jquery thì hãy viết code theo dạng đầy đủ nhé.

// Dạng ngắn gọn của $( document ).ready()
$(function() {
console.log( "ready!" );
});
Bạn có thể gọi một hàm bằng tên hàm trong $( document ).ready() thay vì phải viết một hàm vô danh như trên function()

function readyFn( jQuery ) {
// Code to run when the document is ready.
}

$( document ).ready( readyFn );
// or:
$( window ).load( readyFn );
Vẫn sử dụng ví dụ bên trên $( document ).ready() và $( window ).load(). Ví dụ dưới đây sẽ tải một web bên trong <iframe> và hãy kiểm tra cả 2 sự kiện xem sự khác nhau nhé bạn sẽ hiểu rõ về document và ready:

<html>
<head>
<script src="code. jquery.com/jquery-1.9.1.min.js"></script>
<script>
$( document ).ready(function() {
console.log( "document loaded" );
});

$( window ).load(function() {
console.log( "window loaded" );
});
</script>
</head>
<body>
<iframe src="techcrunch.com"></iframe>
</body>
</html>
Nguồn: vnfit.com/hoc-jquery-tu-co-ban-den-nang-cao-phan-2-document-ready/

Đăng Nhập hoặc Đăng Ký

Học jquery từ cơ bản đến nâng cao phần 2 hiểu sâu hơn về $( document ).ready()

vnfit.com Banned

Xem thêm các chủ đề cùng chuyên mục

Ủng hộ diễn đàn

Dự án con

Box tiêu biểu

Giải trí

Đăng Nhập hoặc Đăng Ký

Học jquery từ cơ bản đến nâng cao phần 2 hiểu sâu hơn về $( document ).ready()

vnfit.com Banned

Xem thêm các chủ đề cùng chuyên mục

Ủng hộ diễn đàn

Tìm kiếm hữu ích