title: Javascript using $ notation and keyword "this" usage
body: <p>I am working on someone else's javascript code and I run in some things I have not seen used before. I would really appreciate it if someone could shed some light on it for me. 
  I have used javascript in the past but I am not by any means an expert.</p>
  
  <p>1) Some controls are accessed from within javascript using dollar sign ($) notation, just like JQuery. I am slightly puzzled as the scripting language is clearly specified as javascript, not JQuery and there are no JQuery libraries in the project. I wa wondering if that was a common practice?</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function select1_onchange()
  {
      $('Button1').style.display = (this.value == "No" ? 'block' : 'none');
      $('OptionsBox').style.display = (this.value == "Yes" ? 'block' : 'none');
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>2) Second thing is that in code above, keyword <code>this</code> seems to refer to the object calling the script, meanwhile in the current context javascript interprets <code>this</code> and the <code>window</code> object. Which makes this code invalid.
  Should I replace <code>this.value</code> with <code>$('Button1').value</code> or <code>document.getElementById('Button1')</code> (or document.getElementsByName('Button1')[0] in this particular case since the developer used <code>name</code> attribute instead of <code>id</code>)? Which one would be more efficient? Or another option - should I pass keyword <code>this</code> to the function and then replace <code>this</code> with the input variable?</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function select1_onchange(mySelect)
  {
      $('Button1').style.display = (mySelect.value == "No" ? 'block' : 'none');
      $('OptionsBox').style.display = (mySelect.value == "Yes" ? 'block' : 'none');
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>and call it as:</p>
  
  <pre><code>&lt;select name="select1" onchange="select1_onchange(this)"&gt;
  &lt;option selected value=""&gt;Select&lt;/option&gt;
  &lt;option value="Yes"&gt;Yes&lt;/option&gt;
  &lt;option value="No"&gt;No&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>What would be some pros and cons of choosing either method?</p>