¿Puede tener múltiples $ (documento) .ready (función () {...}); secciones?

Si tengo muchas funciones en el inicio, ¿todas tienen que estar bajo una sola:

$(document).ready(function() {

o puedo tener varias declaraciones de este tipo?

Puede tener varios, pero no siempre es lo mejor. Trate de no usarlos en exceso, ya que afectará seriamente la legibilidad. Aparte de eso, es perfectamente legal. Ver lo siguiente:

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

Probar esto:

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

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

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

Encontrará que es equivalente a esto, tenga en cuenta el orden de ejecución:

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

También vale la pena señalar que una función definida dentro de un $(document).readybloque no se puede llamar desde otro $(document).readybloque, acabo de ejecutar esta prueba:

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

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

la salida fue:

hello1
something
hello2

Puedes usar múltiples. Pero también puede usar múltiples funciones dentro de un documento.

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

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

Sí, puedes tener fácilmente múltiples bloques. Solo tenga cuidado con las dependencias entre ellos, ya que el orden de evaluación podría no ser el esperado.

Sí , es posible tener múltiples llamadas $ (document) .ready (). Sin embargo, no creo que pueda saber de qué manera se ejecutarán. (fuente)

Sí, es posible, pero puede usar mejor un div #mydiv y usar ambos

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

//and

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

Sí, está perfectamente bien. Pero evite hacerlo sin una razón. Por ejemplo, lo usé para declarar las reglas globales del sitio por separado que las páginas individuales cuando mis archivos javascript se generaron dinámicamente, pero si continúas haciéndolo una y otra vez, será difícil de leer.

Además, no puede acceder a algunos métodos desde otra jQuery(function(){});llamada, así que esa es otra razón por la que no desea hacer eso.

Sin window.onloadembargo, con el viejo reemplazará el viejo cada vez que especifique una función.

Sí tu puedes.

Múltiples secciones preparadas para documentos son particularmente útiles si tiene otros módulos en la misma página que lo usan. Con la antigua window.onload=funcdeclaración, cada vez que especificaba una función a llamar, reemplazaba la antigua.

Ahora todas las funciones especificadas están en cola / apiladas (¿alguien puede confirmarlo?) Independientemente de la sección de documento listo en que se especifiquen.

Creo que la mejor manera de hacerlo es cambiar a funciones con nombre ( consulte este desbordamiento para obtener más información sobre ese tema) . De esa manera puedes llamarlos desde un solo evento.

Al igual que:

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

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


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

De esa manera, puede cargarlos en una sola función lista.

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

});

Esto generará lo siguiente en su console.log:

first
second
third

De esta manera puede reutilizar las funciones para otros eventos.

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

Verifique este violín para la versión de trabajo

Es legal, pero a veces causa un comportamiento no deseado. Como ejemplo, utilicé la biblioteca MagicSuggest y agregué dos entradas MagicSuggest en una página de mi proyecto y utilicé funciones separadas para documentos listos para cada inicialización de entradas. La primera inicialización de entrada funcionó, pero no la segunda y tampoco dio ningún error, la segunda entrada no apareció. Por lo tanto, siempre recomiendo usar una función de documento listo.

Incluso puede anidar funciones listas para documentos dentro de los archivos html incluidos. Aquí hay un ejemplo usando jquery:

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

Archivo: test_embed.html

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

Salida de consola:

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

El navegador muestra:

test_embed.html

También puedes hacerlo de la siguiente manera:

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

las respuestas anteriores mostraban el uso de múltiples funciones con nombre dentro de un solo bloque .ready, o una sola función sin nombre en el bloque .ready, con otra función con nombre fuera del bloque .ready. Encontré esta pregunta mientras investigaba si había una manera de tener múltiples funciones sin nombre dentro del bloque .ready: no pude obtener la sintaxis correcta. Finalmente lo descubrí y esperé que al publicar mi código de prueba ayudaría a otros a buscar la respuesta a la misma pregunta que tenía