前端 - this 和 $(this) 的区别

本文目录：

1. this；
2. $(this)；
3. this 和 $(this) 的互转。

this 和 $(this) 都是指当前对象，不同的是 this 指的是 HTML DOM 对象（即普通的 JavaScript 对象），而 $(this) 指的是 jQuery 对象（包装 DOM 对象后产生的对象）。

下面来看两个例子。

this

---

代码：

    
        
        
    
    

    
        

            divdivdivdivdiv
        
        
        
    

效果演示：

this.gif

结果分析：
通过控制台，我们可以看出 this 其实是一个 DOM 对象，其里面是一系列的属性和方法，接下来我们来具体看一下。

attributes.png

首先可以看到，在 attributes 这个属性里又有许多的属性，其中就有我们刚才设置的 id、title 和 class 三个属性，因此，我们可以通过 attributes 这个属性来设置元素的 id、title 等属性。打开 id 这个属性，看看里面又是什么？

id.png

可以看到，id 里面又有许多的属性，其中就包括 id 的值。

再来看一下其他属性：

其他属性.png

最后是我们刚才给元素设置的 onclick() 方法：

onclick().png

$(this)

---

代码：

    
        
        
    
    

    
        

            divdivdivdivdiv
        
        
        
    

效果演示：

$(this).gif

通过控制台，我们可以看出 $(this) 其实是一个数组，也是一个 jQuery 对象（别忘了，在 JavaScript 中，万物皆对象），数组里面是一个个的元素，接下来我们重点看第 0 个元素的内容。

$(this).png

打开第 0 个元素：

第 0 个元素.gif

仔细看看，是不是感觉有点熟悉？没错，第 0 个元素的内容和上面通过 this 输出的内容一模一样，这正好印证了文章开头说的：jQuery 对象是对 DOM 对象的包装，jQuery 对象将 DOM 对象包装成一个数组对象，其中第 0 个元素的内容就是 DOM 对象。

this 和 $(this) 的互转

---

this 转 $(this) ：用 $() 将 DOM 对象给包起来，如：

var li = document.getElementById('li');
 $('li');```；
**$(this) 转 this** ：在 jQuery 对象后面加上 [0]，如：$('li')[0];；