如何从 CDN 中包含 JQuery？
[英]How do I include JQuery from a CDN?
问题描述
I am new to JQuery and am wondering how I reference google's CDN in order to allow my JQuery file to work.
我是 JQuery 的新手，想知道如何引用 google 的 CDN 以允许我的 JQuery 文件工作。 My script is not running because it will not reference the JQuery CDN.我的脚本没有运行，因为它不会引用 JQuery CDN。 All I am trying to do below is to have my image be resized when I hover my mouse over it.我在下面要做的就是在将鼠标悬停在图像上时调整图像大小。 It really should not be too hard, but I cannot figure out how to reference the JQuery CDN.这真的不应该太难，但我不知道如何引用 JQuery CDN。 Any help is much appreciated.任何帮助深表感谢。 Thanks!谢谢！
<!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>
3 个解决方案
解决方案1
2 2018-12-14 18:29:20
JQuery is included properly, but you have wait until the document is fully loaded before you call it. 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>
Also, should only put external CSS includes in the <head> section.此外，应该只将外部 CSS 包含在<head>部分中。 Generally JavaScript files are included at the bottom of the <body> for performance reasons.出于性能原因，通常 JavaScript 文件包含在<body>的底部。
解决方案2
1 2015-04-24 16:29:32
Just put your Jquery Code in to a block like this -只需将您的 Jquery 代码放入这样的块中 -
<script>
$( document ).ready(function() {
// Jquery Code here
});
</script>
You need to do this because when you use code like $("img").height() , you don't want the Jquery code to execute before the browser has rendered the <img> tag.您需要这样做是因为当您使用像$("img").height()这样的代码时，您不希望在浏览器呈现<img>标记之前执行 Jquery 代码。
You can read more about this here - http://learn.jquery.com/using-jquery-core/document-ready/您可以在此处阅读更多相关信息 - http://learn.jquery.com/using-jquery-core/document-ready/
解决方案3
1 2019-10-30 14:08:50
For jQuery to work, You need to use $(document).ready() to wait for the document to fully load before executing the jQuery code.要使 jQuery 工作，您需要使用$(document).ready()在执行 jQuery 代码之前等待文档完全加载。 Here is the correct code:这是正确的代码：
<!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>
Here I have specified 2 CDNs to make sure jQuery gets loaded in case Google CDN is blocked in the country of your origin.在这里，我指定了 2 个 CDN，以确保在您所在国家/地区阻止 Google CDN 时加载 jQuery。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.