通過document獲取的對象得到的是DOM對象，而Jquery通過$獲取的對象得到的是Jquery對象，兩者之間存在區別的。DOM對象才能使用DOM中的方法，jQuery對象是不可以用DOM中的方法。比如DOM對象能調用getContext('2d')獲取上下文，而Jquery對象不行，必須轉換成DOM對象才行。那么兩者之間怎么進行轉換呢？
一、Jquery對象轉換成DOM對象
Jquery對象是一個數組對象，可以通過下標獲取，如：
var jqueryObj = $('#objId'); //得到Jquery對象
var domObj = jqueryObj[0]; //通過下標得到DOM對象，jqueryObj[0]等同於jqueryObj.get(0)
二、DOM對象轉換成Jquery對象
DOM對象只需要用$()將其包含起來即可，如：
var domObj = document.getElementById('objId'); //得到DOM對象
var jqueryObj = $(domObj); //轉換成Jquery對象
注：document或Jquery中通過className或TagName獲取的數組對象，應該通過循環逐個轉換。
實例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="../js/jquery-2.1.4.js"></script>
<title></title>
</head>
<body>
<div id="div1" name="testDiv"></div>
<div id="div2" name="testDiv"></div>
<div id="div3" name="testDiv"></div>
</body>
<script>
console.log($('#div1')); //得到的是JQuery對象
//等同於
var div1Obj = document.getElementById('div1'); //得到的是DOM對象
console.log($(div1Obj));
console.log($('#div1')[0]);
//等同於
console.log($('#div1').get(0));
//等同於
console.log(div1Obj);
var divArray = document.getElementsByTagName('div');
console.log(divArray);
console.log($(divArray));
console.log($('div'));
for(var index in divArray){
if(index<=divArray.length){
console.log(divArray[index]);
}
}
//等同於
for(var index=0;index<divArray.length;index++){
console.log(divArray[index]);
}
//等同於
$('div').each(function(){
console.log(this);
});
</script>
</html>