Jquery没有在head中加载，而是在body标记的底部加载

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

本文关键字：加载 底部 body head Jquery      更新时间：2023-09-26

这是我的问题：正如标题所说，jQuery只有在我将脚本放在body标记的底部时才能工作。当我把它们记在脑子里时，它们就不起作用了。我使用的只是一些简单的jQuery脚本

这是我的<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';
?>

<body>有500多行，所以我只向您展示如何在最底部加载jQuery：

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

问题在哪里？为什么我不能将它们加载到<head>标签中？

jQuery或JavaScript的工作方式是在调用脚本时检测元素或绑定事件。由于文档是从上到下加载的，所以将jQuery放在底部可以确保在执行JS之前先加载DOM。另一方面，您可以使用以下技术将jQuery放在顶部： 
$(document).ready(function() {
    console.log('jQuery is now ready to be executed!');
    // Place jQuery code here...
});

这基本上是告诉jQuery，等待DOM加载后再对其执行操作

来源：http://api.jquery.com/ready/

我不认为你的问题是在哪里加载jquery，而是如何使用它——例如，把jquery放在头上，然后尝试这个：

$(document).ready(function(){
alert('document is fully loaded and jquery can access all elements now !');
})

如果它在代码位于以下时工作，那么主体是项目已经加载，我不知道您是否将代码放在jQuery ready函数中。

示例：

 $( document ).ready(function() {
  $( "p" ).text( "The DOM is now loaded and can be manipulated." );
});

来源：http://api.jquery.com/ready/

谢谢大家，我找到了解决我问题的方法，你们真的很棒。。如果有人有同样的问题，这就是我所说的，它有效。。。

正如@Jaimil Prajapati、@Damen Salvatore和@coder_ck所说，我只需要把我的jquery代码放在文档准备功能中。。这是我在脑子里想的，现在它起作用了：）

<head>
<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> 
$(document).ready(function() {
console.log('jQuery is now ready to be executed!');
$('#date').datepicker({ dateFormat: 'dd/mm/yy'});
$('#time').timepicker();
$(function() {
$( document ).tooltip();
});
});
</script>
</head>

如果有人遇到同样的问题，我在添加jQuery库时通过设置字符集UTF8来解决，如下所示：

<script type="text/javascript" charset="utf8" src="../jquery-3.2.1.min.js" />
相关文章：