如何包含来自 CDN 的 JQuery？答案

【问题标题】：How do I include JQuery from a CDN?如何包含来自 CDN 的 JQuery？
【发布时间】：2020-09-09 04:55:42
【问题描述】：

我是 JQuery 的新手，想知道如何引用 google 的 CDN 以使我的 JQuery 文件能够正常工作。我的脚本没有运行，因为它不会引用 JQuery CDN。我在下面要做的就是在将鼠标悬停在图像上时调整图像的大小。这真的不应该太难，但我不知道如何引用 JQuery CDN。任何帮助深表感谢。谢谢！

<!DOCTYPE html>
<html>
<head>
<title>Image Resize</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script>
var ht = $("img").height(),
    wd = $("img").width(),
    mult = 1.5; 

$("img").on('mouseenter', function () {
    $(this).animate({
        height: ht * mult,
        width: wd * mult
    }, 500);
});
$("img").on('mouseleave', function () {
    $(this).animate({
        height: ht,
        width: wd
    }, 500);
})
</script>

</head>


<body>

<img src="https://cdn1.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/512/social_google_box.png" width="200" height="200" border="5" alt="" style="border-color:red" />

</body>



</html>

【问题讨论】：

您已经很好地引用了 CDN - 问题是因为您的代码不在 document.ready 事件处理程序中 - $(function() { /* your JS code here */ });
所以我只是在我的函数之前插入它？然后将我的函数放入其中并用将其全部关闭？
你们是最棒的，只是想通了。很抱歉成为这样的菜鸟。我真的在努力学习。太感谢了！ @RoryMcCrossan 和 dsg

标签： jquery cdn

【解决方案1】：

JQuery 已正确包含，但您必须等到文档完全加载后才能调用它。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
    $(document).ready(function() { // this waits until the document is fully loaded
    // Put custom logic here    
});
</script>

此外，应仅将外部 CSS 包含在 <head> 部分中。出于性能原因，JavaScript 文件通常包含在 <body> 的底部。

【讨论】：

【解决方案2】：

只需将您的 Jquery 代码放入这样的块中 -

<script>
$( document ).ready(function() {
  // Jquery Code here
});

</script>

您需要这样做，因为当您使用像 $("img").height() 这样的代码时，您不希望 Jquery 代码在浏览器呈现 <img> 标记之前执行。

您可以在此处阅读更多相关信息 - http://learn.jquery.com/using-jquery-core/document-ready/

【讨论】：

【解决方案3】：

要让 jQuery 工作，您需要使用 $(document).ready() 等待文档完全加载，然后再执行 jQuery 代码。这是正确的代码：

  <!DOCTYPE html>
    <html>
        <head>
            <title>Image Resize</title>
            <script src="https://pagecdn.io/lib/jquery/3.2.1/jquery.min.js"></script>
            <script>
                window.jQuery || document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"><\/script>');
            </script>

            <script>

            $(document).ready( function() {
                var ht = $("img").height(),
                    wd = $("img").width(),
                    mult = 1.5; 

                $("img").on('mouseenter', function () {
                    $(this).animate({
                        height: ht * mult,
                        width: wd * mult
                    }, 500);
                });

                $("img").on('mouseleave', function () {
                    $(this).animate({
                        height: ht,
                        width: wd
                    }, 500);
                });
            });

            </script>
        </head>
        <body>
            <img src="https://cdn1.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/512/social_google_box.png" width="200" height="200" border="5" alt="" style="border-color:red" />
        </body>
    </html>

这里我指定了 2 个 CDN 以确保加载 jQuery，以防 Google CDN 在您所在的国家/地区被阻止。

【讨论】：