Чи можете ви мати кілька $ (документ) .ready (функція () {…}); розділи?

Якщо у мене є багато функцій при запуску, чи всі вони повинні бути одним єдиним:

$(document).ready(function() {

чи можу я мати кілька таких заяв?

Ви можете мати кілька, але це не завжди найновіше. Намагайтеся не зловживати ними, оскільки це серйозно позначиться на читанні. Крім цього, це абсолютно законно. Дивіться нижче:

http://www.learningjquery.com/2006/09/multiple-document-ready

Спробуйте це:

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

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

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

Ви побачите, що це рівнозначно цьому, зверніть увагу на порядок виконання:

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

Також варто зазначити, що функцію, визначену в одному $(document).readyблоці, не можна викликати з іншого $(document).readyблоку, я просто запустив цей тест:

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

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

Вихід був:

hello1
something
hello2

Можна використовувати кілька. Але ви також можете використовувати кілька функцій і в одному документі.

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

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

Так, ви можете легко мати кілька блоків. Будьте обережні з залежностями між ними, оскільки порядок оцінювання може бути не таким, як ви очікуєте.

Так , можна здійснити кілька викликів $ (document) .ready (). Однак я не думаю, що ви можете знати, яким чином вони будуть страчені. (джерело)

Так, це можливо, але ви можете краще використовувати div #mydiv і використовувати обидва

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

//and

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

Так, це цілком нормально, але уникайте робити це без причин. Наприклад, я використовував це для оголошення глобальних правил сайту окремо, ніж індивідуальні сторінки, коли мої файли javascript створювалися динамічно, але якщо ви просто продовжуєте це робити знову і знову, це буде важко читати.

Крім того, ви не можете отримати доступ до деяких методів з іншого jQuery(function(){});дзвінка, тому це ще одна причина, що ви не хочете цього робити.

На стару, window.onloadхоча ви будете замінювати стару щоразу, коли ви вказали функцію.

Так, ти можеш.

Розділи, готові до декількох документів, особливо корисні, якщо у вас є інші модулі, які перебувають на тій самій сторінці, на якій використовується. За допомогою старого window.onload=funcоголошення, кожного разу, коли ви вказували функцію, яку потрібно викликати, вона замінювала стару.

Тепер усі вказані функції в черзі / укладаються (чи може хтось підтвердити?) Незалежно від того, в якому розділі готового документа вони вказані.

Я думаю, що кращим способом є перехід до названих функцій (Перевірте цей переповнення на детальніше з цього приводу) . Таким чином ви можете зателефонувати їм з однієї події.

Так:

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

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


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

Таким чином ви можете завантажити їх у єдину готову функцію.

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

});

Це виведе наступне у ваш console.log:

first
second
third

Таким чином ви можете повторно використовувати функції для інших подій.

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

Перевірте цю загадку щодо робочої версії

Це законно, але іноді викликає небажану поведінку. Як приклад, я використав бібліотеку MagicSuggest і додав два входи MagicSuggest на сторінку свого проекту та використав окремі функції, готові до документа, для кожної ініціалізації входів. Перша ініціалізація введення спрацювала, але не друга, а також не давала помилок, Другий вхід не з’явився. Отже, я завжди рекомендую використовувати одну функцію готового документа.

Ви навіть можете вкладати функції, готові до документа, всередині файлів, що містять HTML. Ось приклад використання jquery:

Файл: 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>

Файл: test_embed.html

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

Вихід консолі:

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

Браузер показує:

test_embed.html

Ви також можете це зробити наступним чином:

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

попередні відповіді показали використання декількох іменованих функцій всередині одного блоку, який вже є, або однієї безіменної функції в блоці .ready, з іншою функцією, що називається поза блоком .ready. Я знайшов це питання під час дослідження, чи існував спосіб мати декілька неназваних функцій всередині блоку .ready - я не зміг отримати синтаксис правильним. Нарешті я зрозумів це і сподівався, що, опублікувавши свій тестовий код, я допоможу іншим шукати відповіді на те саме питання, що і у мене