Question

我看到这个片段由三部分组成：

有html。有jquery。和css。

我试图将它组合成一个像这样的文件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Hello World</title>
<style>
#content {
    max-width: 400px;
    margin: auto;
    left: 1%;
    right: 1%;
    position: absolute;
}
</style>
<script>
$(function() {
    $(window).on('resize', function resize()  {
        $(window).off('resize', resize);
        setTimeout(function () {
            var content = $('#content');
            var top = (window.innerHeight - content.height()) / 2;
            content.css('top', Math.max(0, top) + 'px');
            $(window).on('resize', resize);
        }, 50);
    }).resize();
});
</script>
</head>

<body>
<div id="content" style="background:#f00">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</body>

</html>

它似乎不起作用。似乎jquery，它是一个库，需要“引用”。但是如何？

我该怎么做才能解决这个问题？

Answer 1

你必须在head中包含jQuery，例如：

<script
          src="https://code.jquery.com/jquery-3.1.1.js"
          integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
          crossorigin="anonymous">
</script>

Answer 2

尝试将其置于头部：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Answer 3

您必须使用jquery库来运行JQuery脚本。

在脚本

之前添加与此类似的CDN

 <script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

或只是

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" data-pagespeed-orig-type="text/javascript"></script>

您可以更改版本

还最好将所有Javascript / Jquery放在结尾'body'标记之前的底部。这将最后加载它并帮助提高页面加载速度。

实际上，始终建议将Javascript和CSS加载为异步加载的单独文件（.js / .css）。除了上面应该（根据Google页面Insight）将CSS包含在样式标记中的内容。

Answer 4

您必须包含Jquery库才能在您的网页上运行jquery脚本。只需将这行代码放在HTML头标记中即可。

＆＃13;

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

＆＃13;

或者，如果您使用的是localhost，那么首先必须从here下载jquery库，并将该jquery文件作为外部脚本放在HTML头标记中。

我们究竟应该如何将这3个片段部分组合成一个html文件

4 个答案: