In writing a canvas program today, we find that the two are not the same.
Use alert () directly to show what the two methods are getting. The code is as follows:
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title>jb51</title>
<link href= "Css/index.css" rel= "stylesheet" type= "Text/css" >
<script src= "Js/jquery-1.4.2.min.js" type= "Text/javascript" ></script>
<body>
<div class= "Warp" >
<canvas id= "jb51" ></canvas>
</div>
<script>
var canvas_jb51=$ ("#jb51");
alert (CANVAS_JB51);
Alert (document.getElementById ("jb51"));
var Jb51_2d=canvas_jb51.getcontext ("2d");
var jb51_img=new Image ();
Jb51_img.src= "Images/boston-iii-48px.png";
Jb51_2d.drawimage (jb51_img,0,0);
</script>
</body>
Two alert () is displayed separately: [Object] and [object Htmlcanvaselement]. From here, it's not hard to see that $ ("#jb51") is not as I expected. Again with Firebug debugging look,
$ ("#jb51") and document.getElementById ("jb51") what is the bottom of the content. Debug results are as follows:
Copy Code code as follows:
$ ("#jb51") [canvas#jb51]
document.getElementById ("jb51") canvas#jb51
Presumably, see here, do not need me to say, everyone will think of the result.
In fact, $ ("#jb51") [0] is equivalent to document.getElementById ("jb51")
