javascript - Jquery not loading in head but loading on bottom of body tag

Question

Welcome To Ask or Share your Answers For Others

javascript - Jquery not loading in head but loading on bottom of body tag

asked Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - Jquery not loading in head but loading on bottom of body tag

Here is my problem: as title says, jQuery is working only when I put the scripts on the bottom of the body tag. When I put them in head they are not working. I am using just some simple jQuery scripts

This is my <head>:

<head>
  <title>P site</title>
  <link rel='stylesheet' href='style.css'/>
  <link rel='stylesheet' type='text/css' href='jquery/css/ui-lightness/jquery-ui-1.10.4.css'/>
  <link rel='stylesheet' type='text/css' href='jquery/time/jquery.ui.timepicker.css'/>
  <style type="text/css">
  <!--
  .pagNumActive {
    color: #000;
    border:#060 1px solid; background-color: #D2FFD2; padding-left:3px; padding-right:3px;
  }
  .paginationNumbers a:link {
    color: #000;
    text-decoration: none;
    border:#999 1px solid; background-color:#F0F0F0; padding-left:3px; padding-right:3px;
  }
  .paginationNumbers a:visited {
    color: #000;
    text-decoration: none;
    border:#999 1px solid; background-color:#F0F0F0; padding-left:3px; padding-right:3px;
  }
  .paginationNumbers a:hover {
    color: #000;
    text-decoration: none;
    border:#060 1px solid; background-color: #D2FFD2; padding-left:3px; padding-right:3px;
  }
  .paginationNumbers a:active {
    color: #000;
    text-decoration: none;
    border:#999 1px solid; background-color:#F0F0F0; padding-left:3px; padding-right:3px;
  }
  -->
</style>
<?php
  require 'connect.inc.php';
  require 'function.php';
?>

The <body> has 500+ rows so I'll just show you how the jQuery is loaded at very bottom:

<script type='text/javascript' src='jquery/js/jquery-1.10.2.js'></script>
<script type='text/javascript' src='jquery/js/jquery-ui-1.10.4.js'></script>
<script type='text/javascript' src='jquery/time/jquery.ui.timepicker.js'></script>
<script type='text/javascript' src='jquery/js/ui.js'></script>

Where is the problem , why can't I load them in <head> tag?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-23T18:42:29+0000

The way jQuery, or JavaScript for that matter, works is it detects elements or binds events at the time when the script itself is called. As the document is loaded from top to bottom, placing jQuery at the bottom makes sure your DOM is loaded first, before executing JS. On the other hand, you can place jQuery at top, using technique such as this:

$(document).ready(function() {
    console.log('jQuery is now ready to be executed!');

    // Place jQuery code here...
});

This is basically telling jQuery, wait until DOM is loaded, before acting upon it.

Source: http://api.jquery.com/ready/

Categories

javascript - Jquery not loading in head but loading on bottom of body tag

javascript - Jquery not loading in head but loading on bottom of body tag

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags