Linux 常规 JavaScript 可以与 jQuery 混合使用吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3677140/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can regular JavaScript be mixed with jQuery?
提问by johnny
For example, can I take this script (from mozilla tutorial):
例如，我可以使用这个脚本（来自 mozilla 教程）：
<html>
<head>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
and mix this JavaScript with jQuery's document.ready instead of relying on onload?
并将此 JavaScript 与 jQuery 的 document.ready 混合而不是依赖 onload？
采纳答案by Nick Craver
Yes, they're bothJavaScript, you can use whichever functions are appropriate for the situation.
是的，它们都是JavaScript，您可以使用适合这种情况的任何函数。
In this case you can just put the code in a document.readyhandler, like this:
在这种情况下，您可以将代码放在document.ready处理程序中，如下所示：
$(function() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
});
回答by qqryq
Of course you can, but why do this? You have to include a <script></script>pair of tags that link to the jQuery web page, i.e.:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>. Then you will load the whole jQuery objectjust to use one single function, and because jQuery is a JavaScript library which will take time for the computer to upload, it will execute slower than just JavaScript.
当然可以，但为什么要这样做呢？您必须包含一<script></script>对链接到 jQuery 网页的标签，即：
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>。然后你将加载整个 jQuery 对象只是为了使用一个单一的函数，并且因为 jQuery 是一个 JavaScript 库，需要时间让计算机上传，所以它的执行速度会比 JavaScript 慢。
回答by tagawa
Why is MichalBE getting downvoted? He's right - using jQuery (or any library) just to fire a function on page load is overkill, potentially costing people money on mobile connections and slowing down the user experience. If the original poster doesn't want to use onload in the body tag (and he's quite right not to), add this after the draw() function:
为什么 MichalBE 被否决了？他是对的 - 使用 jQuery（或任何库）只是在页面加载时触发一个函数是矫枉过正的，可能会花费人们在移动连接上的钱并减慢用户体验。如果原始海报不想在 body 标签中使用 onload（他不这样做是完全正确的），请在 draw() 函数之后添加：
if (draw) window.onload = draw;
Or this, by Simon Willison, if you want more than one function to be executed:
或者，如果您想要执行多个函数，则由 Simon Willison 编写：
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
回答by subhaze
Or no JavaScript load function at all...
或者根本没有 JavaScript 加载功能......
<html>
<head></head>
<body>
<canvas id="canvas" width="150" height="150"></canvas>
</body>
<script type="text/javascript">
var draw = function() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
}
draw();
//or self executing...
(function(){
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (50, 50, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (70, 70, 55, 50);
}
})();
</script>
</html>
回答by j.i.h.
You can, but be aware of the return types with jQuery functions. jQuery won't always use the exact same JavaScript object type, although generally they will return subclasses of what you would expect to be returned from a similar JavaScript function.
您可以，但要注意 jQuery 函数的返回类型。jQuery 不会总是使用完全相同的 JavaScript 对象类型，尽管它们通常会返回您期望从类似 JavaScript 函数返回的子类。
回答by KURT C
You could use
你可以用
jQuery(document).ready(function(){}
Note that after the code, the rest of your code will have to be jQuery i think
请注意，在代码之后，我认为其余的代码必须是 jQuery
回答by SuKu
It is possible to use both Jquery and JavaScript in your webpage. The important thing is the
可以在您的网页中同时使用 Jquery 和 JavaScript。重要的是
Jquery method will get initiated when the page loads (i.e.,) when DOM is loaded
Jquery 方法将在页面加载时启动（即，加载 DOM 时）
The general problem faced when creating Dynamic elements and trying to apply the Jquery functions is that it will not work as the Jquery methods put under document.ready() or $(function()).. will get invoked only once (i.e.,) at the time of Page Loading.
创建动态元素并尝试应用 Jquery 函数时面临的一般问题是它不会工作，因为放在 document.ready() 或 $(function()).. 下的 Jquery 方法只会被调用一次（即，）在页面加载时。
The Dynamic Elements created and applied the function of JQuery will not work as these elements are not available at the time of loading.
创建和应用 JQuery 功能的动态元素将无法工作，因为这些元素在加载时不可用。
To resolve this make sure you write the Jquery methods within the method you use to create new element.
要解决此问题，请确保在用于创建新元素的方法中编写 Jquery 方法。
