将JavaScript链接到我的HTML

Linking JavaScript to my HTML

本文关键字：我的 HTML 链接 JavaScript      更新时间：2023-09-26

请帮忙，我是网络设计的新手，想让下面的演示发挥作用，但我的HTML似乎没有链接到我的javascript。请查看下面的代码，演示也可在http://jsfiddle.net/xx9ykonc/我该怎么做，我不明白缺了什么。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<table>
    <tr>
        <td><div>1</div></td>
        <td><div>2</div></td>
        <td><div>3</div></td>
        <td><div>4</div></td>
    </tr>            
</table>
<script>
$('table div')
    .on('mouseenter', function(){
        var div = $(this);
        div.stop(true, true).animate({ 
            margin: -10,
            width: "+=20",
            height: "+=20"
        }, 'fast');
    })
    .on('mouseleave', function(){
        var div = $(this);
        div.stop(true, true).animate({ 
            margin: 0,
            width: "-=20",
            height: "-=20"
        }, 'fast');
    })
</script>
</body>
</html>

您应该通过在html页面的头部添加此脚本来包含jquery

<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script></head>

正如评论中提到的@Rocker1985，您可以将jquery文件链接到HTML，就像您已经链接CSS文件一样。

<head>
  <link rel="stylesheet" type="text/css" href="style1.css">
  <script script src="~/Scripts/jquery-1.10.2.min.js"></script>
  <script script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>
</head>

给出jquery文件的确切路径和版本。

在你的html中，你错过了jquery库链接，只需要附加源链接，它就会工作，你也可以检查下面的

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style1.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<table>
    <tr>
        <td><div>1</div></td>
        <td><div>2</div></td>
        <td><div>3</div></td>
        <td><div>4</div></td>
    </tr>            
</table>
<script>
$('table div')
    .on('mouseenter', function(){
        var div = $(this);
        div.stop(true, true).animate({ 
            margin: -10,
            width: "+=20",
            height: "+=20"
        }, 'fast');
    })
    .on('mouseleave', function(){
        var div = $(this);
        div.stop(true, true).animate({ 
            margin: 0,
            width: "-=20",
            height: "-=20"
        }, 'fast');
    })
</script>
</body>
</html>
相关文章：