blocks|key|2166700|text|.ready()+-指定在DOM完全加载时执行的函数。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2166701|$(document).ready(function()+{
++//+Handler+for+.ready()+called.
});|code-block|syntax|javascript|2166702|以下是所有jQuery方法的列表|2166703|在介绍$(document).ready()上阅读|2166704|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/ready/|1|http://api.jquery.com/category/manipulation/|2|http://www.learningjquery.com/2006/09/introducing-document-ready^0|0|8|0|0|0|3|A|1|0|1|L|2|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|13|8|@]|9|@$A|14|B|15|1|16]]|C|$]]|$1|K|3|L|5|6|7|17|8|@]|9|@$A|18|B|19|1|1A]]|C|$]]|$1|M|3|-4|5|6|7|1B|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]|W|$5|P|Q|R|C|$S|X]]]]

<a href="http://api.jquery.com/ready/" rel="nofollow">.ready()</a> - Specify a function to execute when the DOM is fully loaded.

<pre><code>$(document).ready(function() {
 // Handler for .ready() called.
});
</code></pre>

Here is a List of <a href="http://api.jquery.com/category/manipulation/" rel="nofollow">all jQuery Methods</a>

Read on <a href="http://www.learningjquery.com/2006/09/introducing-document-ready" rel="nofollow">Introducing $(document).ready()</a>

blocks|key|1077539|text|简单来说，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1077540|$(document).ready是一个在document准备就绪时触发的事件。|blockquote|offset|length|style|CODE|1077541|假设您已经将jQuery代码放置在head部分并试图访问dom元素(锚、img等)，您将无法访问它，因为html是从上到下解释的，并且在运行jQuery代码时不存在html元素。|1077542|为了克服这个问题，我们将jQuery/javascript代码(使用DOM)放置在$(document).ready函数中，当可以访问所有dom元素时，该函数将被调用。|1077543|这就是为什么，当您将$(document).ready代码放在底部(毕竟是dom元素，就在</body>之前)时，就不需要了|BOLD|1077544|仅当您在on上使用on方法时，才需要在document中放置on方法，原因与我前面解释的原因相同。|1077545|++++//No+need+to+be+put+inside+$(document).ready
++++$(document).on('click','a',function+()+{
++++})

++++//+Need+to+be+put+inside+$(document).ready+if+placed+inside+<head></head>
++++$('.container').on('click','a',function+()+{
++++});|code-block|syntax|javascript|1077546|编辑|1077547|从评论来看，|1077548|$(document).ready不等待图像或脚本。这就是$(document).ready和$(document).load之间的巨大区别|ordered-list-item|1077549|只有访问DOM的代码才应该处于就绪处理程序中。如果它是一个插件，它不应该在就绪事件。|1077550|entityMap^0|0|0|H|L|8|0|H|4|S|3|1G|4|0|15|H|1X|3|0|A|H|1L|4|A|H|19|7|0|4|2|9|2|J|8|U|2|0|0|0|2|0|0|0|H|T|H|1B|G|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|18|8|@$E|19|F|1A|G|H]|$E|1B|F|1C|G|H]]|9|@]|A|$]]|$1|I|3|J|5|6|7|1D|8|@$E|1E|F|1F|G|H]|$E|1G|F|1H|G|H]|$E|1I|F|1J|G|H]]|9|@]|A|$]]|$1|K|3|L|5|6|7|1K|8|@$E|1L|F|1M|G|H]|$E|1N|F|1O|G|H]]|9|@]|A|$]]|$1|M|3|N|5|6|7|1P|8|@$E|1Q|F|1R|G|O]|$E|1S|F|1T|G|O]|$E|1U|F|1V|G|H]|$E|1W|F|1X|G|H]]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1Y|8|@$E|1Z|F|20|G|H]|$E|21|F|22|G|H]|$E|23|F|24|G|H]|$E|25|F|26|G|H]]|9|@]|A|$]]|$1|R|3|S|5|T|7|27|8|@]|9|@]|A|$U|V]]|$1|W|3|X|5|6|7|28|8|@$E|29|F|2A|G|O]]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|2B|8|@]|9|@]|A|$]]|$1|10|3|11|5|12|7|2C|8|@$E|2D|F|2E|G|H]|$E|2F|F|2G|G|H]|$E|2H|F|2I|G|H]]|9|@]|A|$]]|$1|13|3|14|5|12|7|2J|8|@]|9|@]|A|$]]|$1|15|3|-4|5|6|7|2K|8|@]|9|@]|A|$]]]|16|$]]

