在今天写一个canvas的小程序时,才发现这两者是不一样的。
直接用alert()来显示这两个方法倒底获得的是什么。代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="css/index.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
</head>
<body>
<div class="warp">
<canvas id=""></canvas>
</div>
<script>
var canvas_=$("#");
alert(canvas_);
alert(document.getElementById(""));
var _2d=canvas_.getContext("2d");
var _img=new Image();
_img.src="images/Boston-III-48px.png";
_2d.drawImage(_img,0,0);
</script>
</body>
</html>
两个alert()分别显示为:[object Object]和[object HTMLCanvasElement]。从这里,不难看出,$("#")并没有像我预想的那样。再用firebug调试看一下,
$("#")和document.getElementById("")倒底是什么内容。调试结果如下:
$("#") [canvas#]
document.getElementById("") canvas#
想必,看到这里,不用我说,大家也会想到结果了。
实际上,$("#")[0]等同于 document.getElementById("")