Javascript using $ notation and keyword “this” usage

Question

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.

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?

<script type="text/javascript">
function select1_onchange()
{
    $('Button1').style.display = (this.value == "No" ? 'block' : 'none');
    $('OptionsBox').style.display = (this.value == "Yes" ? 'block' : 'none');
}
</script>

2) Second thing is that in code above, keyword this seems to refer to the object calling the script, meanwhile in the current context javascript interprets this and the window object. Which makes this code invalid. Should I replace this.value with $('Button1').value or document.getElementById('Button1') (or document.getElementsByName('Button1')[0] in this particular case since the developer used name attribute instead of id )? Which one would be more efficient? Or another option - should I pass keyword this to the function and then replace this with the input variable?

<script type="text/javascript">
function select1_onchange(mySelect)
{
    $('Button1').style.display = (mySelect.value == "No" ? 'block' : 'none');
    $('OptionsBox').style.display = (mySelect.value == "Yes" ? 'block' : 'none');
}
</script>

and call it as:

<select name="select1" onchange="select1_onchange(this)">
<option selected value="">Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>

What would be some pros and cons of choosing either method?

Answer 1

Someone probably created their own little function, something like

var $ = function(id) {
    return document.getElementById(id);
}

$('Button1').style.display = 'none';

jQuery is written somewhat the same way, in plain javascript, as it's just a library of convenient "helper functions" .
To check if jQuery is present, one can do typeof jQuery , which should return "function"

When you attach an inline event handler, you can pass arguments

 <select name="select1" onchange="select1_onchange('hello kitty')"> <option>1</option> <option>2</option> </select> <script> function select1_onchange(something) { alert(something); // "hello kitty" } </script> 

Passing this instead of a string, gives a reference to an element, in most cases it would be the window , so it's not really something that is commonly done

 <select name="select1" onchange="select1_onchange(this)"> <option>1</option> <option>2</option> </select> <script> function select1_onchange(something) { alert(this); // [object Window] } </script> 

These days, addEventListener should be used instead, which automatically sets the this value inside the callback to the bound element.

 <select name="select1" id="select1"> <option>1</option> <option>2</option> </select> <script> document.getElementById('select1').addEventListener('change', function() { alert(this.id); // "select1" }, false); </script> 

Answer 2

1) jQuery is only a javascript library: it's still javascript. jQuery's api is exposed through the "jQuery" object that has the "$" variable as an alias.

2) The keyword "this" in javascript refers to the parent scope, so the scope of the function in the case of the example provided above.