JavaScript中的$()函数是什么作用？

Question

在下面的例子中，$() 函数是用来做什么的？

function test(){
    var b=$('btn1');
    eval(b);
}

- odiseh

---

在Javascript中，'$'只是另一个用于命名变量或函数的字符，就像'_'或'q'一样。 - ndim

我不明白你为什么选择了Matteis的回答作为正确答案。你的问题是“$函数在JavaScript中是做什么的？”，这意味着你想知道该函数的作用……不是吗？然而，你将一个类似于“$是JS函数还是我正在处理JS框架/库？”的问题选为正确答案。我的回答很好，非常通用，但我认为最完整的答案是Vassallo发布的那个。 - vfn

Answer 1

$()方法不是JavaScript语言的一部分。它通常在JavaScript框架中定义，例如jQuery和Prototype，作为DOM选择器。

有趣的是，直到2009年12月，ECMAScript规范仍然声明：

“美元符号（$）和下划线（_）可以出现在标识符的任何位置。美元符号仅用于机械生成的代码。”（Source）

然而，这个“美元符号用于机械生成的代码”的提示已经从current ECMAScript specification（ECMA 262 - 第5版/2009年12月）中删除。

---

然而，最初的问题可能是指jQuery、Prototype等流行DOM选择器。以下是一些jQuery示例：

$('*');         /* This selector is a wild card method and will select all 
                   elements in a document. */

$('#id');       /* This selector selects an element with the given ID. */

$('.class');    /* The class selector will gather all elements in the 
                   document with the given class name. */

$('element');   /* This selector will collect all elements in a document with 
                   the given tag name i.e. table, ul, li, a etc. */

您可能希望查看以下文章以获取更多示例：

• jQuery选择器和示例

- Daniel Vassallo

---

这是不正确的。$() 函数是原生的纯 JavaScript。https://dev59.com/AXI95IYBdhLWcg3www2Y - user10398534

Answer 2

这不是ECMAScript(JavaScript)的一部分，它只是你某个库定义的函数。通常是jQuery或PrototypeJS。

- Luca Matteis

---

这是不正确的。$() 函数是原生的纯 JavaScript。https://dev59.com/AXI95IYBdhLWcg3www2Y - user10398534

Answer 3

回答你的问题，这个函数返回指定ID的DOM对象。

例如，如果你在HTML中有以下内容：

<div id="thisIsMyDivId">This is some content</div>

您可以使用以下方法获取DIV元素：

var myDiv = $('thisIsMyDivId');

这个函数的想法是替代使用document.getElementById来实现相同的功能。

并且......重复了这里每个人已经做过的事情......它不是JS原生函数，它在一些框架（Prototype和jQuery AFAIK）中实现。

- vfn

---

这是错误的，因为您期望 MooTools 或 Prototype 已覆盖了 $ 函数。如果我说 window.$ = function(){alert('foo!');return null;} 这会改变结果，对吗？此外，jQuery 在 ID（即 $('#id')）之前需要一个 #，并返回它本身（jQuery），而不是 DOM 元素本身（尽管可以通过 jQuery 返回的属性访问到它，例如 $('#id')[0]，如果有结果的话）。 - Dan Beam

嗨，丹，你似乎有点困惑。请看一下以下链接，这样我们就能在同一个页面上了：http://mootools.net/docs/core/Element/Element http://prototypejs.org/api/utility/dollar 当你确定自己在做什么时，请只投反对票。如果您对JS框架的文档理解有任何疑问或需要帮助，请告诉我。我的示例不是jQuery示例。我知道jQuery使用的语法，以及其他框架的语法，你呢？如果不知道，我放在这里的链接会帮助你。干杯！ - vfn

这确实是一个本地函数。 - user10398534

@user10398534，那不是真的。这些函数只在浏览器的开发工具中可用。请参见此答案 https://dev59.com/gWEh5IYBdhLWcg3wlEVq#22244912 Crome文档中有一个警告说明这种差异 https://developers.google.com/web/tools/chrome-devtools/console/utilities - vfn

Answer 4

我认为你正在处理一个框架。 大多数框架都包含 $ 函数，用于从选择器或 DOM 对象生成自定义对象。

- Pepijn

---

这是不正确的。https://dev59.com/AXI95IYBdhLWcg3www2Y - user10398534

Answer 5

这不是JS内置函数，而是原型函数
http://www.prototypejs.org/api/utility/dollar-dollar

- Adir

---

他们询问的是 $ 而不是 $$，在 mootools 中也存在这个功能（http://mootools.net/docs/core/Element/Element#dollar）。 - Dan Beam

这是不正确的。https://dev59.com/AXI95IYBdhLWcg3www2Y - user10398534

Answer 6

$符号不是JavaScript的一部分，它是JavaScript框架（可能是jQuery）的一部分

更多细节请查看this文章

- Hannoun Yassir

---

为了让它更清晰，$只是一个变量名，就像如果你有var b=A('btn1');一样。大多数JS库仅使用$，因为不太可能发生冲突，它也很显眼。 - Svend

如果使用类似于 $（'btn1'） 的方式，那就不是 jQuery。jQuery 应该使用 $('#btn1')。 - ceejayoz

这是不正确的。https://dev59.com/AXI95IYBdhLWcg3www2Y - user10398534

Answer 7

所提供的答案根本不正确。

在这张图片中（拍摄于Chrome的about:blank标签页上），您可以清楚地看到没有jQuery。而且，鉴于文档是空白的，也没有PrototypeJS。与所有其他答案相反，这是一个本地JavaScript函数，可用于任何网站。

下图显示了函数定义。

ƒ $(selector, [startNode]) { [Command Line API] }

如果这还不够令人信服，这是来自jQuery的函数定义：

ƒ (a,b) {return new n.fn.init(a,b)}

这是PrototypeJS中的函数。

function $(element) {
    if (arguments.length > 1) {
      for (var i = 0, elements = [], length = arguments.length; i < length; i++)
        elements.push($(arguments[i]));
      return elements;
    }

    if (Object.isString(element))
      element = document.getElementById(element);
    return Element.extend(element);
  }

我不同意这段代码已经得到了适当的优化，我肯定会这样写

function $(element) {
    if (arguments.length > 1) {
        let elements = [];
        for (let i in arguments) elements.push($(arguments[i]));
        return elements;
        //or simply `return arguments;` without the loop and extra variable
    }
    return Object.isString(element) && (e = document.getElementById(element)), Element.extend(element)
}

- user10398534

---

不是这样的。这些功能只在浏览器的开发工具中可用。请参考此答案：https://dev59.com/gWEh5IYBdhLWcg3wlEVq#22244912。Chrome文档中有警告说明这种差异：https://developers.google.com/web/tools/chrome-devtools/console/utilities。 - vfn