Question

当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">	
            $(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>

Answer 1

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

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

我有一个引用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()

Answer 2

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

Answer 3

最佳实践是在最后编写任何脚本，因为脚本不会妨碍前端，一旦页面显示给用户休息脚本，我们的业务逻辑可以在UI之后完成来

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

3 个答案: