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> 

但是当我改变“#圆”到“这”。 它不会工作。 为什么? (实际上,它的工作,但是当我把它们放入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); }); }); 

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

那么你可以把它包装在jquery函数$()来select它就像你会另一个select器。

所以setInterval调用一个匿名函数,所以它不被一个可引用的成员调用,所以它默认为window对象。

this上下文保存在一个variables中,然后像这样在内部使用它…

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

在jQuery绑定的事件函数内部, this引用了正在操作的集合中的当前DOM元素。 因为它是一个DOM元素,所以把它传递给j $( this )就像$( this ) ,这使得它成为一个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)是上下文敏感的。 你input的每个[匿名,在这种情况下]函数, $(this)的值都会改变。 例如:

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

这基本上与上下文有关。 当你说$(this)如果这是一个DOM元素,它会给你与这个DOM元素相关的jQuery对象。

因为您正在使用由不同上下文中的setInterval触发的callback函数…

您可以通过将“this”复制到另一个variablesex:

 var that = this: 

并在callback

 $(that).animate... 

如果我理解的很好, $(this)就是触发节点

例如,当你有一个button上的点击事件 。 在事件的callback中,您可以使用$(this)代表button的节点…