In simple words,

<blockquote>
 <code>$(document).ready</code> is an event which fires up when <code>document</code> is
 ready.
</blockquote>

Suppose you have placed your jQuery code in <code>head</code> section and trying to access a <code>dom</code> element (an anchor, an img etc), you will not be able to access it because <code>html</code> is interpreted from top to bottom and your html elements are not present when your jQuery code runs.

To overcome this problem, we place every jQuery/javascript code (which uses DOM) inside <code>$(document).ready</code> function which gets called when all the <code>dom</code> elements can be accessed.

And this is the reason, when you place your jQuery code at the bottom (after all dom elements, just before <code>&lt;/body&gt;</code>) , there is no need for <code>$(document).ready</code>

There is no need to place <code>on</code> method inside <code>$(document).ready</code> only when you use <code>on</code> method on <code>document</code> because of the same reason I explained above.

<pre><code> //No need to be put inside $(document).ready
 $(document).on('click','a',function () {
 })

 // Need to be put inside $(document).ready if placed inside &lt;head&gt;&lt;/head&gt;
 $('.container').on('click','a',function () {
 });
</code></pre>

EDIT

From comments,

<ol>
<li><code>$(document).ready</code> does not wait for images or scripts. Thats the big difference between <code>$(document).ready</code> and <code>$(document).load</code></li>
<li>Only code that accesses the DOM should be in ready handler. If it's a plugin, it shouldn't be in the ready event.</li>
</ol>

blocks|key|2166744|text|为了现实起见，除了精确地操作DOM之外，任何事情都不需要document.ready，而且并不总是需要它，也不是最好的选择。我的意思是，例如，当您开发一个大型的jQuery插件时，您很难在整个代码中使用它，因为您试图让它保持干燥，因此您可以在操作DOM的方法中尽可能地抽象，但这些方法将在稍后被调用。当您的所有代码都紧密集成时，在document.ready中公开的唯一方法通常是init，其中发生了所有DOM魔术。希望这能回答你的问题。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2166745|entityMap^0|S|E|4L|E|5A|4|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

To be realistic, <code>document.ready</code> is not needed for anything else than manipulating the DOM accurately and it's not always needed or the best option. What I mean is that when you develop a large jQuery plugin for example you hardly use it throughout the code because you're trying to keep it DRY, so you abstract as much as possible in methods that manipulate the DOM but are meant to be invoked later on. When all your code is tightly integrated the only method exposed in <code>document.ready</code> is usually <code>init</code> where all the DOM magic happens. Hope this answers your question.

blocks|key|2166788|text|您应该绑定document.ready中的所有操作，因为您应该等待文档完全加载。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2166789|但是，您应该为所有操作创建函数，并从document.ready中调用它们。创建函数(全局对象)时，随时调用它们。因此，一旦加载了新数据并创建了新元素，请再次调用这些函数。|2166790|这些函数是绑定事件和操作项的函数。|2166791|$(document).ready(function(){
bindelement1();
bindelement2();
});

function+bindelement1(){
$('el1').on('click',function...);
//you+might+make+an+ajax+call+here,+then+under+complete+of+the+AJAX,+call+this+function+or+any+other+function+again
}

function+bindelement2(){
$('el2').on('click',function...);
}|code-block|syntax|javascript|2166792|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

You should bind all actions in document.ready, because you should wait till the document is fully loaded.

But, you should create functions for all actions and call them from within the document.ready. When you create functions (your global objects), call them whenever you want. So once your new data is loaded and new elements created, call those functions again.

These functions are the ones where you've bound the events and action items.

<pre><code>$(document).ready(function(){
bindelement1();
bindelement2();
});

function bindelement1(){
$('el1').on('click',function...);
//you might make an ajax call here, then under complete of the AJAX, call this function or any other function again
}

function bindelement2(){
$('el2').on('click',function...);
}
</code></pre>

