这个jQuery代码应该放在哪里？

当jQuery代码不在单独的文件中时，最佳做法是什么？这个jQuery代码应该放在哪里？

我有一个脚本引用了jQuery和一个包装.ready中的函数的脚本。

如果jQuery代码（2个脚本标记）在头部或刚刚结束标记之前去了？

<!DOCTYPE html> 
 

 
<html>  
 
    <head> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
 

 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 

 
     <script type="text/javascript"> \t 
 
      $(document).ready(function() 
 
      { 
 
       // Register event listeners. 
 

 
       // The ID Selector. Using the # (hash) symbol references the ID of the element. 
 
       // jQuery event method: click 
 
       // function() is an anonymous function. 
 
       $("#paragraph_01").click(function() 
 
       { 
 
        hide_paragraph_with_specific_id(); 
 
       }); 
 

 
       $("#paragraph_02").click(function() 
 
       { 
 
        hide_all_paragraphs(); 
 
       }); 
 

 
       $("#paragraph_03").click(function() 
 
       { 
 
        hide_paragraph_by_class(); 
 
       });  
 

 
      }); 
 

 
      function hide_paragraph_with_specific_id() 
 
      { 
 
       $("#paragraph_01").hide(); 
 
      } 
 

 
      function hide_all_paragraphs() 
 
      { 
 
       $("p").hide(); 
 
      } 
 

 
      function hide_paragraph_by_class() 
 
      { 
 
       $(".paragraph_class").hide(); 
 
      }  
 
     </script> 
 
    </head> 
 

 
    <body> 
 
     <!-- Paragraph tags. --> 
 
     <p id="paragraph_01" class="paragraph_class_01">This is paragraph 1.</p> 
 
     <p id="paragraph_02" class="paragraph_class">This is paragraph 2.</p> 
 
     <p id="paragraph_03" class="paragraph_class">This is paragraph 3.</p> 
 
    </body>  
 
</html>

来源

2017-07-26 user3020047

您的代码有一个'$（文件）。就绪（）'所以它会在两种情况下工作。此外，这个问题是重复的：https://stackoverflow.com/questions/10994335/javascript-head-body-or-jquery – Santi

也是一个骗局https://stackoverflow.com/questions/2105327/should-jquery-代码-GO-在集管或尺 – j08691

当jQuery代码不在单独的文件中时，最佳实践是什么？

每个说法都没有“最佳实践”，因为每个实施都有自己的要求。通常的做法是将不必要的JavaScript代码添加到文档<body>的末尾。

我有一个脚本引用了jQuery和一个包含.ready中的函数的脚本。 jQuery代码（2个脚本标签）应该在头部还是在结束标签之前？

（同上答案）

你只希望包括JavaScript中的头：

身体已加载
之前执行代码加快某些进程（像AJAX请求），其中每毫秒计数

您的代码瓦特/一些改进（不是完全重构）：

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
 
</head> 
 

 
<body> 
 
    <!-- Paragraph tags. --> 
 
    <p id="paragraph_00" class="paragraph_class_00">This is paragraph 0.</p> 
 
    <p id="paragraph_01" class="paragraph_class_01">This is paragraph 1.</p> 
 
    <p id="paragraph_02" class="paragraph_class">This is paragraph 2.</p> 
 
    <p id="paragraph_03" class="paragraph_class">This is paragraph 3.</p> 
 

 
    <!-- Scripts --> 
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
    <script type="text/javascript"> 
 
    jQuery(document).ready(function($) { 
 
     // Register event listeners. 
 

 
     // The ID Selector. Using the # (hash) symbol references the ID of the element. 
 
     // jQuery event method: click 
 
     // function() is an anonymous function. 
 

 
     $("#paragraph_00").click(hide_this_paragraph); 
 
     $("#paragraph_01").click(hide_paragraph_with_specific_id); 
 
     $("#paragraph_02").click(hide_all_paragraphs); 
 
     $("#paragraph_03").click(hide_paragraph_by_class); 
 
    }); 
 

 
    function hide_this_paragraph(){ 
 
     $(this).hide(); 
 
    } 
 
    
 
    function hide_paragraph_with_specific_id() { 
 
     $("#paragraph_01").hide(); 
 
    } 
 

 
    function hide_all_paragraphs() { 
 
     $("p").hide(); 
 
    } 
 

 
    function hide_paragraph_by_class() { 
 
     $(".paragraph_class").hide(); 
 
    } 
 
    </script> 
 
</body> 
 

 
</html>

变化：

搬迁<script>标签底部
删除匿名功能在click呼叫
增加了00情况下$(this).hide()

来源

2017-07-26 17:14:19 BotNet

我所知，最好的做法是所有HTML内容后加载jQuery的。在页面加载时，如果您将在</body>结束标记之前放置jQuery代码，而不是在head标记中，则内容加载速度会更快（对SEO和所有内容都有好处）。如果您的情况可能，请将其放在body的末尾。

来源

2017-07-26 16:27:40

最佳做法是在末尾写任何脚本，因为脚本不会妨碍前端，并且一旦页面显示给用户，休息脚本就是我们在UI之后可以完成的业务逻辑已经来了

来源

2017-07-26 16:51:27 Rahil

这个jQuery代码应该放在哪里？

回答

相关问题