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

【问题标题】：Jquery not loading in head but loading on bottom of body tagJquery 没有加载到头部，而是加载到 body 标签的底部
【发布时间】：2014-04-20 02:15:07
【问题描述】：

这是我的问题：正如标题所说，只有当我将脚本放在 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>标签中加载它们？

【问题讨论】：

这样做时会出现什么错误？
没有错误，只是 jquery 不工作

标签： javascript php jquery html

【解决方案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/

【讨论】：

太棒了！乐意效劳！ :)

【解决方案2】：

我认为你的问题不在于加载 jquery 的位置，而是如何使用它，例如将 jquery 放在 head 中并试试这个：

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

【讨论】：

我同意，如果您的 ui.js 文件正在修改页面内容并且您没有将 JS 包装在 doc ready 函数中或至少 $(function(){ //code here }); jquery 正在尝试对尚未加载或存在于 DOM 中的项目执行操作。

【解决方案3】：

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

示例：

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

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

【讨论】：

【解决方案4】：

谢谢大家，我找到了解决我的问题的方法，你们真的很棒..如果有人遇到同样的问题，这是我的 dd 并且它有效...

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

【讨论】：

【解决方案5】：

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

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

【讨论】：