Where should this jQuery code go?

Question

What's the best practice when the jQuery code is NOT in a separate file?

I have a script that references jQuery and a script that wraps functions in .ready.

Should the jQuery code (the 2 script tags) go in the head or just before the ending body tag?

<!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>

Your code has a `$(document).ready()` so it will work in either case. Also, this question is a duplicate: https://stackoverflow.com/questions/10994335/javascript-head-body-or-jquery — Tyler Roper, Jul 26 '17 at 16:54
Also a dupe of https://stackoverflow.com/questions/2105327/should-jquery-code-go-in-header-or-footer — j08691, Jul 26 '17 at 16:58

BotNet · Accepted Answer · 2017-07-26T22:17:38.493

What's the best practice when the jQuery code is NOT in a separate file?

There is no "best practice" per say, since each implementation has its own requirements. Common practice is to add unnecessary JavaScript code to the end of the document <body>.

I have a script that references jQuery and a script that wraps functions in .ready. Should the jQuery code (the 2 script tags) go in the head or just before the ending body tag?

(Same answer as above)

You only want to include JavaScript in the head to:

execute code before the body has loaded
expedite certain processes (like AJAX requests), where every millisecond counts

Your code w/ a few improvements (not totally refactored):

<!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>

Changes:

Relocated <script> tag to bottom
Removed anonymous function in click call
Added a 00 case for $(this).hide()

score 0 · Answer 2 · answered Jul 26 '17 at 16:27

As i know, the best practice is to load jQuery after all HTML content. On page load the content will load faster (it's good for SEO and all), if you will place your jQuery code before </body> closing tag, not in head tag. If it's possible for your case, just put it at the end of body.

score 0 · Answer 3 · answered Jul 26 '17 at 16:51

0

Best Practices is to write any script at the end because script will not hamper the front end and once the page should get displayed to the user rest script is something in which we are having our business logic that can be done after UI has came

answered Jul 26 '17 at 16:51

Rahil

1
1

Where should this jQuery code go?

3 Answers3