1

我正在尝试集成一个简单的 html、js 和 css 文件：

喜欢这个链接上的这个例子：jsfiddle.net/MHDhT

我可以像这样（在head标签中）链接到css文件没有问题：

<link rel="stylesheet" href="style.css" />

但是我不知道如何链接到 js 文件，而且我不确定是否只有我可以在该链接上看到的 js 内容就足够了？

有人能帮我吗 ？

4

3 回答 3

2

您的 js 应放置在页面末尾以提高加载性能。（就像浏览器可以在 js 完成加载之前开始渲染网页一样）。但只有当你的 Js 不是强制加载 Dom 时（应该是这种情况）

您可以通过两种不同的方式链接它们：

<script type="text/javascript">
   //Here is your code
</script>

或者

<script type="text/javascript" src="url_of_your_js.js"></script>

编辑

一定要包括jquery：

<head>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

如果您的代码需要 dom 准备好执行，您应该使用

$(document).ready(function() {
  //This is executed when dom is ready
});

最终结果应该是这样的：（我把所有的都放在 1 个文件中，这样对你来说更容易）

<html>
    <head>
        <style type"text/css">
              .menu { 
              background: #3B6997;
              font-weight: bold;
              padding: 10px;
              width: 300px;
              display:none;
              }
              .menu a {
              color: white;
              }
              .hov {
              width: 300px;   
              }

    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.hov').hover(function() {
                $('.menu').slideDown();
            }, function() {
                $('.menu').slideUp();
            });
        });
    </script>
</head>
<body>
    <div class="hov">
        <a href="#">Activate Menu vv</a>

        <ul class="menu">
            <li>
                <a href="#">Item</a>
            </li>
        </ul>
    </div>
</body>
</html>

如果你想把你的 js 放在单独的文件中，比如说“app.js”，把它放在这个文件中：

$(document).ready(function() {
    $('.hov').hover(function() {
        $('.menu').slideDown();
    }, function() {
        $('.menu').slideUp();
    });
});

您可以通过将其放在头部来链接它：

<script type="text/javascript" src="app.js"></script>
于 2013-05-22T15:11:13.260 回答
1

在 JSFiddle 中，您无需指定这些 html、head、external css 或 js 标签。但在你的 .html 中是必须的。script标签用于链接 javascript 文件。

<html>
        <head>
        <link rel="stylesheet" href="/folderpath/style.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="/folderpath/filename.js"></script>
        </head>
        <body></body>
</html>
于 2013-05-22T15:12:11.840 回答
0

要将 JavaScript 插入 HTML 页面，请使用<script>.html 文件中的标记

<script>
   //Your js code here 
</script>

要包含单独的文件 (.js)，请使用：

<script type="text/javascript" src="mycode.js"></script>
于 2013-05-22T15:08:53.763 回答