向Header.php文件添加jQuery失败 - Adding jQuery to Header.php File Fails

我将jQuery库添加到header.php文件中，但index.php文件无法访问该库。但是，当从index.php文件直接引用该库时，index.php文件能够访问jQuery库。

这是文件的结构

---header.php---
--index.php-----

下面是header.php 的代码

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery-1.11.3.min.js"></script>
<script type='text/javascript' src='scroll.js'></script>
</head
<body>
<header> 
<a href="/datacentre/index.php" title="Return to the homepage" id="logo">
  <img src="/datacentre/images/cagd_logo.jpg" alt="CAGD logo" 
  style="width:30px;height:30px;"/>
</a>
<span class="headerspan">CAGD Data Centre</span>
<a href="/datacentre/webhelp/index.htm" title="Return to the homepage" id="helpfile">
  help
</a>
</header>

index.php

<?php
include('/header.php');
?>
    <table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
            <th>Column 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
            <td>Row 1</td>
        </tr>
        <tr>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
            <td>Row 2</td>
        </tr>
        <tr>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
            <td>Row 3</td>
        </tr>
        <tr>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
            <td>Row 4</td>
        </tr>
        <tr>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
            <td>Row 5</td>
        </tr>
        <tr>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
            <td>Row 6</td>
        </tr>
        <tr>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
            <td>Row 7</td>
        </tr>
        <tr>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
            <td>Row 8</td>
        </tr>
        <tr>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
            <td>Row 9</td>
        </tr>
        <tr>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
            <td>Row 10</td>
        </tr>
    </tbody>
</table> 
</body>
</html>

Javascript代码

$('table').on('scroll', function () {
    $("table > *").width($("table").width()) + $("table").scrollLeft());
   
});

CSS代码style.css

html {
    font-family: verdana;
    font-size: 10pt;
    line-height: 25px;
}
header ,footer ,
aside, nav , article{           
      display:block;
}
.headerspan{
    height:40px;
    width:860px;
    margin: 0px auto; 
    text-align: center;
    position:absolute;
    top:-10;
    font-size:200%;
}
table {
    border-collapse: collapse;
    width: 300px;
    overflow-x: scroll;
    display: block;
}
thead {
    background-color: #EFEFEF;
    margin-top:50px;
}
thead, tbody {
    display: block;
}
tbody {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 140px;
}
td, th {
    min-width: 100px;
    height: 25px;
    border: dashed 1px lightblue;
}
#search {
    padding: 5px 9px;
    height: 12px;
    width: 380px;
    border: 1px solid #a4c3ca;
    font: normal 13px 'trebuchet MS', arial, helvetica;
    background: #f1f1f1;
    border-radius: 50px 3px 3px 50px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);            
}

BodyJuan Bonnet得到了这个。添加JQUERY &&在body的底部，在它加载之后，否则Jquery无法找到引用，因为它在你的HTML之前加载。

头部首先加载，因此在调用时主体不存在。

在Body加载后加载Jquery，效果会更好。如果你真的不想，或者不能……Charliefti有一个解决方案。如果你的Body在调用$('#myElement')时不存在，那么Jquery无法找到它，即使你可以在源代码中看到它。操作顺序。

如果可以的话，最好在Body的底部加载Jquery和任何脚本。这意味着HTML会在。js之前加载，提供更好的用户体验。