this.css("color","green"); (而不是$(this)) - 为什么它有效？

Question

我对这和$(这个)之间的区别感到困惑.看一下,我发现这个简洁的解释对我有用了一段时间,但后来我在本教程中遇到了以下内容:

$.fn.greenify = function() {
    this.css( "color", "green" );
    return this;
}

该教程解释说:"请注意,使用.css(),另一种方法,我们使用它,而不是$(this).这是因为我们的greenify函数是与.css()相同的对象的一部分"

不幸的是,我并没有完全遵循.我很困惑你如何在DOM对象上使用JQuery方法而不是在DOM对象的JQuery包装器上.任何人可能有任何解释将非常有帮助.

澄清:我的兴趣不在于它和$(这个)之间的区别 - 我理解前者属于JavaScript而且(粗略地说)是指全局对象,包含对象或调用DOm元素,具体取决于具体情况而后者(再次,一般来说)指的是被JQuery包装的元素被采取行动.我对为什么this.css()在上面的上下文中工作感兴趣.

我赞成的回应(道歉,我无法从编辑屏幕上看到被访者的姓名)很好地解决了这个问题,尽管我暂不接受这个作为收集更多观点的答案.

Answer 1

this 在jQuery插件的范围内是jQuery对象集合,而不是DOM节点,因此可以访问jQuery方法.

但是,如果您迭代该jQuery对象/集合,请使用each(),例如:

$.fn.greenify = function() {
    this.each(function(){
        this.css('color', 'green';
    });
    return this;
}

this 是我们迭代的集合中元素的DOM节点,因此会导致语法错误,并且需要使用jQuery进行显式包装才能工作:

$.fn.greenify = function() {
    this.each(function(){
        $(this).css('color', 'green';
    });
    return this;
}