jQuery不会在页面上执行,但在JSFiddle中执行

jQuery won't execute on page but does in JSFiddle

本文关键字:执行 但在 JSFiddle jQuery      更新时间:2023-09-26

我做了一个jQuery代码。 它在JSFiddle上运行得很好,但在我的页面上不起作用。我检查了其他问题和解决方案,但没有一个帮助我,所以我再次询问。

代码如下:

.HTML:

    <!DOCTYPE html>
<html>
<head>
    <title>Tic Tac Toe</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    <script type="text/javascript" src="script.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
    <h1>Tic Tac Toe</h1>
    <hr/>
    <p>Click play to start playing!</p>
    <div id="buttonPlay">Play!</div>
    <div id="can">
            <canvas id="s1" class="square"></canvas>
            <canvas id="s2" class="square"></canvas>
            <canvas id="s3" class="square"></canvas>
            <br/>
            <canvas id="s4" class="square"></canvas>
            <canvas id="s5" class="square"></canvas>
            <canvas id="s6" class="square"></canvas>
            <br/>
            <canvas id="s7" class="square"></canvas>
            <canvas id="s8" class="square"></canvas>
            <canvas id="s9" class="square"></canvas>
        <h3>Wins: </h3>
        <br/>
        <h3>Loses: </h3>
    </div>
</body>
</html>

.CSS:

body {
}
h1 {
    text-align: center;
}
p {
    text-align: center;
    font-size: 24px;
    display: block;
}
#buttonPlay {
    width: 90px;
    height: 50px;
    background-color: lime;
    border: 1px solid black;
    text-align: center;
    font-size: 32px;
    box-shadow: 5px 5px 10px #888;
    display: block;
    margin-left: 47%; 
}
    #buttonPlay:hover {
        background-color: lightblue;
    }   
    #buttonPlay:active {
        background-color: lightblue;
        width: 85px;
        height: 45px;
        box-shadow: 0px 0px 0px;
    }
#can {
    display: none;
    margin-left: 44%;
    margin-top: 100px;
}
.square {
    width: 50px;
    height: 50px;
    border: 3px solid black;
    font-size: 25px;
    text-align: center;
}

JavaScript:

$(document).ready(function() {
    $('#buttonPlay').click(function() {
        $("p").css("background-color","yellow");
    });
});

如您所见,它是wip,但我不得不停止,因为jQuery不起作用。

请在这里帮助我。

问题解决了! 感谢您的回答^^

你在脚本之后包含 jQuery...您的脚本尚无权访问$。改变:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
你必须

在使用jQuery的其他脚本文件之前包含jQuery库,否则它将无法访问jQuery方法。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

将http:放在src="之前可能会起作用

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

在本地工作时,请使用 http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js ,而不是//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js ,因为本地的"协议"是 file://的,而不是 http://的。

相关文章: