Question

我正在研究其他人的javascript代码，并且我运行了一些我以前从未见过的东西。如果有人可以为我阐明它，我将非常感激。我过去使用过javascript，但我绝不是专家。

1）使用美元符号（$）表示法从javascript中访问某些控件，就像JQuery一样。我有点困惑，因为脚本语言明确指定为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对象。这使得此代码无效。在此特定情况下，我应该将this.value替换为$('Button1').value或document.getElementById('Button1')（或document.getElementsByName（＆＃39; Button1＆＃39;）[0]，因为开发人员使用了{{1} }而不是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>

选择这两种方法有什么优点和缺点？

Answer 1

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

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

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

在简单的javascript中，jQuery的编写方式有点相同，因为它只是一个方便的“辅助函数”库。要检查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值设置为绑定元素。

<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”是指父范围，因此在上面提供的示例的情况下函数的范围。

Javascript使用$表示法和关键字＆＃34;这＆＃34;用法

2 个答案: