2010-09-10 6 views
18

Was ist der Unterschied zwischen $(this) und this in jQuery, und warum geben sie manchmal das gleiche Ergebnis und andere Zeiten verhalten sich anders?

+1

Wann geben sie "* das gleiche Ergebnis *"? –

Antwort

26

$(this) Wraps this mit der jQuery-Funktionalität.

Zum Beispiel dieser Code würde fehlschlagen:

$('.someDiv').onClick(function(){ 
    // this refers to the DOM element so the following line would fail 
    this.fadeOut(100); 
}); 

wir this in jQuery So wickeln:

$('.someDiv').onClick(function(){ 
    // wrap this in jQuery so we can use jQuery fadeOut 
    $(this).fadeOut(100); 
}); 
4

Wenn in Ihrem aktuellen Kontext wenn die this kein Objekt jQuery ist, können Sie machen es ist ein jQuery-Element, indem es um $() gewickelt wird. Wenn Ihr Element bereits ein Ergebnis des jQuery-Ausdrucks ist, ist das this in diesem Fall bereits ein jQuery-Objekt. In diesem Fall funktionieren beide ähnlich.

10

$(this) schmückt jedes Objekt this Punkte mit den jQuery-Funktionen. Der typische Anwendungsfall ist, dass this auf ein DOM-Element (z. B. <div>) verweist. Mit $(this) können Sie dann alle jQuery-API-Funktionen für diese <div> verwenden.

Wenn this bereits auf ein jQuery-Objekt verweist - in der Regel ein jQuery-dekoriertes DOM-Objekt - dann hat das Aufrufen von $(this) keinen Effekt, da es bereits eingerichtet ist.

2

this ist eine JavaScript-Variable, die immer dann erstellt wird, wenn Sie sich in einer Funktion befinden, die an ein Objekt angehängt ist. In diesen Fällen bezieht sich this auf dieses Objekt.

$(this) gibt ein jQuery-Objekt zurück, mit dem Sie jQuery-Funktionen aufrufen können, gilt aber nur für this.

Zum Beispiel, wenn Sie einen Click-Handler für alle Anker gesetzt:

$('a').click(function() { 
    console.log(this.href) ; 
}) ; 

dann die this, bezieht sich auf den Anker, der das Click-Ereignis (Funktion) angebracht ist.

3

für Sie ein bisschen besser zu verstehen, holen Sie sich einen Debugger von Schokoladenriegel besorgt, wie Google Chrome und das tun ..

$('a').click(function(){ 
    console.log(this); //DO 
    console.log($(this)); //JO 
}); 

dies wird Ihnen zeigen, was der Unterschied ist :)

0

In JavaScript bezieht sich immer auf den "Eigentümer" der auszuführenden Funktion. Die Verwendung von $ (this) umschließt nur den Eigentümer, so dass alle jQuery-Operationen erweitert und für ihn verfügbar sind.

Bedenken Sie:

$links = $('#content a'); 

$links.click(function() { 
    link = this; 
    $link = $(this); //jQuery wrapped object. 

    alert(link.getAttribute('href'));   
    alert($link.attr('href')); //we can use the attr() function from jQuery 
}); 

Sie in der Regel die gleichen Ergebnisse liefern, da der Besitzer der gleiche ist, nur, wenn sie von jQuery wickelte es mit den jQuery-Funktionen arbeiten kann.

1

$ (this) == das? interessant.

Dies darf nicht durch DOM-Ereignis passieren.

Verwandte Themen