blocks|key|2166888|text|答案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2166889|jQuery的.on()方法:我对AJAX使用了相当多的.on()方法(动态创建DOM元素)。.on()单击处理程序应该始终在document.ready中吗？|blockquote|2166890|不，不总是这样。如果将JS加载到文档头中，则需要加载JS。如果要在页面通过AJAX加载之后创建元素，则需要这样做。如果脚本位于html元素下面，则不需要添加处理程序。|2166891|性能:在document.ready内部或外部保留各种javascript/jQuery对象是更好的性能吗(另外，性能差异很大吗？)|2166892|那得看情况。附加处理程序将花费同样的时间，这仅仅取决于您是否希望在页面加载时立即发生这种情况，或者希望它等待直到加载整个文档。因此，这将取决于您在页面上做的其他事情。|2166893|对象范围:AJAX加载的页面无法访问上一页的document.ready中的对象，对吗？它们只能访问document.ready之外的对象(即真正的“全局”对象)？|2166894|它本质上是它自己的函数，因此它只能访问在全局范围(外部/最重要的函数)或使用window.myvarname+=+'';声明的vars。|offset|length|style|CODE|2166895|entityMap^0|0|0|0|0|0|0|12|M|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$]]|$1|E|3|F|5|6|7|W|8|@]|9|@]|A|$]]|$1|G|3|H|5|D|7|X|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|Y|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|Z|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|10|8|@$O|11|P|12|Q|R]]|9|@]|A|$]]|$1|S|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|T|$]]

Answers:

<blockquote>
 jQuery's .on() method: I use the .on() method for AJAX quite a bit
 (dynamically creating DOM elements). Should the .on() click handlers
 always be inside document.ready?
</blockquote>

No, not always. If you load your JS in the document head you will need to. If you are creating the elements after the page loads via AJAX, you will need to. You will not need to if the script is below the html element you are adding a handler too.

<blockquote>
 Performance: Is it more performant to keep various javascript/jQuery
 objects inside or outside document.ready (also, is the performance difference significant?)?
</blockquote>

It depends. It will take the same amount of time to attach the handlers, it just depends if you want it to happen immediately as the page is loading or if you want it to wait until the entire doc is loaded. So it will depend what other things you are doing on the page.

<blockquote>
 Object scope: AJAX-loaded pages can't access objects that were inside
 the prior page's document.ready, correct? They can only access objects
 which were outside document.ready (i.e., truly "global" objects)?
</blockquote>

It's essentially it's own function so it can only access vars declared at a global scope (outside/above all functions) or with <code>window.myvarname = '';</code>

blocks|key|2166948|text|在安全使用jQuery之前，您需要确保页面处于可操作的就绪状态。使用jQuery，我们通过将代码放入函数中，然后将该函数传递给$(document).ready()来实现这一点。我们传递的函数可以只是一个匿名函数。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|2166949|$(document).ready(function()+{++
++++console.log('ready!');++
});|code-block|syntax|javascript|2166950|一旦文档准备就绪，这将运行我们传递给.ready()的函数。这里发生了什么事？我们使用$(+document+)从页面的文档创建一个jQuery对象，然后调用该对象上的.ready()函数，将我们要执行的函数传递给它。|2166951|由于您会发现自己做了很多事情，所以如果您愿意的话，有一个简化的方法--如果您传递一个函数，$()函数作为$(document).ready()的别名执行双重任务：|2166952|$(function()+{++
++++console.log('ready!');++
});++|2166953|这是一个很好的阅读：Jquery基本面|2166954|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/ready/|1|http://helephant.com/2008/08/23/javascript-anonymous-functions/|2|http://jqfundamentals.com/chapter/jquery-basics^0|R|2|1R|J|1R|J|0|2U|4|1|0|0|0|0|0|A|9|2|0^^$0|@$1|2|3|4|5|6|7|15|8|@$9|16|A|17|B|C]|$9|18|A|19|B|D]]|E|@$9|1A|A|1B|1|1C]|$9|1D|A|1E|1|1F]]|F|$]]|$1|G|3|H|5|I|7|1G|8|@]|E|@]|F|$J|K]]|$1|L|3|M|5|6|7|1H|8|@]|E|@]|F|$]]|$1|N|3|O|5|6|7|1I|8|@]|E|@]|F|$]]|$1|P|3|Q|5|I|7|1J|8|@]|E|@]|F|$J|K]]|$1|R|3|S|5|6|7|1K|8|@]|E|@$9|1L|A|1M|1|1N]]|F|$]]|$1|T|3|-4|5|6|7|1O|8|@]|E|@]|F|$]]]|U|$V|$5|W|X|Y|F|$Z|10]]|11|$5|W|X|Y|F|$Z|12]]|13|$5|W|X|Y|F|$Z|14]]]]

Before you can safely use jQuery you need to ensure that the page is in a state where it's ready to be manipulated. With jQuery, we accomplish this by putting our code in a function, and then passing that function to <a href="http://api.jquery.com/ready/" rel="noreferrer"><code>$(document).ready()</code></a>. The function we pass can just be an <a href="http://helephant.com/2008/08/23/javascript-anonymous-functions/" rel="noreferrer">anonymous function</a>.

