# 05: Giới thiệu về DOM sẵn sàng - Thủ thuật CSS

Anonim

Chúng ta đã nói một chút về bộ chọn. Một công cụ chọn jQuery như $ (“h1”) sẽ chọn tất cả

Sẽ là thế $("h1").css("color", "red");

Nhưng đôi khi các tập lệnh được tải trong đầu. Có đủ loại lời bào chữa cho nó, chủ yếu là xấu, nhưng chúng ta đừng quá phán xét-y mà không có chi tiết =).

Chúng tôi vẫn có thể khắc phục sự cố không tìm thấy phần tử một cách khá khả quan ngay cả khi chúng tôi buộc phải tải các tập lệnh trong đầu. Chúng tôi làm điều đó thông qua chức năng "DOM Ready" của jQuery. Theo nghĩa đen, khi tài liệu được hoàn thành và sẵn sàng được thao tác. Nó trông như thế này:

$(document).ready(function() ( ));

Có một phiên bản ngắn hơn thực hiện điều tương tự:

$(function() ( ));

Đặt mã của bạn bên trong một chức năng như vậy đảm bảo nó sẽ không chạy cho đến khi tài liệu sẵn sàng. Nó thực sự là một đoạn mã khá thông minh để thực hiện điều đó, tất nhiên là rất khó để thực hiện trên nhiều trình duyệt. Điều thú vị về nó là nó khá nhanh. Nó không giống như việc đợi toàn bộ cửa sổ tải, điều này rất chậm, vì nó đợi tất cả tài nguyên được tải xong trước khi kích hoạt. DOM sẵn sàng diễn ra sớm hơn nhiều. Nếu bạn cần phải đợi tài nguyên được thực hiện (ví dụ: bạn cần đo một hình ảnh), bạn có thể đợi như sau:

$(window).load(function() ( ));

Khắc phục sự cố JavaScript-in-the-head trước đó của chúng tôi với DOM sẵn sàng, mã sẽ giống như sau:

 Learning jQuery $(function() ( $("h1").css("color", "red"); ));