Bạn có thể có nhiều $ (tài liệu). Yet (function () {Sự}); phần?

Nếu tôi có rất nhiều chức năng khi khởi động, tất cả chúng phải nằm dưới một lần duy nhất:

$(document).ready(function() {

hoặc tôi có thể có nhiều tuyên bố như vậy?

Bạn có thể có nhiều cái, nhưng không phải lúc nào cũng là thứ gọn gàng nhất để làm. Cố gắng đừng lạm dụng chúng, vì nó sẽ ảnh hưởng nghiêm trọng đến khả năng đọc. Ngoài ra, nó hoàn toàn hợp pháp. Xem dưới đây:

http://www.learningjquery.com/2006/09/mult Môn-document-yet

Thử thứ này đi:

$(document).ready(function() {
    alert('Hello Tom!');
});

$(document).ready(function() {
    alert('Hello Jeff!');
});

$(document).ready(function() {
    alert('Hello Dexter!');
});

Bạn sẽ thấy rằng nó tương đương với điều này, lưu ý thứ tự thực hiện:

$(document).ready(function() {
    alert('Hello Tom!');
    alert('Hello Jeff!');
    alert('Hello Dexter!');
});

Cũng đáng lưu ý rằng một hàm được xác định trong một $(document).readykhối không thể được gọi từ một $(document).readykhối khác , tôi chỉ chạy thử nghiệm này:

$(document).ready(function() {
    alert('hello1');
    function saySomething() {
        alert('something');
    }
    saySomething();

});
$(document).ready(function() {
    alert('hello2');
    saySomething();
}); 

đầu ra là:

hello1
something
hello2

Bạn có thể sử dụng nhiều. Nhưng bạn cũng có thể sử dụng nhiều chức năng trong một tài liệu. Đã sẵn sàng:

$(document).ready(function() {
    // Jquery
    $('.hide').hide();
    $('.test').each(function() {
       $(this).fadeIn();
    });

    // Reqular JS
    function test(word) {
       alert(word);
    }
    test('hello!');
});

Có bạn có thể dễ dàng có nhiều khối. Chỉ cần cẩn thận với sự phụ thuộc giữa chúng vì thứ tự đánh giá có thể không như bạn mong đợi.

Có , có thể có nhiều cuộc gọi $ (tài liệu). Đã (). Tuy nhiên, tôi không nghĩ bạn có thể biết họ sẽ bị xử tử theo cách nào. (nguồn)

Có, nhưng bạn có thể sử dụng div #mydiv tốt hơn và sử dụng cả hai

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

//and

$("#mydiv").ready(function(){});

Vâng, nó hoàn toàn ổn. Nhưng tránh làm điều đó mà không có lý do. Ví dụ: tôi đã sử dụng nó để khai báo các quy tắc trang web toàn cầu một cách riêng biệt so với các trang không thường xuyên khi các tệp javascript của tôi được tạo động nhưng nếu bạn cứ làm đi làm lại nó sẽ khiến bạn khó đọc.

Ngoài ra, bạn không thể truy cập một số phương thức từ một jQuery(function(){});cuộc gọi khác vì vậy đó là một lý do khác mà bạn không muốn làm điều đó.

Với cái cũ window.onloadmặc dù bạn sẽ thay thế cái cũ mỗi khi bạn chỉ định một chức năng.

Có bạn có thể.

Nhiều phần sẵn sàng cho tài liệu đặc biệt hữu ích nếu bạn có các mô-đun khác chạy trên cùng một trang sử dụng nó. Với window.onload=funckhai báo cũ , mỗi khi bạn chỉ định một hàm được gọi, nó sẽ thay thế hàm cũ.

Bây giờ tất cả các chức năng được chỉ định được xếp hàng / xếp chồng (ai đó có thể xác nhận không?) Bất kể phần tài liệu nào đã được chỉ định.

Tôi nghĩ rằng cách tốt hơn để đi là đặt chuyển sang các chức năng được đặt tên (Kiểm tra tràn này để biết thêm về chủ đề đó) . Bằng cách đó bạn có thể gọi họ từ một sự kiện duy nhất.

Thích như vậy:

function firstFunction() {
    console.log("first");
}

function secondFunction() {
    console.log("second");
}


function thirdFunction() {
    console.log("third");
}

Bằng cách đó bạn có thể tải chúng trong một chức năng sẵn sàng duy nhất.

jQuery(document).on('ready', function(){
   firstFunction();
   secondFunction();
   thirdFunction();

});

Điều này sẽ xuất ra sau đây cho console.log của bạn:

first
second
third

Bằng cách này bạn có thể sử dụng lại các chức năng cho các sự kiện khác.

jQuery(window).on('resize',function(){
    secondFunction();
});

Kiểm tra fiddle này cho phiên bản làm việc

Đó là hợp pháp, nhưng đôi khi nó gây ra hành vi không mong muốn. Như một ví dụ, tôi đã sử dụng thư viện MagicSuggest và thêm hai đầu vào MagicSuggest trong một trang của dự án của tôi và sử dụng các hàm sẵn sàng tài liệu riêng biệt cho mỗi lần khởi tạo đầu vào. Việc khởi tạo Đầu vào đầu tiên đã hoạt động, nhưng không phải là lần thứ hai và cũng không đưa ra bất kỳ lỗi nào, Đầu vào thứ hai không hiển thị. Vì vậy, tôi luôn khuyên bạn nên sử dụng một Chức năng Sẵn sàng Tài liệu.

Bạn thậm chí có thể lồng tài liệu sẵn sàng các chức năng bên trong các tệp html được bao gồm. Đây là một ví dụ sử dụng jquery:

Tệp: test_main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="jquery-1.10.2.min.js"></script>
</head>

<body>
    <div id="main-container">
        <h1>test_main.html</h1>
    </div>

<script>
    $(document).ready( function()
    {
        console.log( 'test_main.html READY' );
        $("#main-container").load("test_embed.html");
    } );
</script>

</body>
</html>

Tệp: test_embed.html

<h1>test_embed.html</h1>
<script>
    $(document).ready( function()
    {
        console.log( 'test_embed.html READY' );
    } );
</script>

Bảng điều khiển đầu ra:

test_main.html READY                       test_main.html:15
test_embed.html READY                      (program):4

Trình duyệt hiển thị:

test_embed.html

Bạn cũng có thể làm theo cách sau:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
 $(document).ready(function(){
     $("#hide").click(function(){
     $("#test").hide();
     });
     $("#show").click(function(){
     $("#test").show();
     });
 });
</script>
</head>

<body>
<h2>This is a test of jQuery!</h2>
<p id="test">This is a hidden paragraph.</p>
<button id="hide">Click me to hide</button>
<button id="show">Click me to show</button>
</body>

các câu trả lời trước đó cho thấy bằng cách sử dụng nhiều hàm được đặt tên bên trong một khối. yet hoặc một hàm chưa được đặt tên trong khối. yet, với một hàm được đặt tên khác bên ngoài khối. yet. Tôi đã tìm thấy câu hỏi này trong khi nghiên cứu nếu có một cách để có nhiều hàm không tên trong khối. Yet - Tôi không thể hiểu đúng cú pháp. Cuối cùng tôi đã tìm ra nó, và hy vọng rằng bằng cách đăng mã kiểm tra của mình, tôi sẽ giúp những người khác tìm kiếm câu trả lời cho cùng một câu hỏi mà tôi có