Question

例如，我可以使用此脚本（from mozilla tutorial）：

<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>

并将此JavaScript与jQuery的document.ready混合，而不是依赖于onload？

Answer 1

是的，他们 JavaScript，您可以使用适用于该情况的任何功能。

在这种情况下，您可以将代码放在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);
  }
});

Answer 2

为什么MichalBE被投票？他是对的 - 使用jQuery（或任何库）只是为了在页面加载时触发一个函数是过度的，可能会花费人们在移动连接上的钱并减慢用户体验。如果原始海报不想在body标签中使用onload（并且他没有使用），请在draw（）函数之后添加：

if (draw) window.onload = draw;

或者，by 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();
        }
    }
}

Answer 3

或者根本没有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>

Answer 4

当然可以，但为什么这样呢？您必须包含一对链接到jQuery网页的<script></script>标记，即： <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 。然后你将加载 整个jQuery对象 只是为了使用 一个单一的函数 ，因为jQuery是一个JavaScript库这需要时间让计算机上传， 执行速度比JavaScript慢。

Answer 5

你可以，但要注意jQuery函数的返回类型。 jQuery并不总是使用完全相同的JavaScript对象类型，尽管它们通常会返回类似JavaScript函数返回的子类。

Answer 6

您可以使用

jQuery(document).ready(function(){}

请注意，在代码之后，其余代码必须是jQuery 我认为

Answer 7

可以在网页中同时使用Jquery和JavaScript。

重要的是

当DOM加载（即）页面时，将启动Jquery方法已加载

创建动态元素并尝试应用Jquery函数时遇到的一般问题是，它不能用作放在document.ready（）或$（function（））下的Jquery方法..将只调用一次（即，）在页面加载时。

动态元素创建并应用了JQuery的功能不起作用，因为这些元素在加载时不可用。

要解决此问题，请确保在用于创建新元素的方法中编写Jquery方法。

常规JavaScript可以与jQuery混合使用吗？

7 个答案: