user3020047 user3020047 - 1 year ago 73
jQuery Question

Where should this jQuery code go?

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>




Answer Source

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_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_01").click(hide_paragraph_with_specific_id);
      $("#paragraph_02").click(hide_all_paragraphs);
      $("#paragraph_03").click(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>
</body>

</html>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download