Que fait $ (function () {}); faire?

208

Parfois, je crée une fonction et l'appelle plus tard.

Exemple:

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

D'une manière ou d'une autre, certaines fonctions ne peuvent pas être appelées. Je dois appeler ces fonctions à l'intérieur:

$(function() { });

Que signifient $(function() {});et (function() { });signifient, et quelle est la différence / le but de ces éléments?

jwchang
la source

Réponses:

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

est simplement jQuery raccourci pour

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

Ce qu'il est conçu pour faire (entre autres), c'est de s'assurer que votre fonction est appelée une fois que tous les éléments DOM de la page sont prêts à être utilisés.

Cependant, je ne pense pas que ce soit le problème que vous rencontrez - pouvez-vous clarifier ce que vous entendez par «D'une certaine manière, certaines fonctions ne peuvent pas être appelées et je dois appeler ces fonctions à l'intérieur»? Peut-être publier du code pour montrer ce qui ne fonctionne pas comme prévu?

Edit: En relisant votre question, il se peut que votre fonction soit en cours d'exécution avant que la page ne soit terminée et ne s'exécute donc pas correctement; le mettre dans $ (fonction) résoudrait bien cela!

Russ Clarke
la source
2
et si $ (function () {}); est déjà dans $ (document) .ready ()?
jwchang
la fonction ne fonctionne pas sans $ (function () bien qu'elle soit déjà dans $ (document) ready ().
jwchang
Bonne question! Je crois que cela devrait fonctionner, car jQuery sait que vous êtes au bon endroit, mais c'est certainement superflu; si vous êtes à l'intérieur de .ready (), vous pouvez simplement appeler votre fonction normalement. Si cela ne fonctionne pas, postez un échantillon, ou mieux encore - essayez de faire un violon sous jsfiddle.net.
Russ Clarke
4
@JeongWooChang Faites-le comme ça (function () { ... })();. Vous devez ajouter ()pour appeler votre fonction.
Šime Vidas
3
"Les développeurs expérimentés utilisent parfois le raccourci $()pour $( document ).ready(). Si vous écrivez du code que les personnes qui ne connaissent pas jQuery peuvent voir, il est préférable d'utiliser le formulaire long." - learn.jquery.com
thdoan
15

Voici un appel de fonction jQuery:

$(...);

Qui est la "fonction jQuery". $est une fonction, et $(...)vous appelez cette fonction.

Le premier paramètre que vous avez fourni est le suivant:

function() {}

Le paramètre est une fonction que vous avez spécifiée, et la $fonction appellera la méthode fournie lorsque le DOM termine le chargement.

cwharris
la source
5

Je pense que vous pouvez confondre Javascript avec les méthodes jQuery. La vanille ou le Javascript simple est quelque chose comme:

function example() {
}

Une fonction de cette nature peut être appelée à tout moment, n'importe où.

jQuery (une bibliothèque construite sur Javascript) a intégré des fonctions qui nécessitaient généralement le rendu complet du DOM avant d'être appelé. La syntaxe de cette opération est la suivante:

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

Ainsi, une fonction jQuery, qui est préfixée par le $ou le mot en jQuerygénéral, est appelée à partir de cette méthode.

$(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');   
});

Le pseudo-code de ce bloc est:

Lorsque le modèle d'objet de document $(document)est prêt .ready(), appelez la fonction suivante function() { }. Dans cette fonction, vérifiez tous <li>les éléments de la page $('li')et utilisez la méthode jQuery .CSS () pour définir la propriété CSS "color" sur la valeur "red".css('color', 'red');

Terry
la source
2

Il s'agit d'un raccourci pour $(document).ready(), qui est exécuté lorsque le navigateur a fini de charger la page (c'est-à-dire ici, "lorsque le DOM est disponible"). Voir http://www.learningjquery.com/2006/09/introducing-document-ready . Si vous essayez d'appeler example()avant que le navigateur n'ait fini de charger la page, cela peut ne pas fonctionner.

imm
la source
1
"chargement terminé de la page" est inexact et trompeur.
Yahel