Se eu tenho muitas funções na inicialização, todas elas precisam estar em uma única:
$(document).ready(function() {
ou posso ter várias dessas declarações?
Se eu tenho muitas funções na inicialização, todas elas precisam estar em uma única:
$(document).ready(function() {
ou posso ter várias dessas declarações?
Respostas:
Você pode ter vários, mas nem sempre é a melhor coisa a se fazer. Tente não usá-los demais, pois isso afetará seriamente a legibilidade. Fora isso, é perfeitamente legal. Veja abaixo:
http://www.learningjquery.com/2006/09/multiple-document-ready
Tente isto:
$(document).ready(function() {
alert('Hello Tom!');
});
$(document).ready(function() {
alert('Hello Jeff!');
});
$(document).ready(function() {
alert('Hello Dexter!');
});
Você verá que é equivalente a isso, observe a ordem de execução:
$(document).ready(function() {
alert('Hello Tom!');
alert('Hello Jeff!');
alert('Hello Dexter!');
});
Também é importante notar que uma função definida dentro de um $(document).ready
bloco não pode ser chamada de outro $(document).ready
bloco, eu apenas executei este teste:
$(document).ready(function() {
alert('hello1');
function saySomething() {
alert('something');
}
saySomething();
});
$(document).ready(function() {
alert('hello2');
saySomething();
});
saída foi:
hello1
something
hello2
Você pode usar vários. Mas você também pode usar várias funções dentro de um documento.
$(document).ready(function() {
// Jquery
$('.hide').hide();
$('.test').each(function() {
$(this).fadeIn();
});
// Reqular JS
function test(word) {
alert(word);
}
test('hello!');
});
Sim , é possível ter várias chamadas $ (document) .ready (). No entanto, acho que você não sabe de que maneira eles serão executados. (fonte)
Ready handlers bound this way are executed after any bound by the other three methods above.
Sim, é possível, mas você pode usar melhor um div #mydiv e usar os dois
$(document).ready(function(){});
//and
$("#mydiv").ready(function(){});
Sim, está perfeitamente bem. Mas evite fazê-lo sem motivo. Por exemplo, usei-o para declarar regras globais de sites separadamente das páginas individuais quando meus arquivos javascript foram gerados dinamicamente, mas se você continuar fazendo isso repetidamente, será difícil ler.
Além disso, você não pode acessar alguns métodos de outra
jQuery(function(){});
chamada, então esse é outro motivo pelo qual você não deseja fazer isso.
Com o antigo, window.onload
você substituirá o antigo sempre que especificar uma função.
Sim você pode.
Várias seções prontas para documentos são particularmente úteis se você tiver outros módulos acessando a mesma página que o utiliza. Com a window.onload=func
declaração antiga , toda vez que você especificava uma função a ser chamada, ela substituía a antiga.
Agora, todas as funções especificadas estão na fila / empilhadas (alguém pode confirmar?), Independentemente da seção de preparação do documento em que estão especificadas.
Eu acho que a melhor maneira de ir é mudar para funções nomeadas (verifique esse estouro para saber mais sobre esse assunto) . Dessa forma, você pode chamá-los de um único evento.
Igual a:
function firstFunction() {
console.log("first");
}
function secondFunction() {
console.log("second");
}
function thirdFunction() {
console.log("third");
}
Dessa forma, você pode carregá-los em uma única função pronta.
jQuery(document).on('ready', function(){
firstFunction();
secondFunction();
thirdFunction();
});
Isso produzirá o seguinte para o seu console.log:
first
second
third
Dessa forma, você pode reutilizar as funções para outros eventos.
jQuery(window).on('resize',function(){
secondFunction();
});
É legal, mas às vezes causa comportamento indesejado. Como exemplo, usei a biblioteca MagicSuggest e adicionei duas entradas MagicSuggest em uma página do meu projeto e usei funções prontas para documentos separadas para cada inicialização de entradas. A primeira inicialização do Input funcionou, mas não o segundo e também não deu nenhum erro; o Second Input não apareceu. Portanto, eu sempre recomendo usar uma função pronta para documento.
Você pode até aninhar funções prontas para documentos dentro dos arquivos html incluídos. Aqui está um exemplo usando jquery:
Arquivo: 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>
Arquivo: test_embed.html
<h1>test_embed.html</h1>
<script>
$(document).ready( function()
{
console.log( 'test_embed.html READY' );
} );
</script>
Saída do console:
test_main.html READY test_main.html:15
test_embed.html READY (program):4
O navegador mostra:
test_embed.html
Você também pode fazer da seguinte maneira:
<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>
as respostas anteriores mostraram o uso de várias funções nomeadas dentro de um único bloco .ready ou de uma única função sem nome no bloco .ready, com outra função nomeada fora do bloco .ready. Encontrei essa pergunta ao pesquisar se havia uma maneira de ter várias funções não nomeadas dentro do bloco .ready - não consegui obter a sintaxe correta. Eu finalmente descobri e esperava que, ao postar meu código de teste, ajudasse outras pessoas a procurar a resposta para a mesma pergunta que eu tinha.