基本的jQuery函数不能与外部js文件一起使用

时间:2015-03-02 17:24:59

标签: jquery html

我一直试图让jQuery工作,并且无法弄清楚我做错了什么。当我将代码粘贴到脚本标记之间的HTML文档中时,它运行正常,但是当我尝试使用单独的脚本文件时,它不起作用。我有一个jQuery文件的本地副本,我也尝试过使用CDN。

HTML

    <!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Test</title>
    <script src="script/main.js"></script>
    <script src="script/jquery.js"></script>

    <link href="css/style.css" rel="stylesheet" />
    </head>
    <body>
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>

        <p>This is a paragraph.</p>
        <p>This is another paragraph.</p>

        <div>This is some important text!</div><br>

        <button>Add classes to elements</button>
    </body>
</html>

CSS

    .important {
    font-weight: bold;
    font-size: xx-large;
}

.blue {
    color: blue;
}

的jQuery

$(document).ready(function () {

    $("button").click(function () {
        $("h1, h2, p").addClass("blue");
        $("div").addClass("important");
    });
});

1 个答案:

答案 0 :(得分:1)

切换这些:

<script src="script/main.js"></script>
<script src="script/jquery.js"></script>

<script src="script/jquery.js"></script>
<script src="script/main.js"></script>

还考虑使用CDN:

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>