¿Qué significa $ (function () {}); ¿hacer?


208

A veces hago una función y llamo a la función más tarde.

Ejemplo:

function example { alert('example'); }
example(); // <-- Then call it later

De alguna manera, algunas funciones no pueden ser llamadas. Tengo que llamar a esas funciones dentro:

$(function() { });

Qué hacer $(function() {});y (function() { });decir, y lo que es la diferencia / propósito de estos?

Respuestas:


308
$(function() { ... });

es solo jQuery abreviado para

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

Lo que está diseñado para hacer (entre otras cosas) es garantizar que se llame a su función una vez que todos los elementos DOM de la página estén listos para usarse.

Sin embargo, no creo que ese sea el problema que está teniendo, ¿puede aclarar lo que quiere decir con 'De alguna manera, algunas funciones no se pueden invocar y tengo que llamarlas dentro'? ¿Quizás publicar algún código para mostrar lo que no funciona como se esperaba?

Editar: releyendo su pregunta, podría ser que su función se esté ejecutando antes de que la página haya terminado de cargarse y, por lo tanto, no se ejecutará correctamente; ¡ponerlo en $ (función) realmente lo arreglaría!


2
¿Qué pasa si $ (function () {}); ya está en $ (documento) .ready ()?
jwchang

la función no funciona sin $ (function () aunque ya está en $ (document) ready ().
jwchang

¡Buena pregunta! Creo que debería funcionar, ya que jQuery sabe que estás en el lugar correcto, pero ciertamente es extraño; si estás dentro de .ready () puedes llamar a tu función de manera normal. Si no funciona, publique una muestra, o incluso mejor, intente hacer un violín como jsfiddle.net.
Russ Clarke

44
@JeongWooChang Hazlo así (function () { ... })();. Tienes que agregar ()para invocar tu función.
Šime Vidas

3
"Los desarrolladores experimentados a veces usan la abreviatura $()para $( document ).ready(). Si está escribiendo código que las personas que no tienen experiencia con jQuery pueden ver, es mejor usar la forma larga". - learn.jquery.com
thdoan

15

La siguiente es una llamada a la función jQuery:

$(...);

Cuál es la "función jQuery". $es una función, y $(...)estás llamando a esa función.

El primer parámetro que ha proporcionado es el siguiente:

function() {}

El parámetro es una función que especificó, y la $función llamará al método proporcionado cuando el DOM termine de cargarse.



5

Creo que puede estar confundiendo Javascript con los métodos jQuery. Javascript simple o vainilla es algo así como:

function example() {
}

Una función de esa naturaleza se puede llamar en cualquier momento y en cualquier lugar.

jQuery (una biblioteca construida en Javascript) ha incorporado funciones que generalmente requerían que el DOM se representara completamente antes de ser llamado. La sintaxis para cuando esto se completa es:

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

Entonces, una función jQuery, que tiene como prefijo $la palabra o la palabra jQuerygeneralmente se llama desde ese método.

$(document).ready(function() {        
    // Assign all list items on the page to be the  color red.  
    //      This does not work until AFTER the entire DOM is "ready", hence the $(document).ready()
    $('li').css('color', 'red');   
});

El pseudocódigo para ese bloque es:

Cuando el modelo de objetos del documento $(document)esté listo .ready(), llame a la siguiente función function() { }. En esa función, verifique todos los <li>'s en la página $('li')y utilice el método jQuery .CSS () para establecer la propiedad CSS "color" en el valor "rojo".css('color', 'red');


2

Este es un acceso directo para $(document).ready(), que se ejecuta cuando el navegador ha terminado de cargar la página (es decir, "cuando el DOM está disponible"). Ver http://www.learningjquery.com/2006/09/introducing-document-ready . Si está intentando llamar example()antes de que el navegador haya terminado de cargar la página, es posible que no funcione.


1
"terminado de cargar la página" es inexacto y engañoso.
Yahel
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.