jquery:"$(this)"究竟是什么意思？

Question

我有一个程序,它运作良好.见这里.

这是代码:

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

但是当我将"#round"改为"this"时.它不会起作用.为什么？(实际上它可以工作,但是当我把它们放入setInterval()时,它将无法工作)

$(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);
    });
});

改为"这个",它将无法正常工作.

$(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);
    });
});

Answer 1

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

然后你可以将它包装在jquery函数中$()以选择它,就像你将另一个选择器一样.

因此,setInterval调用匿名函数使其不会被引用成员调用,因此默认为该window对象.

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

$(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);
    });
});

Answer 2

在jQuery绑定事件函数内部,this指的是正在操作的集合中的当前DOM元素.因为它是一个DOM元素,所以将它传递给jQ $( this )使它成为一个jQuery集合,这样你就可以为它做更多的jQuery.

但是,在修改后的非工作代码中,您将其移动到新的匿名函数中.在该函数内部,this现在指的是新范围.

您需要this在函数之前获得引用:

$(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);
    });
});

Answer 3

$(this)是上下文敏感的。您输入的每个 [anonymous, in this case] 函数的值都会发生$(this)变化。例如：

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