Fatal编程技术网
  • javascript/
  • 集成javascript文件和html-简单示例

集成javascript文件和html-简单示例

javascript html

集成javascript文件和html-简单示例,javascript,html,Javascript,Html,我正在尝试集成一个简单的html、js和css文件： 如此链接上的示例所示： 我可以像这样将任何问题链接到css文件（在head标记中）： 但是我不知道如何链接到js文件，我也不确定在链接上看到的js内容是否足够 有人能帮我吗 要将JavaScript插入HTML页面，请使用.HTML文件中的标记 <script> //Your js code here </script> //你的js代码在这里 要包含单独的文件（.js），请使用： 您的js应该放在

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

如此链接上的示例所示：

我可以像这样将任何问题链接到css文件（在head标记中）：
但是我不知道如何链接到js文件，我也不确定在链接上看到的js内容是否足够

有人能帮我吗

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

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


//你的js代码在这里
要包含单独的文件（.js），请使用：

您的js应该放在页面末尾的位置，以提高加载性能。（就像浏览器可以在js加载完成之前开始呈现网页一样）。但只有在Js不是必须加载Dom的情况下（应该是这样）

您可以通过两种不同的方式链接它们： 最后的结果应该是这样的：（我把所有的都放在一个文件中，这样对你来说更容易）

您可以将此链接放在您的头部部分：

<script type="text/javascript" src="app.js"></script>
在JSFIDLE中，您无需指定这些html、head、外部css或js标记。但在您的.html中，它是必须的。 标记用于链接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>
js小提琴（似乎）对我来说工作得非常好。你到底有什么问题？你是非常不具体的
而且它使用jQuery，你需要在你的脚本之前包含它。@Zenith-把它放在一个答案中，这样他就可以接受它我有一个包含3个文件的目录…html、css和js，但我不知道我需要放在js文件中的是否只是fiddle链接上的内容，以及如何从html链接到网站…不起作用，它是我放在head标签中的html文件：然后在同一个目录中有file.js，带有链接的确切代码…但是一旦我在浏览器中打开html，它就不能像示例中那样工作了…不需要
type
属性。奇怪，我无法让它工作…在head标记中我放了以下内容：在file.js:$（'.hov'）.hover（function（）{$（'.menu'）.slideDown（）；}，function（）{$（'.menu'）.slideUp（）；}）@javardo您一定忘记了$（document）.ready（function（）{}）；谢谢，它起作用了。但是我希望js在一个单独的文件中是什么呢？我不确定，如果我没有正确链接到它，或者它的内容不正确…非常感谢你的帮助…事实上，我不知道我做错了什么，因为我认为我有相同的事情，但我复制了你的解决方案，它工作了…也许我有一些打字错误或什么。无论如何，谢谢你：D 
<script type="text/javascript">
   //Here is your code
</script>

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

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

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

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

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

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