DOM对象与jquery对象的相互转换

遇到一个很神奇的事情:

<!--html-->
  <div id="content">
    <a onclick="closeIt(this)" id="close" href="#">点我</a>
  </div>
  <!--javascript-->
  <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
  <script>
    function closeIt(a){
      console.log($(a));
      console.log($(a).parents()[0])
    }
  </script>

输出

image.png

那么问题来了 : $(a)明明是一个jquery对象，怎么就经过了一系列的jquery方法后变成了普通的DOM对象了呢？

1. 首先来看看DOM对象和Jquery对象有什么区别 ， 同样是上面的HTML

<script>
    function closeIt(a){
      console.log($(a));
      console.log(a);
      console.log(document.getElementById('close'));
    }
  </script>

输出：

image.png

总结一下，JQ对象的格式为

w.fn.init [a#close]

• 0: a#close
• length: 1
• _proto_: Object(0)

DOM对象的格式为

<a onclick="closeIt(this)" id="close" href="#">点我</a>

2.JQ对象与DOM对象之间怎么相互转换呢？

• JQ对象转换成DOM对象
  (1)[index]
  (2)get(index)
  能有人会觉得奇怪，怎么是用下标呢，因为 jquery对象就是一个数组对象呀。
• DOM对象转换为JQ对象
  (1)$(DOM对象)

var close=document.getElementById('close');
console.log($(close))    //输出JQ对象

3.揭晓谜底啦！！！

$(a)明明是一个jquery对象，怎么就经过了一系列的jquery方法后变成了普通的DOM对象了呢：
当然是因为 ' [0] ' 把Jq对象转换成了DOM对象呀

4.补充说明

正常情况下，DOM对象直接用JQ对象的方法会报错
例如：$(a).parents()[0].remove()
那为什么有时候又正常呢？
可能是系统发烧了，哈哈 ， 还是按照转换成JQ对象后再它的方法把 ， 不然就算现在没错 ， 迟早都是要错的！！！
附代码

var parentDiv=$(a).parents()[0];
$(parentDiv).remove();