使用$表示法和关键字“ this”用法的Javascript

Question

我正在处理其他人的javascript代码，并且运行了一些以前从未见过的东西。 如果有人能为我提供一些帮助，我将非常感激。 我过去曾经使用过javascript，但我绝不是专家。

1）就像JQuery一样，可以使用美元符号（$）从JavaScript中访问某些控件。 我有点困惑，因为脚本语言被明确指定为javascript，而不是JQuery，并且项目中没有JQuery库。 我想知道这是否是常见的做法吗？

<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）第二件事是，在上面的代码，关键词this似乎是指调用脚本的对象，同时在目前情况下的JavaScript解释this和window对象。 这使得该代码无效。 在这种特殊情况下，我应该用$('Button1').value还是document.getElementById('Button1') （或document.getElementsByName（'Button1'）[0]）替换this.value ，因为开发人员使用了name属性而不是id ）？ 哪一个效率更高？ 或者另一种选择-我应该通过关键字this给函数，然后替换this与输入变量？

<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>

并将其称为：

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

选择这两种方法的利弊是什么？

Answer 1

有人可能创建了自己的小功能，例如

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

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

jQuery用普通的javascript有点类似的方式编写，因为它只是方便的“ helper functions”库。
要检查jQuery是否存在，可以执行typeof jQuery ，它应该返回"function"

附加内联事件处理程序时，可以传递参数

 <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> 

传递this而不是字符串，将提供对元素的引用，在大多数情况下，该元素将是window ，因此实际上并不是通常要做的事情

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

如今，应该改用addEventListener ，它会自动将回调内的this值设置为bound元素。

 <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只是一个javascript库：它仍然是javascript。 jQuery的api通过具有“ $”变量作为别名的“ jQuery”对象公开。

2）javascript中的关键字“ this”是指父作用域，因此在上面提供的示例的情况下，函数的作用域。