なぜ$（this）セレクタがこの関数で何をしているのかを指摘していますか？

Question

私が混乱しているのは、$（this）が '#navigation_blob'オブジェクトではなく#navigation aオブジェクトを指している理由です。明確にするために、$（これ）が何をするのか知っています。私はちょうどこの例のスコープについて混乱しています。

ありがとうございます！それが呼び出されたコンテキストに

$('#navigation a').hover(function() { 
    // Mouse over function 
    $('#navigation_blob').animate(
     {width: $(this).width() + 10, left: $(this).position().left}, 
     {duration: 'slow', easing: 'easeOutElastic', queue: false} 
    ); 
}, function() { 
    // Mouse out function 
    var leftPosition = $('#navigation li:first a').position().left; 
    $('#navigation_blob').animate(
     {width:'hide'}, 
     {duration:'slow', easing: 'easeOutCirc', queue:false} 
    ).animate({left: leftPosition}, 'slow'); 
}); 

Answer 1

thisポイント： "忍者にjQueryの初心者" から撮影

。 jQueryは、検索した要素をコンテキストとして渡します。したがって、thisは'#navigation a'を指します。

$(this)は、DOM要素（this参照）を受け取り、jQueryオブジェクトにラップします。

内側$('#navigation_blob').animate()thisは、'navigation_blob'を指します。

Answer 2

変数名がバインドされているかを決定劇中のいくつかの作品があります。

1. JSは、関数のスコープとグローバルスコープを持っているので、コードをグローバルに実行されたときにのみ、新しい変数を取得します、またはvarキーワードを使用して変数を定義すると、関数定義の内部で実行されます。それ以外の場合、関数が定義されると、変数名は関数が定義されているスコープ内に存在するものにバインドされます。
2. 他の変数名と異なり、thisは特別です。それは決して縛られることはありません。これは、関数が定義されているスコープが有効になるため、重要です。
3. イベントリスナーでは、あたかもイベントリスナーが要素のメソッドであるかのように、一部のブラウザでリスナーが登録された要素にthisをバインドします。 IE（バージョン8まで）はこのバインディングを実行しませんでした。その結果、グローバルオブジェクト（window）にバインドされました。他の任意のフリー関数（オブジェクトにバインドされていない関数）が呼び出されたときと同じです。私が知る限り、どの標準もどちらの行動にも対処しません。関連する規格は、このようなDOMレベル2

#navigation_blob上 animateへの呼び出しは新しい関数を定義含まない

ためECMAScript Language Binding付録として、DOMイベント規格である必要があり、そうthisの範囲には、イベントハンドラであります。 jQueryは非IEバインディング動作を強制し、thisが#navigation aを参照していることを保証します。