持续更新-jQuery发微-关于jQuery和JS原生混用的方法

关于$(" ")一直单纯的理解为获取一个对象，但是对于对象的具体类型却没有在意，知道某天碰到了一个问题。

背景：想要在<canvas>上面画一个矩形。

<div style="text-align: center">
       <canvas id="canvas1" width="1200px" height="600px" style="border: 2px solid sandybrown"></canvas>
       <br/>
       <button id="button1">点击画矩形</button>
 </div>
   <script>
       $(document).ready(function(){
           $("#button1").click(function(){
               var a=$("#canvas1").getContext("2d");
               a.fillStyle="red";
               a.fillRect(0,0,170,60);
       });
       });

   </script>

点击按钮发现没反应，调试了一下，给出的Error是：Uncaught TypeError: Object [object Object] has no method 'getContext'，说该对象不存在该方法，瞬间，神经紧绷，因为刚看了getContext("2d")是<canvas>自带的方法。

于是用原生的JS写了一遍

var can=document.getElementById("canvas1");
var rec=can.getContext("2d");
rec.fillStyle="#FF0000";

rec.fillRect(0,0,150,75);

效果出来了。

那么原因究竟出现在哪？其实$("").+jQuery方法，但是getContext("2d")是JS原生方法，所以需要做一下改变，将$("").变成原生对象。

同时，jQuery选择不是单一选择器，而是多选，选择以后的对象并不是一般的object，而是一个array object，（自己可以测试一下）所以可以改成$("#canvas1")[0].getContext("2d")，问题迎刃而解！