title: Difference between jquery $('#my_id') and document.getElementById('my_id')?
body: <p>I tought $('#my_id1') was the same thing as document.getElementById('my_id1'). But it is parently not. What is the difference?</p>
  
  <pre><code>(function( $ ) {
    $.fn.simple_hide_function = function() {
    var $t = this;
    $t.hide();
    };
  })( jQuery );
  
  $(window).load(function () {
  var $div1 = $('#my_id1');
  var $div2 = document.getElementById('my_id2');
  $div1.simple_hide_function(); // this is working
  $div2.simple_hide_function(); // but this is not working
  });
  </code></pre>
  
  <p><strong>Adding example to make it more clear:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="my_id1" style="height:100px;background:#f00"&gt;div1&lt;/div&gt;
  &lt;div id="my_id2" style="height:100px;background:#f00"&gt;div2&lt;/div&gt;
  
  
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  (function( $ ) {
    $.fn.simple_hide_function = function() {
    var $t = this;
    $t.hide();
    };
  })( jQuery );
  
  $(window).load(function () {
  var $div1 = $('#my_id1');
  var $div2 = document.getElementById('my_id2');
  $div1.simple_hide_function();
  $div2.simple_hide_function();
  });
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>