Puoi avere più $ (document) .ready (function () {…}); sezioni?

Se all'avvio ho molte funzioni, devono essere tutte sotto un unico:

$(document).ready(function() {

o posso avere più di tali dichiarazioni?

Puoi averne di più, ma non è sempre la cosa più bella da fare. Cerca di non usarli eccessivamente, poiché ciò pregiudicherebbe seriamente la leggibilità. A parte questo, è perfettamente legale. Vedi sotto:

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

Prova questo:

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

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

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

Scoprirai che è equivalente a questo, nota l'ordine di esecuzione:

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

Vale anche la pena notare che una funzione definita all'interno di un $(document).readyblocco non può essere richiamata da un altro $(document).readyblocco, ho appena eseguito questo test:

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

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

l'output era:

hello1
something
hello2

Puoi usarne più. Ma puoi anche usare più funzioni in un unico documento. Già:

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

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

Sì, puoi facilmente avere più blocchi. Fai solo attenzione alle dipendenze tra di loro poiché l'ordine di valutazione potrebbe non essere quello che ti aspetti.

Sì , è possibile avere più chiamate $ (document) .ready (). Tuttavia, non penso che tu possa sapere in che modo verranno giustiziati. (fonte)

Sì, è possibile ma puoi usare meglio un div #mydiv e usare entrambi

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

//and

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

Sì, è perfettamente ok, ma evita di farlo senza un motivo. Ad esempio, l'ho usato per dichiarare le regole globali del sito separatamente rispetto alle pagine individuali quando i miei file javascript sono stati generati dinamicamente, ma se continui a farlo più e più volte, sarà difficile da leggere.

Inoltre, non puoi accedere ad alcuni metodi da un'altra jQuery(function(){});chiamata, quindi questo è un altro motivo per cui non vuoi farlo.

Con il vecchio window.onloadperò sostituirai il vecchio ogni volta che hai specificato una funzione.

Si, puoi.

Sezioni multiple pronte per documenti sono particolarmente utili se hai altri moduli che si estendono dalla stessa pagina che lo usano. Con la vecchia window.onload=funcdichiarazione, ogni volta che si specificava una funzione da chiamare, sostituiva la vecchia.

Ora tutte le funzioni specificate sono accodate / impilate (qualcuno può confermare?) Indipendentemente dalla sezione pronta per il documento in cui sono specificate.

Penso che il modo migliore per andare sia quello di passare alle funzioni nominate (controlla questo overflow per ulteriori informazioni sull'argomento) . In questo modo puoi chiamarli da un singolo evento.

Così:

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

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


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

In questo modo è possibile caricarli in un'unica funzione pronta.

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

});

Questo produrrà quanto segue su console.log:

first
second
third

In questo modo è possibile riutilizzare le funzioni per altri eventi.

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

Controlla questo violino per la versione funzionante

È legale, ma a volte causa comportamenti indesiderati. Come esempio ho usato la libreria MagicSuggest e ho aggiunto due input MagicSuggest in una pagina del mio progetto e ho usato le funzioni di documento separato separate per ogni inizializzazione degli input. La prima inizializzazione dell'input ha funzionato, ma non la seconda e non ha dato alcun errore, il secondo input non è stato visualizzato. Pertanto, consiglio sempre di utilizzare una funzione Document Ready.

Puoi persino annidare le funzioni pronte per i documenti all'interno dei file html inclusi. Ecco un esempio usando jquery:

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

File: test_embed.html

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

Uscita console:

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

Il browser mostra:

test_embed.html

Puoi anche farlo nel modo seguente:

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

le risposte precedenti mostravano l'uso di più funzioni nominate all'interno di un singolo blocco .ready o di una singola funzione senza nome nel blocco .ready, con un'altra funzione denominata al di fuori del blocco .ready. Ho trovato questa domanda mentre cercavo se ci fosse un modo per avere più funzioni senza nome all'interno del blocco .ready - Non sono riuscito a ottenere la sintassi corretta. Alla fine l'ho capito e speravo che pubblicando il mio codice di prova avrei aiutato gli altri a cercare la risposta alla stessa domanda che avevo