Question

我第一次尝试使用jQuery，而且我不确定如何让它正常工作。我在开场<head>标记附近添加了以下代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>

接下来是以下jQuery代码：

<script>
    $('.darkmask > img').hover(function(){
             $(this).parent().toggleClass('darkmask-hover');
    })
</script>

不幸的是，当我在浏览器或JSFiddle中尝试时，此代码不起作用。但是，when I set JSFiddle's framework to load jQuery itself，而不是通过我自己的代码加载jQuery，动画正常工作。

我加载jQuery错了吗？如果是这样，那么正确的方法是什么？

Answer 1

PRoblem是，你在JSFiddle中的代码是在页面加载时执行的。在您的代码中，执行是在HTML元素尚未加载时发生的，因为它位于HEAD中，因此像.darkmask这样的选择器实际上是指......没有。

解决方案是使用：

$(document).ready(
function()
{
 ... your code here
}

为了确保在页面加载和准备好时执行它，所有HTML元素都在那里，因此JQuery选择器可以对某些东西进行操作。

Answer 2

将您的代码包装在：

$(function() {
    .... Your code here ...

});

这意味着您的代码在加载DOM树后执行。

Answer 3

代码执行时是否有HTML元素？

尝试：

$(function () { // this function executes when the page loads
   alert(x);
   // put your code here
});

Answer 4

将您的整个代码包装在以下内容中：

$(document).ready(function() {

    //ALL CODE GOES HERE

});