jQuery 在我的 HTML 中不起作用 [关闭]答案

【问题标题】：jQuery isn't working in my HTML [closed]jQuery 在我的 HTML 中不起作用 [关闭]
【发布时间】：2014-01-13 23:04:41
【问题描述】：

这是我要调用的 HTML 文档：

<html>
<head>
    <script type='text/javascript' src='menuTest.js'></script>
    <title>Menu Test</title>
</head>

<body>
    <div id="hover" style="height:80px; width:150px; background-color:black; margin-left:100px; margin-top:100px"></div>
    <p id="show">this will appear</p>
</body>
</html>

这是我试图链接的 jQuery 脚本，最初试图让某些东西出现在悬停时，然后尝试放置一个 html 对象以查看它是否正确链接（它不是）：

$(document).ready(function(){
    $('div').mouseover(function(){
        $('p').show();
    $('div').mouseleave(function(){
        $('p').hide();
    $('div').after("<p>Hooo</p>");
    });
});

我知道我错过了一些愚蠢的东西，但我查看了其他 jQuery 示例，但仍然没有弄明白。

谢谢！

【问题讨论】：

你应该包含 jQuery

标签： javascript jquery html css

【解决方案1】：

只需添加

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>

在 </head> 和任何其他需要 jQuery 的脚本之前。例如：

<head>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type='text/javascript' src='menuTest.js'></script>
    <title>Menu Test</title>
</head>

menuTest.js 也包含错误。固定的：

$(document).ready(function(){
    $('div').mouseover(function(){
        $('p').show();
    });
    $('div').mouseleave(function(){
        $('p').hide();
    });
    $('div').after("<p>Hooo</p>");
});

小提琴：http://jsfiddle.net/H5hg6/1/

【讨论】：

最好在包含其他脚本之前，因为它期望 $ 存在。

【解决方案2】：

又一个错误，您忘记填写parenthesis 和curly brace。

$(document).ready(function(){

    $('div').mouseover(function(){
        $('p').show(); 
    });     //------------------------------------> here.

    $('div').mouseleave(function(){
        $('p').hide();
        $('div').after("<p>Hooo</p>");
    });
});

【讨论】：

@Murali 已将详细信息发送给您，我已安排在上周进行第 2 轮的电话采访，忘记包含此内容.. 我会尽快删除此评论..

【解决方案3】：

你应该包含 jquery

<html>
<head>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script type='text/javascript' src='menuTest.js'></script>
    <title>Menu Test</title>
</head>

<body>
    <div id="hover" style="height:80px; width:150px; background-color:black; margin-left:100px; margin-top:100px"></div>
    <p id="show">this will appear</p>
</body>
</html>

【讨论】：