jquery document.getElementById("laike") 的区别

2010年11月30日作者：

在今天写一个canvas的小程序时，才发现这两者是不一样的。

直接用alert()来显示这两个方法倒底获得的是什么。代码如下：

 
<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>laike</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="laike"></canvas> 
</div> 
<script> 
var canvas_laike=$("#laike"); 
alert(canvas_laike); 
alert(document.getElementById("laike")); 
var laike_2d=canvas_laike.getContext("2d"); 
var laike_img=new Image(); 
laike_img.src="images/Boston-III-48px.png"; 
laike_2d.drawImage(laike_img,0,0); 
</script> 
</body> 
</html>

两个alert()分别显示为：[object Object]和[object HTMLCanvasElement]。从这里，不难看出，$("#laike")并没有像我预想的那样。再用firebug调试看一下，
$("#laike")和document.getElementById("laike")倒底是什么内容。调试结果如下：

 
$("#laike") [canvas#laike] 
document.getElementById("laike") canvas#laike

想必，看到这里，不用我说，大家也会想到结果了。
实际上，$("#laike")[0]等同于 document.getElementById("laike")