Jquery对象与DOM对象之间的转换

通过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>