¿Qué significa jQuery (función ($) { … })?

4 minutos de lectura

Avatar de usuario de Leem
Leem

Lo sé en jQuery, $(callback) es lo mismo que jQuery(callback) que tiene el mismo efecto que $(document).ready().

Qué tal si

jQuery(function($) {

 });

¿Alguien puede explicarme qué significa este tipo de función?

¿Qué hace?

cual es la diferencia entre este y $(callback)??

cual es la diferencia entre este y $(function())??

Avatar de usuario de George Karpenkov
Jorge Karpenkov

jQuery(function($) {

});

es la versión más segura de las tres. Hace $ la variable local y así evita con gracia los conflictos con cualquier otra variable que posiblemente use $ símbolo.

Creo que también se agregó recientemente, no recuerdo haberlo visto antes.

Todas estas funciones hacen lo mismo: ejecutar algún código cuando DOM esté listo. $(document).ready(function(){}) es el original y coincide con la API de javascript subyacente.

“$” y “jQuery”, que aceptan funciones como argumentos, se crearon como accesos directos para evitar repetir una construcción tan común. Aceptar una función que acepta $ como su primer argumento es un azúcar de sintaxis adicional: ahora obtiene la comodidad de los cierres sin la necesidad de hacerlo usted mismo.

  • Me gusta tu respuesta (si es correcta), explicación bastante clara 🙂

    – Leem

    23 de junio de 2011 a las 13:29

  • puedo hacer lo siguiente? ¿Mismo? $(function($){...});

    – johny por qué

    14/06/2018 a las 20:28


  • Asi que $(document).ready(function(){}) es equivalente a jQuery(function($) {}); ??

    – Negro

    16 de mayo de 2019 a las 8:41

Avatar de usuario de ThiefMaster
ladrónmaestro

  • $(function()) es un error de sintaxis.
  • $() crea un objeto jQuery vacío.
  • $(document).ready(function() { ... }) ejecuta la función dada cuando el DOM está listo
  • $(function() { ... }) es un atajo para lo mismo
  • jQuery(function($) { ... }) lo hace también, pero también hace $ disponible dentro de la función sin importar lo que esté configurado en el exterior.

Cuando llama a la función principal de jQuery factory (ya sea como jQuery(<something>) o el atajo común $(<something>)) decide qué hacer en función del tipo de <something>.

Si pasas una cadena como <something> asume que es una especificación de selector y devolverá una lista jQuery de elementos que coincidan con ese selector.

Si pasa un objeto jQuery (que representa una lista de elementos, es decir, un objeto devuelto de una llamada anterior a jQuery), simplemente devolverá ese objeto (esencialmente, esto no es una operación).

Si le pasa un elemento DOM, devolverá una lista jQuery que contiene solo ese elemento (para que pueda aplicar métodos jQuery a ese elemento). Esto es lo que está pasando con $(document).ready() – le pasa a la función de fábrica el “documento” del elemento DOM, devuelve un objeto jQuery que representa ese elemento, y usa el método ready() de ese objeto para agregar una función de manejo de eventos al evento ready de todos los elementos DOM en la lista ( sólo el único, documenten este caso).

Si le pasa una función, esto es solo una forma abreviada de “ejecutar esto cuando todo esté listo para que lo haga”, por lo que $(function() { ... }); es equivalente a $(document).ready(function() { ... });

Así que me corrigieron en esto y si lees el primer comentario, da algo de contexto.

jQuery(function() {
    // Document Ready
});


(function($) {
    // Now with more closure!
})(jQuery);

No estoy 100% seguro, pero creo que esto solo pasa el objeto jQuery al cierre. Voy a investigar un poco en Google para ver si tengo razón o no y actualizaré en consecuencia.

EDITAR:

Tengo bastante razón, pero aquí está directamente de su sitio web:

http://docs.jquery.com/Plugins/Autoría

“¿Dónde está mi increíble signo de dólar que conozco y amo? Todavía está allí, sin embargo, para asegurarse de que su complemento no colisione con otras bibliotecas que podrían usar el signo de dólar, es una buena práctica pasar jQuery a una función autoejecutable ( cierre) que lo asigna al signo de dólar para que no pueda ser sobrescrito por otra biblioteca en el ámbito de su ejecución”.

Avatar de usuario de Mutt
Chucho

Antes que nada, jQuery() no es lo mismo que $(document).ready()

$() es un atajo para jQuery()

y…

$(function(){ ...}); es un atajo para $(document).ready(function(){ ... });

Por lo tanto:

jQuery(function(){ ... }) 

Funcionará igual que

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

Pero…

jQuery('#foo').css("background-color", "#f00");

no funcionaria igual que

$(document).ready('#foo').css("background-color", "#f00");

Asi que…

jQuery() es no lo mismo que $(document).ready()

  • um… estoy bastante seguro de que lo es si pasas una función dentro.

    – Jorge Karpenkov

    23 de junio de 2011 a las 13:21

  • sí, si se pasa una función, usando el atajo de función anónima, los dos realizarán lo mismo. pero diciendo eso jQuery() es lo mismo que $(document).ready() es una declaración falsa.

    – Chucho

    23 de junio de 2011 a las 13:49


  • um… estoy bastante seguro de que lo es si pasas una función dentro.

    – Jorge Karpenkov

    23 de junio de 2011 a las 13:21

  • sí, si se pasa una función, usando el atajo de función anónima, los dos realizarán lo mismo. pero diciendo eso jQuery() es lo mismo que $(document).ready() es una declaración falsa.

    – Chucho

    23 de junio de 2011 a las 13:49


¿Ha sido útil esta solución?