jQuery在JSFIDLE中工作，但在我的计算机上不工作_Jquery_Jsfiddle

jQuery在JSFIDLE中工作，但在我的计算机上不工作

jquery

jQuery在JSFIDLE中工作，但在我的计算机上不工作,jquery,jsfiddle,Jquery,Jsfiddle,我是jQuery新手，一整天都在琢磨为什么这个脚本在JSFIDLE中运行，而不是在我的计算机上运行。我没有服务器设置，我只是从桌面启动浏览器中的html 这里的代码工作正常：。但是，当我创建以下html文件时： <html> <head> <title>this better work</title> <script src="jquery-latest.js"></script> <script type="tex

我是jQuery新手，一整天都在琢磨为什么这个脚本在JSFIDLE中运行，而不是在我的计算机上运行。我没有服务器设置，我只是从桌面启动浏览器中的html

这里的代码工作正常：。但是，当我创建以下html文件时：

<html>
<head>
<title>this better work</title>

<script src="jquery-latest.js"></script>
<script type="text/javascript">
$('#submit').click(function(){
    $('#myfrom').fadeOut("slow", function(){
    var dot = $("<div id='foo'>Goodmorning Mr. Patti<br/><br/>Thank you.</div>".hide();
    $(this).replaceWith(dot);
    $('#foo').fadeIn("slow");
    });
    });
    </script> 
<style type="text/css">

#container{
width:342px;
height:170px;
padding:10px;
background-color:grey;
}
#myform{
width:322px;
height:100px;
color:#6F6F6F;
padding: 0px;
outline:none;
background-color:white;
}
#foo{
width:322px;
height:100px;
color:#6F6F6F;
padding: 0px;
outline:none;
background-color:white;
}
#submit{
color:#6F6F6F;
padding: 10px 2px 0px 0px;
margin: 0px 0px 0px 0px;
outline:none;
}
</style>
</head>
<body>
<div id="container">
<div id="myform">
<p> blah blah blah blah blah </p>
 <input id="submit" value="send" type="submit"/>
</div>
</div>
</body>
</html>


这是更好的工作
$（“#提交”）。单击（函数（）{
$（'#myfrom'）。淡出（“慢”，函数（）{
var dot=$（“早上好，帕蒂先生，谢谢。”.hide（）；
$（此）。替换为（点）；
$（'foo'）.fadeIn（“慢”）；
});
});
#容器{
宽度：342px；
高度：170px；
填充：10px；
背景颜色：灰色；
}
#myform{
宽度：322px；
高度：100px；
颜色：#6F6F6F；
填充：0px；
大纲：无；
背景色：白色；
}
#福{
宽度：322px；
高度：100px；
颜色：#6F6F6F；
填充：0px；
大纲：无；
背景色：白色；
}
#提交{
颜色：#6F6F6F；
填充：10px 2px 0px 0px；
保证金：0px 0px 0px 0px；
大纲：无；
}
废话废话废话

当我点击提交按钮时，我没有得到任何结果。请帮助，我已经花了6个小时在这上面

谢谢，

您必须在DOM ready上执行代码。请将代码包装在

$（function（）{}）；

此外，您还缺少一个

）

$（函数（）{
$（“#提交”）。单击（函数（）{
$（'#myfrom'）。淡出（“慢”，函数（）{
var dot=$（“早上好，帕蒂先生，谢谢。”）.hide（）；
$（此）。替换为（点）；
$（'foo'）.fadeIn（“慢”）；
});
});
});

编辑：

<!DOCTYPE html>
<html>
<head>
<title>This better work</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $('#submit').click(function () {
        $('#myfrom').fadeOut("slow", function () {
            var dot = $("<div id='foo'>Goodmorning Mr. Patti<br/><br/>Thank you.</div>").hide();
            $(this).replaceWith(dot);
            $('#foo').fadeIn("slow");
        });
    });

});
</script>
</head>
<body>
    <div id="container">
        <form id="myform">
            <p> blah blah blah blah blah </p>
            <input id="submit" value="send" type="submit"/>
        </form>
    </div>
</body>
</html>


这是更好的工作
$（函数（）{
$（“#提交”）。单击（函数（）{
$（'#myfrom'）。淡出（“慢”，函数（）{
var dot=$（“早上好，帕蒂先生，谢谢。”）.hide（）；
$（此）。替换为（点）；
$（'foo'）.fadeIn（“慢”）；
});
});
});
废话废话废话

您必须在DOM ready上执行代码。将代码包装在

$（function（）{}）中另外，您缺少一个）

$（函数（）{
$（“#提交”）。单击（函数（）{
$（'#myfrom'）。淡出（“慢”，函数（）{
var dot=$（“早上好，帕蒂先生，谢谢。”）.hide（）；
$（此）。替换为（点）；
$（'foo'）.fadeIn（“慢”）；
});
});
});

编辑：
<!DOCTYPE html>
<html>
<head>
<title>This better work</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $('#submit').click(function () {
        $('#myfrom').fadeOut("slow", function () {
            var dot = $("<div id='foo'>Goodmorning Mr. Patti<br/><br/>Thank you.</div>").hide();
            $(this).replaceWith(dot);
            $('#foo').fadeIn("slow");
        });
    });

});
</script>
</head>
<body>
    <div id="container">
        <form id="myform">
            <p> blah blah blah blah blah </p>
            <input id="submit" value="send" type="submit"/>
        </form>
    </div>
</body>
</html>


这是更好的工作
$（函数（）{
$（“#提交”）。单击（函数（）{
$（'#myfrom'）。淡出（“慢”，函数（）{
var dot=$（“早上好，帕蒂先生，谢谢。”）.hide（）；
$（此）。替换为（点）；
$（'foo'）.fadeIn（“慢”）；
});
});
});
废话废话废话
我发现您发布的代码中有两个问题可能会有所帮助

通过声明doctype-

或者，如果使用HTML 4规范，请至少指定脚本类型：

在jquery引用中声明javascript类型-type=“text/javascript”

更新-基于最近的评论
在JSFIDLE中，它可以工作，因为您正在绑定submit click事件，但该按钮不在
标记中。如果您在本地使用表单标记，您将获得不同的功能，因为表单提交可能优先于按钮单击事件
希望这有帮助
 我发现您发布的代码中有两个问题可能会有所帮助

通过声明doctype-

或者，如果使用HTML 4规范，请至少指定脚本类型：

在jquery引用中声明javascript类型-type=“text/javascript”

更新-基于最近的评论
在JSFIDLE中，它可以工作，因为您正在绑定submit click事件，但该按钮不在
标记中。如果您在本地使用表单标记，您将获得不同的功能，因为表单提交可能优先于按钮单击事件
希望这有帮助
 在所有这些疑问中，总是要检查这个问题的根源，这是最后一次使用[Run]弹奏小提琴。检查来源，并将其与您的文件进行比较。
在所有这些疑问中，总是要检查来源，这是通过点击[Run]渲染的最后一把小提琴。检查源代码并将其与您的文件进行比较。
是否包含jQuery？jQuery是自动加载到Jfiddler中的，但您必须手动加载。是的……请参阅第5行@JohnSmith，jQuery latest.js
文件是否与HTML文件存在于同一目录中？你在浏览器的错误控制台中看到了什么吗？像我上面发布的那样，在dom上做好准备。为什么要使用JQ1.5？最新版本是1.7.1…@clclclanrs，没有结果。是否包含jQuery？jQuery是自动加载到Jfiddler中的，但您必须手动加载。是的……请参阅第5行@JohnSmith，jQuery latest.js
文件是否与HTML文件存在于同一目录中？你在浏览器的错误控制台中看到了什么吗？像我上面发布的那样，在dom上做好准备。为什么要使用JQ1.5？最新版本是1.7.1…@clclanrs，我做了，stll没有结果。它在小提琴中工作的原因是左边的设置onload@JohnSmith您是否正确地包括jQuery库？我以为我正确地将它包括在第5行中。如何复制jsfiddle的onload功能？这个例子向您展示了onload功能，也被看作是$（document）.ready（function（）{…
），或者在这个答案中是简写的版本$（function（）{…
将我的代码更改为：它在fiddle中工作的原因是左侧的设置onload@JohnSmith您是否正确地包含了jQuery库？我以为我在第5行中正确地包含了它。我如何复制JSFIDLE的onload功能？这