title: How is a jQuery reference saved?
body: <p>I am messing with jQuery and JavaScript prototyping and made this tiny little thing to try and understand how jQ objects can be saved/accessed.</p>
  
  <p>I made a single class that has a single property</p>
  
  <pre><code>var class1 = function(){
      this.div = $('&lt;div class = "test"/&gt;');
  }
  </code></pre>
  
  <p>I then made a few prototype methods to manipulate it, like changing its colour and html values.</p>
  
  <p>Then I made two instances of the class and was able to alter each instance's individual DOM element. </p>
  
  <pre><code>var myDiv1 = new class1().build().colour('green').colour('red');
  
  var myDiv2 = new class1().build().colour('red').doHTML();
  </code></pre>
  
  <p>I was really surprised to see that each class maintained a reference to a different DOM element, even though it was already appended to the <code>&lt;body&gt;</code>. I am wondering how this is actually working. Are there hidden DOM ids that the class or jQuery is keeping a reference to? How does it know which DOM element to manipulate? </p>
  
  <p>Thank you.</p>
  
  <p><a href="http://jsfiddle.net/o2uuevgx/3/" rel="nofollow">http://jsfiddle.net/o2uuevgx/3/</a></p>