jquery - 无法让 JQuery 工作

Question

所以我有这个小提琴http://jsfiddle.net/3QuSm/1/作为下拉列表。

    $(".image-box").mouseover(function() {
    $(".expand-box").show();   
}).mouseout(function() {
    $(".expand-box").hide();
});

这工作得很好，但是当我尝试将它集成到我的应用程序中时，JQuery 不起作用。我是 JQuery 的新手，我真的不知道该放在哪里。我的代码类似于http://pastie.org/8042113。有什么帮助吗？

Answer 1

您需要使用$(document).ready()（或$(window).load()）。

在文档“准备好”之前，无法安全地操作页面。jQuery 会为您检测到这种准备状态。包含在 $( document ).ready() 中的代码只会在页面文档对象模型 (DOM) 准备好执行 JavaScript 代码时运行。包含在 $( window ).load(function() { ... }) 中的代码将在整个页面（图像或 iframe）（而不仅仅是 DOM）准备好后运行。

$(document).ready(function() {
    ... /* Your code here */
});

http://jsfiddle.net/3QuSm/5/

Answer 2

您需要将代码放在readyorload事件中，以便它在页面中的元素创建后运行：

<script>

$(document).ready(function(){

  $(".image-box").mouseover(function() {
    $(".expand-box").show();
    alert("something");
  }).mouseout(function() {
    $(".expand-box").hide();
    alert("something");
  });

});

</script>

当您将代码放入 jsfiddle 时，默认情况下会将其放入load事件中，这就是它在那里工作而不是在您的页面中工作的原因。

Answer 3

您需要等到 DOM 准备好进行操作。
把你的代码放进去document.ready()

这是小提琴：http: //jsfiddle.net/3QuSm/8/

Answer 4

也许 JQuery 没有加载，导航到本地主机中的该页面，查看源代码，如果可以看到代码，打开指向 JQuery 的链接，它已加载。

试试这个看看是否加载了 JQuery。

<script type="text/javascript">
<!--
$(document).ready(function() {
  alert ("JQuery working!");
});
//-->
</script>