<pre><code>$(document).ready(function() { 
 console.log('ready!'); 
});
</code></pre>

This will run the function that we pass to .ready() once the document is ready. What's going on here? We're using $(document) to create a jQuery object from our page's document, and then calling the .ready() function on that object, passing it the function we want to execute.

Since this is something you'll find yourself doing a lot, there's a shorthand method for this if you prefer — the $() function does double duty as an alias for $(document).ready() if you pass it a function:

<pre><code>$(function() { 
 console.log('ready!'); 
}); 
</code></pre>

This is a good reading: <a href="http://jqfundamentals.com/chapter/jquery-basics" rel="noreferrer">Jquery Fundamentals</a>

blocks|key|1074697|text|当加载了DOM+()时，就会发生就绪事件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1074698|因为这个事件发生在文档准备好之后，所以它是拥有所有其他jQuery事件和函数的好地方。就像上面的例子一样。|1074699|方法指定就绪事件发生时发生的情况。|1074700|提示:+ready()方法不应该与之一起使用。|1074701|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|L|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|M|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

he ready event occurs when the DOM (document object model) has been loaded.

Because this event occurs after the document is ready, it is a good place to have all other jQuery events and functions. Like in the example above.

The ready() method specifies what happens when a ready event occurs.

Tip: The ready() method should not be used together with .

blocks|key|1689142|text|我给div添加了一个链接，并希望在单击时执行一些任务。我在DOM中的附加元素下面添加了代码，但它没有工作。以下是代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1689143|<div+id="advance-search">
+++Some+other+DOM+elements
+++
</div>

<script>
++$("#advance-search+#reset-adv-srch").on("click",+function+(){
+++++alert('Link+Clicked');``
++});
</script>|code-block|syntax|javascript|1689144|它不起作用。然后，我将jQuery代码放在$(document).ready中，它工作得很好。这就是了。|1689145|$(document).ready(function(e)+{
++++$("#advance-search+#reset-adv-srch").on("click",+function+(){
++++++++alert('Link+Clicked');
++++});
});|1689146|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I appended a link to a div and wanted to do some tasks on the click. I added the code below the appended element in the DOM but it did not work. Here is the code:

<pre><code>&lt;div id="advance-search"&gt;
 Some other DOM elements
 &lt;!-- Here I wanted to apppend the link as &lt;a href="javascript:;" id="reset-adv-srch"&gt;&lt;span class="bold"&gt;x&lt;/span&gt; Clear all&lt;/a&gt;--&gt;
&lt;/div&gt;

&lt;script&gt;
 $("#advance-search #reset-adv-srch").on("click", function (){
 alert('Link Clicked');``
 });
&lt;/script&gt;
</code></pre>

It did not work. Then I placed the jQuery code inside $(document).ready and it worked perfectly. Here it is.

<pre><code>$(document).ready(function(e) {
 $("#advance-search #reset-adv-srch").on("click", function (){
 alert('Link Clicked');
 });
});
</code></pre>

I was told to use document.ready when I first started to use Javascript/jQuery but I never really learned why.

Might someone provide some basic guidelines on when it makes sense to wrap javascript/jquery code inside jQuery's <code>document.ready</code>? 

Some topics I'm interested in:

<ol>
<li>jQuery's <code>.on()</code> method: I use the <code>.on()</code> method for AJAX quite a bit (typically on dynamically created DOM elements). Should the <code>.on()</code> click handlers always be inside <code>document.ready</code>?</li>
<li>Performance: Is it more performant to keep various javascript/jQuery objects inside or outside document.ready (also, is the performance difference significant?)?</li>
<li>Object scope: AJAX-loaded pages can't access objects that were inside the prior page's document.ready, correct? They can only access objects which were outside document.ready (i.e., truly "global" objects)? </li>
</ol>

Update: To follow a best practice, all my javascript (the jQuery library and my app's code) is at the bottom of my HTML page and I'm using the <code>defer</code> attribute on the jQuery-containing scripts on my AJAX-loaded pages so that I can access the jQuery library on these pages.

When should I use jQuery's document.ready function?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

当我第一次开始使用Javascript/jQuery时，有人告诉我要使用document.ready，但我从未真正了解为什么。有人能提供一些基本的指导，说明何时在jQuery的document.ready中包装javascript/jquery代码是有意义的吗？一些我感兴趣的话题：jQuery的.on()方法:我对AJ...

问何时使用jQuery的document.ready函数？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问何时使用jQuery的document.ready函数？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问何时使用jQuery的document.ready函数？
EN