我的jQuery获胜't在我的网页上工作

My jQuery Won't Work on my Webpage

本文关键字：我的 网页 工作 jQuery 获胜      更新时间：2023-12-13

我所有的HTML和CSS代码都运行良好，我的脚本也正确链接（或者我认为是这样），但我无法加载脚本或执行我编码的任何操作。这是我的HTML、CSS和JS代码：

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Highlights</title>
    <link rel='stylesheet' type='text/css' href='testwebcss.css'/>
    <script type='text/javascript' src='testwebjs.js'></script>
</head>
        <body>
    <div id="title" class="highlighted">I'm highlighted!</div>
    <div id="text">Highlight me, too!</div>
        </body>
    </html>

CSS

#title {
background-color: #C02942;
border-radius: 5px;
text-align: center;
font-family: Verdana, Arial, Sans-Serif;
color: #FFFFFF;
width: 200px;
height: 25px;
}
#text {
background-color: #0B486B;
border-radius: 5px;
text-align: center;
font-family: Vivaldi, Cursive;
color: #FFFFFF;
width: 200px;
height: 25px;
opacity: 0.5;
}
.highlighted {
-webkit-box-shadow: 0 0 8px #FFD700;
-moz-box-shadow: 0 0 8px #FFD700;
box-shadow: 0 0 8px #FFD700;
cursor:pointer;
}

JS

$(document).ready(function(){
$('#text').mouseenter(function(){
    $(this).fadeTo('fast', 1);
});
$('#text').mouseleave(function(){
    $(this).fadeTo('fast', 0.5);
});
});

所以我不明白为什么它不起作用。正如您所看到的，当鼠标进入#text的周长时，脚本只是将不透明度增加了一倍。那么，为什么什么都不起作用呢。我从控制台上得到了这个：

未捕获引用错误：未定义$

将其添加到HTML头中（在包含脚本之前）：

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

您必须添加更多jQuery

<!DOCTYPE html>
<html>
    <head>
        <title>Highlights</title>
        <link rel='stylesheet' type='text/css' href='testwebcss.css'/>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type='text/javascript' src='testwebjs.js'></script>
    </head>
    <body>
        <div id="title" class="highlighted">I'm highlighted!</div>
        <div id="text">Highlight me, too!</div>
    </body>
</html>
相关文章：