本文目录：
- this；
- $(this)；
- this 和 $(this) 的互转。
<code>this</code> 和 <code>$(this)</code> 都是指当前对象，不同的是 <code>this</code> 指的是 HTML DOM 对象（即普通的 JavaScript 对象），而 <code>$(this)</code> 指的是 jQuery 对象（包装 DOM 对象后产生的对象）。
下面来看两个例子。
this
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>this和$(this)的区别</title>
</head>
<style type="text/css">
#div1 {
width: 50px;
height: 20px;
background-color: coral;
color: blue;
font-size: 20px;
}
</style>
<body>
<div id="div1" title="div" class="div">
divdivdivdivdiv
</div>
<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 查找 div1
var div1 = document.getElementById("div1");
// 给 div1 添加点击事件
div1.onclick = function() {
console.dir(this);
}
</script>
</body>
</html>
效果演示：
结果分析：
通过控制台，我们可以看出 <code>this</code> 其实是一个 DOM 对象，其里面是一系列的属性和方法，接下来我们来具体看一下。
首先可以看到，在 <code>attributes</code> 这个属性里又有许多的属性，其中就有我们刚才设置的 <code>id</code>、<code>title</code> 和 <code>class</code> 三个属性，因此，我们可以通过 <code>attributes</code> 这个属性来设置元素的 id、title 等属性。打开 <code>id</code> 这个属性，看看里面又是什么？
可以看到，<code>id</code> 里面又有许多的属性，其中就包括 <code>id</code> 的值。
再来看一下其他属性：
最后是我们刚才给元素设置的 <code>onclick()</code> 方法：
$(this)
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>this和$(this)的区别</title>
</head>
<style type="text/css">
#div1 {
width: 50px;
height: 20px;
background-color: coral;
color: blue;
font-size: 20px;
}
</style>
<body>
<div id="div1" title="div" class="div">
divdivdivdivdiv
</div>
<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 给 div1 添加点击事件
$('#div1').on('click', function() {
console.dir($(this));
})
</script>
</body>
</html>
效果演示：
通过控制台，我们可以看出 <code>$(this)</code> 其实是一个数组，也是一个 jQuery 对象（别忘了，在 JavaScript 中，万物皆对象），数组里面是一个个的元素，接下来我们重点看第 0 个元素的内容。
打开第 0 个元素：
仔细看看，是不是感觉有点熟悉？没错，第 0 个元素的内容和上面通过 <code>this</code> 输出的内容一模一样，这正好印证了文章开头说的：jQuery 对象是对 DOM 对象的包装，jQuery 对象将 DOM 对象包装成一个数组对象，其中第 0 个元素的内容就是 DOM 对象。
this 和 $(this) 的互转
<code>this</code> 转 <code>$(this)</code> ：用 <code>$()</code> 将 DOM 对象给包起来，如：
var li = document.getElementById('li');
$('li');```；
**<code>$(this)</code> 转 <code>this</code>** ：在 jQuery 对象后面加上 <code>[0]</code>，如：<code>$('li')[0];</code>；