我是第一次尝试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 错误吗?如果是这样,正确的方法是什么?
PRoblem 是,你在 JSFiddle 中的代码是在页面上加载时执行的。相反,在您的代码中,执行发生在尚未加载 HTML 元素时,因为它在HEAD
中,因此像.darkmask
这样的选择器实际上指的是......无。
解决方案是使用:
$(document).ready(
function()
{
... your code here
}
为了确保它在页面加载并准备就绪时执行,所有 HTML 元素都在那里,因此 JQuery 选择器可以对某些内容进行操作。
执行代码时是否有任何 HTML 元素?
尝试:
$(function () { // this function executes when the page loads
alert(x);
// put your code here
});
整个代码包装在下面:
$(document).ready(function() {
//ALL CODE GOES HERE
});
代码包装在:
$(function() {
.... Your code here ...
});
这意味着您的代码在加载 DOM 树后执行。
你确实需要将 jQuery 代码包装在 ready 函数中,如下所示:
$(document).ready(function(){
// put your code here.
});
还要确保你的脚本标签有type="text/javascript"作为属性,否则它不会作为javascript运行。