Question

在以下函数中，id作为第一个参数传递 jQuery $（id）令我困惑，因为它没有parens或＃。
什么是$（id）完成？此外，什么是这个短函数的等效本机JavaScript替代品？

function swapColor(id, color) {
  $(id).css("background-color", color); 
}

Answer 1

id是传递给swapColor函数的参数。它必须是string，并且必须包含选择器标记 - 在此特定情况下 - hash sign # ，才能正常工作。

function swapColor(id, color) {
  $(id).css("background-color", color);
}

swapColor('#box', 'blue')

#box {
  height: 100px;
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='box'></div>

Answer 2

连接＃：

function swapColor(id, color) {
      $("#"+id).css("background-color", color); 
    }

Answer 3

您可以在许多区域重复使用相同的功能，并动态传递要定位的元素的id并更改颜色。如，

swapColor("#btn", "#cececece");

然而，另一种方法是将函数硬连线到特定类型（或ID或类名），然后更改该类型。这样做的缺点是，

要么功能本身都硬连线只能在那个特定的地方工作，
- 案例
- 事件
- 元素
或者即使您可以从其他任何地方获取要执行的功能，也只会更改具有该特定ID的元素的颜色。同样注意，在HTML中，让多个元素定位同一个ID是违法的。

还有一件事，您没有编写事件处理程序 - 单击处理程序或事件处理程序，因此允许动态ID在许多方面都很有用，因为它允许您运行该函数任何元素。

您需要预先#来选择...

是的，但是看看，如果你传递了一个选定的类，你的代码也会有效。因此，即使您将函数声明更改为以下内容，它仍然可以正常工作，

function swapColor(elementSelector, color) {
    $(elementSelector).css("background-color", color); 
}

/* Valid use cases
 * 1. #btn
 * 2. .btn
 * 3. button
 */

这就是使这个函数比下一个更好的情况，

function swapColor(color) {
   $("#myElement").css("background-color", color); 
}

我希望这能澄清一些基本的地下概念。

Answer 4

这几乎是本机javascript中的等价物。但是，您只能使用IDS。

function swapColor(id, color) {
   document.getElementById(id).style.backgroundColor = color;
}

Answer 5

您必须使用选择器（id（＃），class（。），tag）或者您可以传递元素本身：

let element = document.getElementById('element');
$(element).css('background-color', 'tomato');

当id作为函数的第一个参数传递时，jQuery $（id）完成了什么？

5 个答案: