集成javascript文件，简单的例子

integrating javascript file, with simple example

本文关键字：简单 javascript 文件 集成      更新时间：2023-09-26

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

就像这个例子在这个链接:jsfiddle.net/MHDhT

我可以像这样链接到css文件(在head标签中):

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

但我不知道如何链接到js文件，我不确定如果只是有js的内容，我可以看到的链接是足够的吗?

有人能帮帮我吗?

你的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
});

最终的结果应该是这样的:(我把所有的在一个文件中，为您方便)

<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>

在JSFiddle中，您不需要指定这些html，头部，外部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>

要在HTML页面中插入JavaScript，请使用。HTML文件

中的<script>标记。
<script>
   //Your js code here 
</script>

包含一个单独的文件(.js)，使用:

<script type="text/javascript" src="mycode.js"></script>
相关文章：