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，它如何使用它例如把jquery放在头部并试试这个：

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

Answer 2

如果代码在body下面时它是有效的，那么项目已经加载了，我不知道你是否将代码放在了jQuery ready函数中。

示例：

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

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

Answer 3

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

Answer 5

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

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

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

5 个答案: