Question

好的，这听起来非常令人印象深刻。（它可能是）我是一个非常新手的程序员，所以请耐心等待。

我正在尝试将一个简单的jQuery文件链接到我的HTML文件，但我似乎无法使其工作。在查看了这个琐碎问题的先前答案之后，我意识到我缺少关键的代码行，例如（这只是一个例子）

<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"></script>

同样，我知道我听起来非常愚蠢。

这是我到目前为止所拥有的：

<!DOCTYPE html>
<html>
<head>
    <title></title> 
    <link rel="stylesheet" type="text/css" href="firststuffcss.css"/>
    </script>  
</head>
<body>
<div id="green"></div>
<div id="blue"></div>
</body>

我的jQuery代码如下：

$(document).ready(function() {
$('#green').fadeOut(1000);
});

有人可以告诉我如何将jQuery文件链接到HTML文件吗？我知道这个问题被问了500次，但由于某些原因我无法做到这一点。非常感谢你！抱歉让你因我的无能而畏缩。

Answer 1

只需将初始jquery加载添加到样式表下方的标题中即可。您希望在加载jquery脚本之前加载任何css（将来）。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>     
  <script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script>
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  <style type='text/css'>
    #green {width: 150px; height: 150px; background: green; }
  </style>
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(document).ready(function() {
$('#green').fadeOut(1000);
});

});//]]>  
</script>
</head>
<body>
  <div id="green"></div>

</body>

请注意，在使用脚本调用的任何部分（$）之前加载jquery 。

希望有所帮助！

这是你的小提琴： http://jsfiddle.net/2633c1em/

Answer 2

首先，强制包含 jQuery库。您可以通过几种方式在html中链接jQuery代码：

<!DOCTYPE html>
<html>
<head>
    <title></title> 
    <link rel="stylesheet" type="text/css" href="firststuffcss.css"/> 
    <!-- Mandatory to include -->
    <script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
    <div id="green"></div>
    <div id="blue"></div>
</body> 
</html>

这是您整合代码的方法：

方法1（在页脚中）

<!DOCTYPE html>
<html>
<head>
    <title></title> 
    <link rel="stylesheet" type="text/css" href="firststuffcss.css"/> 
    <!-- Mandatory to include -->
    <script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
    <div id="green"></div>
    <div id="blue"></div>

<script>
$(document).ready(function() {
    $('#green').fadeOut(1000);
});
</script>
</body> 
</html>

方法2（在标题中）

<!DOCTYPE html>
<html>
<head>
    <title></title> 
    <link rel="stylesheet" type="text/css" href="firststuffcss.css"/> 
    <!-- Mandatory to include -->
    <script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>
    $(document).ready(function() {
        $('#green').fadeOut(1000);
    });
    </script>
</head>
<body>
    <div id="green"></div>
    <div id="blue"></div>
</body> 
</html>

方法3（来自外部文件）假设您有一个包含代码的custom.js文件：

$(document).ready(function() {
    $('#green').fadeOut(1000);
});

这是你可以添加外部js文件的方法

<!DOCTYPE html>
<html>
<head>
    <title></title> 
    <link rel="stylesheet" type="text/css" href="firststuffcss.css"/> 
    <!-- Mandatory to include -->
    <script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="PATH_OF_JS_FILE/custom.js"></script>
</head>
<body>
    <div id="green"></div>
    <div id="blue"></div>
</body> 
</html>

更新：路径示例

- Project Directory
--- CSS
--- CSS/style.css
--- JS
--- JS/custom.js
--- index.php | index.html

url: http://www.yourproject.com
js path: http://www.yourproject.com/JS/custom.js

Answer 3

将您的脚本标记放在标题部分，如

<head>
    <script type="text/javascript" src="your jquery file name "></script>
</head>

文件名，如load.js

将JQuery文件链接到HTML

3 个答案: