写在前面

在使用jQuery库的时候，在事件回调函数的内部总有关于$(this) 和 this 之间关系的疑问，搞明白才发现原来自己总是将jQuery 和 DOM 各自的 API 和对象类型搞混，以下是$(this) 和 this的详细介绍

1. 在哪里会碰到

this是在函数中会用到的，而且只有在非箭头函数中才会有this，并且this指的是调用当前函数的对象。关于this可见JS三座大山之this的详解，$(this)是在引用jQuery库时会见到。

2. 二者区别与联系

  1. $('.siteModuleClass').on('click','li', function(e){
  2.    console.log(this); //1
  3.    console.log(this.title); //2
  4.    console.log($(this)); //3 
  5.    console.log($(this)[0]); //4 
  6.    console.log($(this)[0].title); //5
  7.    console.log($('.siteGroupList .groupLast')) //6
  8.    console.log($('.siteGroupList .groupLast')[0]) //7
  9. })

输出结果如下图所示：

this.JPG

可以看到，this就是当前点击到的DOM节点对象，是一个DOM对象，而$(this)返回的是一个经过jQuery封装this后的jQuery的this对象，该jQuery对象的第一个属性值就是对应的DOM节。

而且对于通过jQuery获取到的页面元素也都是通过对象的第一个属性值即可获取到对应的DOM节点。

而且$(this)相比于普通的jQuery对象，只是少了个preObject对象属性而已。

3. 总结

因此总结来说，若是用this，则是DOM对象，则要使用DOM节点提供的API，若是使用$(this)，则变成了jQuery对象，要使用相应的jQuery的API来进行操作。

二者的转换关系为

  1. $(this)[0] === this

也是DOM对象和jQuery对象间的关系