jQuery中$(function() {});问题详解

最新推荐文章于 2022-06-24 16:56:47 发布

Pannahouse

最新推荐文章于 2022-06-24 16:56:47 发布

阅读量509

点赞数

分类专栏： jquery 文章标签： jquery 函数 dom

jquery 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

$(document).ready() 里的代码是在页面内容都加载完才执行的，如果把代码直接写到script标签里，当页面加载完这个script标签就会执行里边的代码了，此时如果你标签里执行的代码调用了当前还没加载过来的代码或者dom，那么就会报错，当然如果你把script标签放到页面最后面那么就没问题了，此时和ready效果一样。

$(document).ready(function(){})可以简写成$ (function(){});

 
          <html> 
         
          <head> 
         
          <script src= 
          "http://libs.baidu.com/jquery/1.9.0/jquery.js" 
          type= 
          "text/javascript" 
          ></script> 
         
          <script type= 
          "text/javascript" 
          > 
         
          $(document).ready(</code><code class="js keyword">function</code><code class="js plain">(){</code></div><div class="line number6 index5 alt1"><code class="js spaces">&nbsp;</code><code class="js plain">$(</code><code class="js string">"p"</code><code class="js plain">).click(</code><code class="js keyword">function</code><code class="js plain">(){</code></div><div class="line number7 index6 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">$( 
          this 
          ).hide(); 
         
          }); 
         
          }); 
         
          </script> 
         
          </head> 
         
          <body> 
         
          <p>If you click on me, I will disappear.</p> 
         
          </body> 
         
          </html>

如果把$(document).ready(function() {});去掉后，无法隐藏段落：

 
          <html> 
         
          <head> 
         
          <script type= 
          "text/javascript" 
          src= 
          "jquery.js" 
          ></script> 
         
          <script type= 
          "text/javascript" 
          > 
         
          $(</code><code class="js string">"p"</code><code class="js plain">).click(</code><code class="js keyword">function</code><code class="js plain">(){</code></div><div class="line number6 index5 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">$( 
          this 
          ).hide(); 
         
          }); 
         
          </script> 
         
          </head> 
         
          <body> 
         
          <p>If you click on me, I will disappear.</p> 
         
          </body> 
         
          </html>

但是把script放到页面最后的话，就可恢复隐藏效果：

 
          <html> 
         
          <head> 
         
          </head> 
         
          <body> 
         
          <p>If you click on me, I will disappear.</p> 
         
          </body> 
         
          <script type= 
          "text/javascript" 
          src= 
          "jquery-1.7.2.min.js" 
          ></script> 
         
          <script type= 
          "text/javascript" 
          > 
         
          $(</code><code class="js string">"p"</code><code class="js plain">).click(</code><code class="js keyword">function</code><code class="js plain">(){</code></div><div class="line number12 index11 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;</code><code class="js plain">$( 
          this 
          ).hide(); 
         
          }); 
         
          </script> 
         
          </html>

总结：

$(document).ready 里的代码是在页面内容都加载完才执行的，你直接写到script标签里，当页面加载完这个script标签就会执行里边的代码了，如果你标签里执行的代码调用了当前还没加载过来的代码或者dom，那么就会报错，
当然如果你把script标签当到页面最后面那么就没问题了和ready差不多的效果