jQuery中 this 关键字的使用小记。

有一种情况：当你想给某个DOM元素添加一个样式，当经过一段时间后，你又准备移除改样式。

jQuery代码如下：

         

(function ($) {
        $("#demoid").on("click", function () {
            $(this).addClass("clicked");
            setTimeout(function () {
                $(this).removeClass("clicked");
            },1000)
        })
    })(jQuery)

但是，上面的代码在经过1s后 id为 demo的DOM元素“”并没有移除类 " clicked"。

原因出自两次使用的同一个 $ ( this ) 不是代表的同一个DOM元素。看下面的例子：

<a href="#" id="test" οnclick="clicked(this);">TEST</a>
  
 function clicked(it) {
            alert(it.id);        //test
            alert(this.id)       //undefined
            alert(this===window) //ture
        }

为什么this===window 为 ture呢？

在传统的javascript的onevent事件中，this引用的是接收并处理事件的DOM元素，所以在

setTimeout(function () {
    $(this).removeClass("clicked");
},1000)

中，当调用 $ ( this ). removeClass ( "clicked" ) 时，这时 $ ( this ) 引用的是处理事件的DOM元素对象 windows ，不是 id 为 demo 的DOM元素。所以不能移除 类 " clicked "