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

本文目录：

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>

效果演示：

this.gif

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

attributes.png

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

id.png

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

再来看一下其他属性：

其他属性.png

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

onclick().png

$(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>

效果演示：

$(this).gif

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

$(this).png

打开第 0 个元素：

第 0 个元素.gif

仔细看看，是不是感觉有点熟悉？没错，第 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>；

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

this

$(this)

this 和 $(this) 的互转

推荐阅读更多精彩内容