javascript - jQuery根本没有加载

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 中尝试时，此代码不起作用。但是，当我将 JSFiddle 的框架设置为加载 jQuery 本身，而不是通过我自己的代码加载 jQuery 时，动画可以正常工作。

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

score 2 · Accepted Answer

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

解决方案是使用：

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

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

score 0 · Accepted Answer

将您的代码包装在：

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

});

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

score 0 · Accepted Answer

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

尝试：

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

score 0 · Accepted Answer

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

$(document).ready(function() {

    //ALL CODE GOES HERE

});

score 0 · Accepted Answer

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

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

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

5 回答 5