将jQuery添加到Header.php文件失败

I added jQuery library to a header.php file but the index.php file is not able to access the library. However when the library is referenced directly from the index.php file , the index.php file is able to access the jQuery library.

This is the structure of the file.

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

Below is the code for the 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>

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

Code for Javascript scroll.js

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

The CSS code 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);            
}

</div>

BodyJuan Bonnet got this. Add JQUERY && scroll.js at bottom of body, after it has loaded, else Jquery cannot find references as its loaded before your HTML.

Head loads first, therefore body does not exist at time of call.

load Jquery after Body is loaded, it will work out better. If you really don't want to, or can't... charliefti has a solution. $(document).ready() { Your Jquery code } If your Body does not exist at the point of calling $('#myElement') then Jquery cannot find it, even if you can see it in the source. Order of operations.

Its always best to load Jquery and any script at bottom of your Body if you can. This means HTML will load before .js, giving better user experience.