Can regular JavaScript be mixed with jQuery

Question

For example  can I take this script  from mozilla tutorial     lt html gt    lt head gt     lt script type  application javascript  gt      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                    lt  script gt    lt  head gt    lt body onload  draw     gt      lt canvas id  canvas  width  150  height  150  gt  lt  canvas gt    lt  body gt   lt  html gt    and mix this JavaScript with jQuery s document ready instead of relying on onload

User · Answer

Or no JavaScript load function at all      lt html gt   lt head gt  lt  head gt   lt body gt       lt canvas id  canvas  width  150  height  150  gt  lt  canvas gt   lt  body gt   lt script type  text javascript  gt      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                        lt  script gt   lt  html gt

User · Answer

Of course you can  but why do this  You have to include a  lt script gt  lt  script gt pair of tags that link to the jQuery web page  i e    lt script type  text javascript  src  http   code jquery com jquery-latest min js  gt  lt  script gt    Then you will load the whole jQuery object just 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

User · Answer

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

User · Answer

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   if  draw  window onload   draw    Or this  by Simon Willison  if you want more than one function to be executed   function addLoadEvent func        var oldonload   window onload      if  typeof window onload     function             window onload   func        else           window onload   function                 if  oldonload                    oldonload                              func

User · Answer

Yes  they re both JavaScript  you can use whichever functions are appropriate for the situation   In this case you can just put the code in a document ready handler  like this     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

[javascript] Can regular JavaScript be mixed with jQuery?

Examples related to javascript

Examples related to jquery