如何将 jquery 放在单独的文件中?

use*_*568 4 html javascript css jquery

我在过去一个小时左右一直在谷歌搜索,但似乎无法找到解决这个问题的方法。我刚刚完成了 Codecademy 的 jQuery 课程,现在正在开发一个项目。由于某种原因,我的代码 jquery 代码将无法工作

jQuery:

$(document).ready(function(){
$("div").css("border", "3px solid red");
$(".storyblocks").mouseenter(function(){
    $(this).animate({
        height: "+= 20px"
        width: "+= 20px"
    });
});

$(".storyblocks").mouseleave(function(){
    $(this).animate({
        height: "-= 20px"
        width: "-= 20px"
    });
});
}); 
Run Code Online (Sandbox Code Playgroud)

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Project Website</title>
<link type = "text/css" rel = "stylesheet" href = "stylesheet.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>

</head>
Run Code Online (Sandbox Code Playgroud)

我添加了$("div").css("border", "3px solid red");检查 div 是否有红色边框,但到目前为止还没有运气。有人说我不需要 $(document).ready,但我不明白为什么不需要。

请帮忙?

Min*_*ing 5

您的 jQuery 无法正常工作的问题与将 jQuery 放在单独的文件中无关,它与一个小语法错误有关:您的 animate 属性之间没有逗号,并且您的 animate 属性是使用不正确的语法。

这是您的代码,但带有必要的逗号以及用于动画属性的正确语法:

http://jsfiddle.net/4xfAZ/2/

逗号在这里:

$(document).ready(function () {

    $("div").css("border", "3px solid red");
    $(".storyblocks").mouseenter(function () {
        $(this).animate({
            height: ($(this).height() + 20) + 'px',
            width: ($(this).width() + 20) + 'px'
        });
    });

    $(".storyblocks").mouseleave(function () {
        $(this).animate({
            height: ($(this).height() - 20) + 'px',
            width: ($(this).width() - 20) + 'px'
        });
    });
});
Run Code Online (Sandbox Code Playgroud)

在高度声明之后、下一个声明之前,需要用逗号分隔。

因为你的 jQuery 出错了,所以它没有做任何事情,这就是为什么你没有看到红色边框:),即使红色边框代码与有问题的代码是分开的。

华泰