Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

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

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi vnfit.com, 26/2/15.

Lượt xem: 3,160

  1. vnfit.com Banned

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

    Gz6pivq.png

    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/

    ...
    Phạm Hữu Dư thích bài viết này
Từ khóa:

Ủng hộ diễn đàn