133 lines
9.5 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<article class="" id="post-">
<header class="entry-header">
<h1 class="entry-title">.ready()</h1>
<div class="entry-meta">
所属分类:<span class="category"><a href="/category/events/">事件</a> &gt; <a href="/category/events/document-loading/">文档加载</a></span>
<span class="pull-right">英文文档:<a href="https://api.jquery123.com/ready/" target="_blank">.ready()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry method" id="ready1"><h2 class="section-title">
<span class="name">.ready( handler )</span><span class="returns">返回: <a href="/Types/#jQuery">jQuery</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>当DOM准备就绪时指定一个函数来执行。</p>
<ul class="signatures"><li class="signature" id="ready-handler">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>.ready( handler )</h4>
<ul><li>
<div><strong>handler</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>当DOM准备就绪时执行的一个函数。</div>
</li></ul>
</li></ul>
<div class="longdesc" id="entry-longdesc">
<p>虽然JavaScript提供了<code>load</code>事件当页面执呈现时用来执行这个事件直到所有的东西如图像已被完全接收前此事件不会被触发。在大多数情况下只要DOM结构已完全加载时脚本就可以运行。传递处理函数给<code>.ready()</code>方法能保证DOM准备好后就执行这个函数因此这里是进行所有其它事件绑定及运行其它 jQuery 代码的最佳地方。当使用的脚本依赖 CSS 属性值时,需要特别注意,要保证外部的样式或内嵌的样式被加载完后,再调用脚本。</p>
<p>如果执行的代码需要在元素被加载之后才能使用时,(例如,取得图片的大小需要在图片被加载完后才能知道),就需要将这样的代码放到 <code>load</code> 事件中。</p>
<div class="warning"><p><code>.ready()</code>方法通常和<code>&lt;body onload=""&gt;</code>属性是不兼容的。如果<code>load</code>必须使用,要么不使用<code>.ready()</code>要么使用jQuery的<code>.load()</code>方法向 window 或一些指定的元素(例如,图片)绑定 <code>load</code> 事件。</p>
</div>
<p>以下三个语法全部是等价的:</p>
<ul>
<li>
<code>$(document).ready(handler)</code>
</li>
<li>
<code>$().ready(handler)</code> (this is not recommended)</li>
<li>
<code>$(handler)</code>
</li>
</ul>
<p>还有<code>$(document).bind("ready", handler)</code>。该方法在从 jQuery 1.8 开始不再建议使用。这种用法的行为和 ready 方法类似,只有一点不同:如果 .ready() 方法已经被执行,再试图进行 <code>.bind("ready")</code>的话,此时通过 <code>.bind("ready")</code> 绑定的函数是不会被立刻执行的,而是在使用上述三种方法之一进行绑定的函数执行完<em></em>,才会执行通过这种方法绑定的 ready 事件处理。(注:如果同时使用 .ready() 方法和 $(document).bind("ready", handler) 的话,那么始终会先执行 .ready(),再执行通过 bind 绑定的事件。)</p>
<p><code>.ready()</code>方法方法只能被匹配当前文档的 jQuery 对象调用,因此选择符可能被省略。</p>
<p><code>.ready()</code>方法通常用于一个匿名函数:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(document).ready(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> <span class="comment">// Handler for .ready() called.</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>这等价于调用:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> <span class="comment">// Handler for .ready() called.</span></code></div></div><div class="container"><div class="line"><code> });</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>如果<code>.ready()</code>在DOM被初始化后被调用新的处理函数通过将立即执行。</p>
<h4>Aliasing the jQuery Namespace</h4>
<p>当使用其他JavaScript库时我们不妨调用<a href="/jQuery.noConflict"><code>$.noConflict()</code></a>以避免命名空间中的混淆。当这个函数被调用,<code>$</code>快捷方式将不再可用,迫使我们每次将写<code>$</code>的时候,写<code>jQuery</code>代替 。然而,处理函数传递给<code>.ready()</code>方法可以带一个参数,这个参数就是全局的<code>jQuery</code>对象。这意味着我们可以重新命名上下文对象内的<code>.ready()</code>处理函数,而不影响其他代码:</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>jQuery(document).ready(<span class="keyword">function</span>($) {</code></div></div><div class="container"><div class="line"><code> <span class="comment">// Code using $ as usual goes here.</span></code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<section class="entry-examples" id="entry-examples"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-0">
<h4><span class="desc">显示当DOM加载的信息。</span></h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">style</span>&gt;</span><span class="css"><span class="tag">p</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value">red;</span></span> <span class="rule">}</span></span></span><span class="tag">&lt;/<span class="title">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code> $(document).ready(<span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code> $(<span class="string">"p"</span>).text(<span class="string">"The DOM is now loaded and can be manipulated."</span>);</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">p</span>&gt;</span>Not loaded yet.<span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div></section>
</div></article> </div>
</article>