Можно ли смешивать обычный JavaScript с jQuery?

Например, могу ли я взять этот script (из учебника 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>

и смешать этот JavaScript с jQuery document.ready вместо того, чтобы полагаться на onload?

Ответ 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);
  }
});

Ответ 2

Почему MichalBE получает downvoted? Он прав - использование jQuery (или любой библиотеки) просто для запуска функции при загрузке страницы является чрезмерным, что может стоить людям деньги на мобильных соединениях и замедляет работу пользователя. Если исходный плакат не хочет использовать onload в теге body (и он совершенно не подходит), добавьте его после функции draw():

if (draw) window.onload = draw;

Или это, Саймона Уиллисона, если вы хотите выполнить более одной функции:

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}

Ответ 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>

Ответ 4

Конечно, вы можете, но зачем это делать? Вы должны включить пару тегов <script></script>, которые ссылаются на веб-страницу jQuery, то есть: <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> , Затем вы загрузите объект весь объект jQuery, чтобы использовать одну единственную функцию, а поскольку jQuery - это библиотека JavaScript, на которую потребуется время загрузки компьютера, она будет выполнить медленнее, чем просто JavaScript.

Ответ 5

Вы можете, но знать о возвращаемых типах с функциями jQuery. jQuery не всегда будет использовать тот же самый тип объекта JavaScript, хотя обычно они возвращают подклассы того, что вы ожидаете получить от аналогичной функции JavaScript.

Ответ 6

Вы можете использовать

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

Обратите внимание, что после кода остальная часть вашего кода должна быть jQuery Я думаю