javascript 脚本在 <head> 上不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5853787/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Script does not work when on <head>
提问by a3rxander
I proved script. its works, but outside of . I am not good on script. maybe its a simple problem.
我证明了脚本。它的作品，但在 . 我不擅长剧本。也许它是一个简单的问题。
<head>
<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
<script src="http://0rochymugen.ucoz.com/scriptbestsite.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
basicly, script just show a
基本上，脚本只是显示一个
when a mouse its over to image.
当鼠标移到图像上时。
$('#img1').mouseover(function () {
$('#p1').show("slow");
});
$("#p1").hover(function () {
$("#p1").hide("slow");
});
when I put script on head. simply, doesnt work.
当我把脚本放在头上时。简单地说，不起作用。
回答by Oded
In some cases, if you are trying to operate on items that are on the page, if you javascript loads and executes beforethe rest of the page has finished loading, you will get errors and/or your code will not appear to work.
在某些情况下，如果您尝试操作页面上的项目，如果您在页面的其余部分完成加载之前加载并执行 javascript ，您将收到错误和/或您的代码似乎无法工作。
This is one reason it is recommended to put links to javascript files at the bottom of the page.
这是建议将指向 javascript 文件的链接放在页面底部的原因之一。
Another good practice is to only run your when the document has finished loading, in jQuery is is normally done using the following syntax:
另一个好的做法是只在文档加载完成后运行你的，在 jQuery 中通常使用以下语法完成：
$(document).ready(function(){
// Your javascript
}
回答by Headshota
I think your code doesn't work because you're not running it when document's ready:
我认为您的代码不起作用，因为当文档准备好时您没有运行它：
$(document).ready(function(){
$('#img1').mouseover(function () {
$('#p1').show("slow");
});
$("#p1").hover(function () {
$("#p1").hide("slow");
});
$("#img2").mouseover(function () {
$('#p2').show("slow");
});
$("#p2").hover(function () {
$("#p2").hide("slow");
});
$("#img3").mouseover(function () {
$('#p3').show("slow");
});
$("#p3").hover(function () {
$("#p3").hide("slow");
});
$("#img4").mouseover(function () {
$('#p4').show("slow");
});
$("#p4").hover(function () {
$("#p4").hide("slow");
});
$("#img5").mouseover(function () {
$('#p5').show("slow");
});
$("#p5").hover(function () {
$("#p5").hide("slow");
});
});
Also you can pass two functions two your hover handler to handle both mouseover and mouseout events. I think that'll shorten your code a bit. ;)
您还可以将两个函数传递给您的悬停处理程序来处理 mouseover 和 mouseout 事件。我认为这会稍微缩短您的代码。;)
回答by Edgar Villegas Alvarado
The problem is that the elements you are referencing, don't exist yet.
问题是您引用的元素尚不存在。
To ensure they exist before using them, you have to put it's related code inside $(document).ready. So you have:
为了在使用它们之前确保它们存在，您必须将其相关代码放在$(document).ready. 所以你有了：
$(document).ready(function(){ //This ensures DOM elements are loaded
$('#img1').mouseover(function () {
$('#p1').show("slow");
});
$("#p1").hover(function () {
$("#p1").hide("slow");
});
});
But, if you can't change that js file, to add a document.ready, you could load the script dynamically, as the following:
但是，如果您无法更改该 js 文件，则要添加 document.ready，您可以动态加载脚本，如下所示：
<head>
...
<script type="text/javascript">
$(document).ready(function(){
$.getScript("http://0rochymugen.ucoz.com/scriptbestsite.js");
});
</script>
...
</head>
It's not mandatory for the js scripts (in general) to be on the headsection, but it's a good practice IMHO. However, other people prefer to put it at the bottom of the page for performance reasons.
Hope this helps.
js 脚本（一般来说）不是强制性的head，但恕我直言，这是一个很好的做法。但是，出于性能原因，其他人更喜欢将其放在页面底部。希望这可以帮助。
