你可以有多个$(document).ready(function(){…}); 板块?
如果我在启动时有很多function,他们都必须在一个单一的:
$(document).ready(function() {
或者我可以有多个这样的陈述?
你可以有多个,但并不总是最好的事情。 尽量不要过度使用它们,因为这会严重影响可读性。 除此之外,这是完全合法的。 请看下面:
http://www.learningjquery.com/2006/09/multiple-document-ready
试试这个:
$(document).ready(function() { alert('Hello Tom!'); }); $(document).ready(function() { alert('Hello Jeff!'); }); $(document).ready(function() { alert('Hello Dexter!'); });
你会发现它相当于这个,注意执行顺序:
$(document).ready(function() { alert('Hello Tom!'); alert('Hello Jeff!'); alert('Hello Dexter!'); });
值得注意的是,在$(document).ready
块中定义的函数不能从另一个$(document).ready
块中调用,我只是运行了这个testing:
$(document).ready(function() { alert('hello1'); function saySomething() { alert('something'); } saySomething(); }); $(document).ready(function() { alert('hello2'); saySomething(); });
输出是:
hello1 something hello2
你可以使用多个。 但是你也可以在一个document.ready中使用多个函数:
$(document).ready(function() { // Jquery $('.hide').hide(); $('.test').each(function() { $(this).fadeIn(); }); // Reqular JS function test(word) { alert(word); } test('hello!'); });
是的,你可以很容易地有多个块。 只要小心它们之间的依赖关系,因为评估顺序可能不是你所期望的。
是的 ,可以有多个$(document).ready()调用。 但是,我不认为你可以知道他们将以何种方式执行。 (资源)
是的,这是可能的,但你可以更好地使用div #mydiv并使用两者
$(document).ready(function(){}); //and $("#mydiv").ready(function(){});
是的,这是完全正确的,但要避免没有理由的。 例如,我使用它来dynamic生成JavaScript文件,而不是单个页面来声明全局网站规则,但是如果您一直这样做,则会使其难以阅读。
你也不能从另一个jQuery(function(){});
访问一些方法jQuery(function(){});
打电话,这是你不想这样做的另一个原因。
用旧的window.onload
虽然每次指定函数都会replace旧的。
是的你可以。
如果您有其他模块在使用它的同一个页面上,则多个文档就绪部分特别有用。 用旧的window.onload=func
声明,每次你指定一个被调用的函数,它就代替旧的。
现在,所有指定的function都排队/堆栈(可以确认吗?),无论指定哪个文档就绪部分。
我认为最好的办法是把切换到命名函数(检查这个溢出更多关于该主题) 。 这样你可以从一个事件中调用它们。
像这样:
function firstFunction() { console.log("first"); } function secondFunction() { console.log("second"); } function thirdFunction() { console.log("third"); }
这样你可以加载他们在一个单一的准备function。
jQuery(document).on('ready', function(){ firstFunction(); secondFunction(); thirdFunction();
});
这将输出到您的console.log以下:
first second third
这样你可以重用其他事件的function。
jQuery(window).on('resize',function(){ secondFunction(); });
检查这个小提琴的工作版本
这是合法的,但有时会导致不良行为。 作为示例,我使用了MagicSuggest库,并在我的项目页面中添加了两个MagicSuggestinput,并为input的每个初始化使用了单独的文档就绪函数。 第一个input初始化工作,但不是第二个,也没有给出任何错误,第二个input没有显示出来。 所以,我总是build议使用一个文档就绪function。
您甚至可以在包含的html文件中embedded文档就绪函数。 这里是一个使用jQuery的例子:
文件: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>
文件:test_embed.html
<h1>test_embed.html</h1> <script> $(document).ready( function() { console.log( 'test_embed.html READY' ); } ); </script>
控制台输出:
test_main.html READY test_main.html:15 test_embed.html READY (program):4
浏览器显示:
test_embed.html