CODEWITHSUNDEEP
jquery
user3020047
user3020047

Reputation: 888

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>

Upvotes: 0

Views: 45

Answers (3)

BotNet
BotNet

Reputation: 2809

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()

Upvotes: 1

Rahil
Rahil

Reputation: 1

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

Upvotes: 0

P.S.
P.S.

Reputation: 16384

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.

Upvotes: 0

Related Questions