jquery中的 $("#jb51")與document.getElementById("jb51") 的區(qū)別
更新時間：2011年07月26日 19:30:02 作者：
以前沒注意過，認(rèn)為jquery 中的 $("#jb51") 與 document.getElementById("jb51") 是一回事，指的是同一個東西。
在今天寫一個canvas的小程序時，才發(fā)現(xiàn)這兩者是不一樣的。
直接用alert()來顯示這兩個方法倒底獲得的是什么。代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<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>
</head>
<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>
</html>
兩個alert()分別顯示為：[object Object]和[object HTMLCanvasElement]。從這里，不難看出，$("#jb51")并沒有像我預(yù)想的那樣。再用firebug調(diào)試看一下，
$("#jb51")和document.getElementById("jb51")倒底是什么內(nèi)容。調(diào)試結(jié)果如下：
$("#jb51") [canvas#jb51]
document.getElementById("jb51") canvas#jb51
想必，看到這里，不用我說，大家也會想到結(jié)果了。
實際上，$("#jb51")[0]等同于 document.getElementById("jb51")
直接用alert()來顯示這兩個方法倒底獲得的是什么。代碼如下：
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<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>
</head>
<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>
</html>
兩個alert()分別顯示為：[object Object]和[object HTMLCanvasElement]。從這里，不難看出，$("#jb51")并沒有像我預(yù)想的那樣。再用firebug調(diào)試看一下，
$("#jb51")和document.getElementById("jb51")倒底是什么內(nèi)容。調(diào)試結(jié)果如下：
復(fù)制代碼 代碼如下:
$("#jb51") [canvas#jb51]
document.getElementById("jb51") canvas#jb51
想必，看到這里，不用我說，大家也會想到結(jié)果了。
實際上，$("#jb51")[0]等同于 document.getElementById("jb51")
相關(guān)文章
jQuery實現(xiàn)頁碼跳轉(zhuǎn)式動態(tài)數(shù)據(jù)分頁
本片文章教給大家用jQuery實現(xiàn)頁碼跳轉(zhuǎn)式動態(tài)數(shù)據(jù)分頁，效果非常好而且沒有頁面刷新，需要的朋友學(xué)習(xí)下吧。2017-12-12
這篇文章主要為大家詳細(xì)介紹了jquery實現(xiàn)輪播圖特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-04-04
這篇文章主要給大家分享了一段使用jquery實現(xiàn)點擊頁面計算點擊次數(shù)的代碼，非常實用，有需要的小伙伴參考下。2015-01-01
div層的放大與縮小想必大家已不是那么陌生了吧，接下來為大家詳細(xì)介紹下使用jQuery實現(xiàn)，感興趣的各位可以參考下哈，希望可以幫助到你2013-03-03
jQuery實現(xiàn)鼠標(biāo)點擊彈出漸變層的方法
這篇文章主要介紹了jQuery實現(xiàn)鼠標(biāo)點擊彈出漸變層的方法,jQuery是當(dāng)下最具人氣的JavaScript庫,需要的朋友可以參考下2015-07-07
jQuery輕松實現(xiàn)表格的隔行變色和點擊行變色的實例代碼
下面小編就為大家?guī)硪黄猨Query輕松實現(xiàn)表格的隔行變色和點擊行變色的實例代碼。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-05-05
由于Html里只有input元素?fù)碛衜axlength屬性，而textarea沒有,所以以前對于文本框字?jǐn)?shù)限制做了很多方案的解決，但是都不太完美。2009-11-11
這篇文章主要介紹了jquery mobile 移動web(5)的相關(guān)資料,需要的朋友可以參考下2015-12-12
jQuery實現(xiàn)從身份證號中獲取出生日期和性別的方法分析
這篇文章主要介紹了jQuery實現(xiàn)從身份證號中獲取出生日期和性別的方法,結(jié)合實例形式分析了jQuery數(shù)學(xué)運(yùn)算與字符串操作相關(guān)技巧,需要的朋友可以參考下2016-02-02
jquery tools 系列 scrollable學(xué)習(xí)
今天繼續(xù)jquery tools六大功能之第三功能 scrollable的學(xué)習(xí)。一如既往，首先給出操作的html代碼 此html代碼修改自jquery tools官方網(wǎng)站demo代碼2009-09-09