O que $ (function () {}); Faz?

208

Às vezes, faço uma função e a chamo mais tarde.

Exemplo:

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

De alguma forma, algumas funções não podem ser chamadas. Eu tenho que chamar essas funções dentro:

$(function() { });

O que significa $(function() {});e (function() { });significa, e qual é a diferença / objetivo disso?

jwchang
fonte

Respostas:

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

é apenas jQuery abreviação para

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

O que ele foi projetado para fazer (entre outras coisas) é garantir que sua função seja chamada assim que todos os elementos DOM da página estiverem prontos para serem usados.

No entanto, eu não acho que esse seja o problema que você está tendo - você pode esclarecer o que você quer dizer com 'De alguma forma, algumas funções não podem ser chamadas e eu tenho que chamar essas funções por dentro'? Talvez poste algum código para mostrar o que não está funcionando como esperado?

Editar: relendo sua pergunta, pode ser que sua função esteja sendo executada antes que a página seja carregada e, portanto, não será executada corretamente; colocá-lo em $ (function) realmente consertaria isso!

Russ Clarke
fonte
2
e se $ (function () {}); já está em $ (document) .ready ()?
jwchang
a função não funciona sem $ (function (), embora ele já está em $ (document) ready ().
jwchang
Boa pergunta! Eu acredito que deve funcionar, pois o jQuery sabe que você está no lugar certo, mas certamente é estranho; se você estiver dentro de .ready (), basta chamar sua função normalmente. Se não estiver funcionando, poste uma amostra, ou melhor ainda - tente criar um violino como jsfiddle.net.
Russ Clarke
4
@JeongWooChang Faça assim (function () { ... })();. Você precisa adicionar ()para chamar sua função.
Šime Vidas
3
"Os desenvolvedores experientes, por vezes, usar o atalho $()para $( document ).ready(). Se você estiver escrevendo código que pessoas que não têm experiência com jQuery pode ver, é melhor usar a forma longa." - learn.jquery.com
thdoan
15

A seguir, uma chamada de função jQuery:

$(...);

Qual é a "função jQuery". $é uma função e $(...)você está chamando essa função.

O primeiro parâmetro que você forneceu é o seguinte:

function() {}

O parâmetro é uma função que você especificou e a $função chamará o método fornecido quando o DOM concluir o carregamento.

cwharris
fonte
5

Eu acho que você pode estar confundindo Javascript com métodos jQuery. Baunilha ou Javascript simples é algo como:

function example() {
}

Uma função dessa natureza pode ser chamada a qualquer momento, em qualquer lugar.

O jQuery (uma biblioteca criada em Javascript) possui funções internas que geralmente exigem que o DOM seja totalmente renderizado antes de ser chamado. A sintaxe para quando isso for concluído é:

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

Portanto, uma função jQuery, que é prefixada com $a palavra ou jQuerygeralmente é chamada de dentro desse 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');   
});

O pseudocódigo para esse bloco é:

Quando o modelo de objeto do documento $(document)estiver pronto .ready(), chame a seguinte função function() { }. Nessa função, verifique todos os itens <li>na página $('li')e use o método jQuery .CSS () para definir a propriedade CSS "color" com o valor "red".css('color', 'red');

Terry
fonte
2

Este é um atalho para $(document).ready(), que é executado quando o navegador termina de carregar a página (ou seja, aqui, "quando o DOM está disponível"). Consulte http://www.learningjquery.com/2006/09/introducing-document-ready . Se você estiver tentando ligar example()antes que o navegador termine de carregar a página, pode não funcionar.

im
fonte
1
"terminou de carregar a página" é impreciso e enganoso.
Yahel