jQuery根本没有加载答案

【问题标题】：jQuery not loading at alljQuery根本没有加载
【发布时间】：2012-08-17 10:31:36
【问题描述】：

我是第一次尝试 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 是否错误？如果是这样，正确的方法是什么？

【问题讨论】：

你用的是哪个导航器？
我已经在 Mac OS 上的 Safari 6.0、Firefox 14.0、Chrome 21.0 和 Opera 12.0 中对其进行了测试（整页包含所有供应商前缀）。
我认为问题不在您的代码中。当你去ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js时，你有没有js？
当然。这就是 Google 托管他们的低延迟 jQuery 文件的地方。
你能解释一下什么不工作吗？

【解决方案1】：

问题是，您在 JSFiddle 中的代码是在页面加载时执行的。相反，在您的代码中，执行发生在 HTML 元素尚未加载时，因为它位于 HEAD 中，所以像 .darkmask 这样的选择器实际上没有引用任何内容。

解决方法是使用：

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

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

【讨论】：

【解决方案2】：

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

试试：

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

【讨论】：

【解决方案3】：

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

$(document).ready(function() {

    //ALL CODE GOES HERE

});

【讨论】：

【解决方案4】：

将您的代码包装在：

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

});

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

【讨论】：

【解决方案5】：

您确实需要将 jQuery 代码包装在 ready 函数中，如下所示：

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

还要确保您的脚本标签具有 type="text/javascript" 作为属性，否则它不会作为 javascript 运行。

【讨论】：