PHPの世界から来て、このJavaScript（jQueryの選択）を理解するのが難しいです。

Question

時々私はJSオブジェクトを理解するのが難しいです。私は非常に簡単な例を与えます。

<ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
    </ul> 

<script> 

    var myTestSelection = $('ul li').first(); 

    console.log(myTestSelection); //Returns object 
    console.log(myTestSelection[0]); //Returns HTML WHY?????????? 
    console.log($(myTestSelection).eq(0)); 

</script> 

myTestSelectionを出力すると、key => 0およびvalue => objectのオブジェクトが返されます。

myTestSelection [0]を出力すると、<li>Item 1</li>が返されます。WHY？

私は本当にこの動作を理解することができません、それは私のために重要です。誰かが論理的な説明をすることはできますか？答えに専念してくださった皆様、あらかじめお礼を申し上げます。 （英語には申し訳ありません - 母国語ではありません）

Answer 1

これはjQueryについてのもので、ネイティブJavaScriptではありません。あなたが観察する現象は、jQuery APIの設計です。

最初に、jQueryセレクタは要素の配列のようなオブジェクトを一致させることを理解しています。したがって：

console.log(myTestSelection); 

...は、その配列のようなオブジェクトを返します。発見したように、インデックスが付けられているので、[0]は最初に一致した要素を返すので、配列のようになります。あなたに最初の一致した参照へのネイティブリファレンスを返します：

console.log(myTestSelection[0]); 

...それはHTMLを返さない - それはちょうどあなたのコンソールでその方法を示しているだけで、役立つことを試み、要素を示す。実際には要素へのネイティブ参照を返します。

typeof myTestSelection[0] == 'object'; //true - would be 'string' if it was HTML