Jquery 没有加载到头部而是加载到 body 标签的底部

Question

这是我的问题：正如标题所说，只有当我将脚本放在 body 标签的底部时，jQuery 才能工作。 当我把它们放在头上时，它们不起作用。 我只使用一些简单的 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>标签中加载它们？

Answer 1

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/

Answer 2

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

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

Answer 3

如果代码在正文下方时有效，则项目已加载，我不知道您是否将代码放在 jQuery 就绪函数中。

例子：

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

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

Answer 4

谢谢你们，我找到了解决我的问题的方法，你们真的很棒..

正如@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>

Answer 5

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

<script type="text/javascript" charset="utf8" src="../jquery-3.2.1.min.js" />