Javascript jquery:“$（this）”到底是什么意思？

我有一个程序，效果很好。 看

代码如下：

<div id="round"></div>

<style>
#round{
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
left: 400px;
top: 200px;
background-color: #e1e1e1;
}
</style>

<script src="jquery.js"></script>
<script src="jquery.easing.1.3.js"></script>
<script>
$(document).ready(function(){
    $("#round").click(function(){
        setInterval(function(){
            $("#round").animate(
                {height: 250,
                width: 150,
                top:150,
                left: 425},
                {duration: 300}
                ).
            animate(
                {height: 200,
                width: 200,
                top:200,
                left: 400},
                {duration: 300}
            );
        }, 0);
    });
});
</script>

换成这个，就不行了

$(document).ready(function(){
    $("#round").click(function(){
        setInterval(function(){
            $(this).animate(
                {height: 250,
                width: 150,
                top:150,
                left: 425},
                {duration: 300}
                ).
            animate(
                {height: 200,
                width: 200,
                top:200,
                left: 400},
                {duration: 300}
            );
        }, 0);
    });
});

$这是上下文相关的。您输入的每个[anonymous，在本例中为]函数，$this的值都会发生变化。例如：

$('#round').click(function(){
    alert($(this).attr('id')) // alerts round
    setInterval(function(){
        alert($(this).attr('id')) // alerts undefined
    });
});

这是对调用当前函数的成员的引用

然后，您可以将它包装在jquery函数$中以选择它，就像选择另一个选择器一样

因此setInterval调用匿名函数，因此它不会被可引用成员调用，因此它默认为window对象

将此上下文保存在变量中，然后像这样在内部使用它

$(document).ready(function(){
    $("#round").click(function(){
        var clicked = this;   //<----store the click context outside setInterval
        setInterval(function(){
            $(clicked).animate(  //<----------use it here
                {height: 250,
                width: 150,
                top:150,
                left: 425},
                {duration: 300}
                ).
            animate(
                {height: 200,
                width: 200,
                top:200,
                left: 400},
                {duration: 300}
            );
        }, 0);
    });
});

---

因为您使用的回调函数是由setInterval在不同的上下文中激发的

您可以通过将“this”复制到其他变量来处理此问题，例如：

var that = this:

和回拨

$(that).animate...

---

在jQuery绑定的事件函数内部，它引用正在操作的集合中的当前DOM元素。因为它是一个DOM元素，所以像$this这样将它传递给jQ使其成为一个jQuery集合，这样您就可以对它执行更多的jQuery操作

但是，在修改后的非工作代码中，您将其移动到了一个新的匿名函数中。在该函数内部，它现在指的是新的作用域

在执行函数之前，您需要获得对此的引用：

$(document).ready(function(){
    $("#round").click(function(){
        var jQuerizedElement = $( this );
        setInterval(function(){
            jQuerizedElement.animate(
                {height: 250,
                width: 150,
                top:150,
                left: 425},
                {duration: 300}
                ).
            animate(
                {height: 200,
                width: 200,
                top:200,
                left: 400},
                {duration: 300}
            );
        }, 0);
    });
});

---

这基本上与上下文相关。当你说$this时，如果这是一个dom元素，它会给你一个与这个dom元素相关联的jquery对象。

如果我理解得很好，那么$this似乎就是被触发的节点

---

例如，当您在按钮上有一个单击事件时。在事件的回调中，您可以使用$this来表示按钮的节点…

请参见@andyb:有趣的是，我们只是在寻找那个帖子…不确定这是否是它，但您正在调用另一个函数setInterval。你能在setIntervalfunction$this中传递$this吗{…记录在案，不是$this，而是这个。$只是在jQuery对象中包装或尝试引用。添加得好。这很重要。请注意，jondavidjohn和我给出了相同的解决方案，但他选择在self中只保存对这个的引用，而我选择存储对jQuery对象的引用n jQuerizeElement。在这种情况下，两者都可以。

$(document).ready(function(){
    $("#round").click(function(){
        var jQuerizedElement = $( this );
        setInterval(function(){
            jQuerizedElement.animate(
                {height: 250,
                width: 150,
                top:150,
                left: 425},
                {duration: 300}
                ).
            animate(
                {height: 200,
                width: 200,
                top:200,
                left: 400},
                {duration: 300}
            );
        }, 0);
    });
});