Question

我将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 scroll.js代码

$('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);            
}

Answer 1

BodyJuan Bonnet得到了这个。添加JQUERY＆amp;＆amp;在加载之后，在body底部的scroll.js，否则Jquery在HTML之前找不到引用。

首先加载头部，因此在呼叫时身体不存在。

在Body加载后加载Jquery，它会更好用。如果你真的不想，或者不能...... charliefti有一个解决方案。 $（document）.ready（）{你的Jquery代码}如果你的Body在调用$（'＃myElement'）时不存在，那么即使你可以在源代码中看到它，Jquery也找不到它。运作顺序。

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

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

1 个答案: