title: jQuery Optimization/Best Practices
body: <p>Ok saddle up cowboys, because this is going to be a long one. I have been spending the morning going through some of my old code and I'm left wondering about best practices and optimzation. In order to avoid a ride down subjective lane I'll just post some examples with some hopefully easy to answer questions. I will try to keep the examples very simple for ease of an answer and to decrease the likelihood of mistakes. Here we go:</p>
  
  <h1>1) Assignment vs jQuery Calls</h1>
  
  <p>I understand that when accessing selectors it's generally considered better to assign a selector to a variable rather than make the same call more than once - ex.</p>
  
  <pre><code>$('div#apples').hide();
  $('div#apples').show();
  </code></pre>
  
  <p>vs.</p>
  
  <pre><code>var oranges = $('div#oranges');
  oranges.show();
  oranges.hide();
  </code></pre>
  
  <p>Does this same rule apply when referencing jQuery's <code>$(this)</code>? Ex. A simple bit of script to make some data in a table clickable and customize the link.</p>
  
  <pre><code>$('tr td').each( function() {
      var colNum = $(this).index();
      var rowNum = $(this).parent().index();
      $(this).wrap('&lt;a href="example.com/hello.html?column=' + colNum + '&amp;row=' + rowNum +'"&gt;'); 
  })
  </code></pre>
  
  <p>vs.</p>
  
  <pre><code>$('tr td').each( function() {
      var self = $(this);
      var colNum = self.index()
      var rowNum = self.parent().index()
      self.wrap('&lt;a href="example.com/hello.html?column=' + colNum + '&amp;row=' + rowNum +'"&gt;'); 
  });
  </code></pre>
  
  <h1>2) <code>this</code> vs <code>$(this)</code></h1>
  
  <p>Ok so this next one is something that I have wondered about for a long time but I can't seem to find any information on it. Please excuse my ignorance. When does it make sense to call the vanilla js <code>this</code> as opposed to the jQuery wrapped <code>$(this)</code>? It's my <a href="http://encosia.com/2010/03/30/5-steps-toward-jquery-mastery/" rel="noreferrer">understanding</a> that -</p>
  
  <pre><code>$('button').click(function() {
    alert('Button clicked: ' + $(this).attr('id'));
  });
  </code></pre>
  
  <p>Is much less efficient than accessing the DOM attribute of the vanilla <code>this</code> object like the following -</p>
  
  <pre><code>$('button').click(function() {
    alert('Button clicked: ' + this.id);
  });
  </code></pre>
  
  <p>I understand what is going on there, Im just wondering if there is a rule of thumb to follow when deciding which to use.</p>
  
  <h1>3) Is more specificity always better?</h1>
  
  <p>This one is pretty simple, is it ALWAYS beneficial to be more specific with our selectors? It's easy to see that <code>$('.rowStripeClass')</code> would be much slower than <code>$('#tableDiv.rowStripeClass')</code>, but where do we draw the line? Is <code>$('body div#tableDiv table tbody tr.rowStripeClass')</code> faster still? Any input would be appreciated!</p>
  
  <p>If you've made it this far, thanks for taking a look! If you haven't, :p
  ​</p>