jQuery selectors confusing

I'd appreciate if someone also points me to theory sources so i can grasp it better.

Suppose i have the following HTML:

<ul>
  <li>1</li>
</ul>

<ul>
  <li>2</li>
</ul>

and this JavaScript code:

alert($("ul li:eq(0)").length);

alert($("ul").find("li:eq(0)").length);

alert($("ul").find("li").eq(0).length);

I get 1,2,1 as output. I can understand why I got 1 in the last case but why is the 1 and 2nd line of JavaScript code giving me different outputs.

fiddle : https://jsfiddle.net/ishansoni22/pntz6kfx/