2

I know that $("...") is of course defined in jQuery (What is the meaning of "$" sign in JavaScript), and also that some people who don't use jQuery define $ = document.querySelector or $ = document.querySelector.bind(document).

In some cases (Firefox, Chrome), $ seems to be available in the developer console even without loading this library, or without defining $ manually: see the main answer of What is the dollar sign in Javascript, if not jQuery.

Question: can we assume in 2022 that $ is an alias in most browsers for document.querySelector and can we use it directly in our JS code?

I know caniuse.com but here neither https://caniuse.com/?search=%24 nor https://caniuse.com/?search=dollar helped.

Example: open a html file containing:

<html>
<head></head>
<body>
<div id="a">Hello world</div>
</body>
</html>

Open the developer console and do $('#a'): it works.

Basj
  • 41,386
  • 99
  • 383
  • 673
  • 4
    No, you cannot assume that. The `$` character is a valid character in any identifier; it's no more special than `B`. – Pointy Jun 03 '22 at 13:10
  • `In some cases (Firefox, Chrome), $ seems to be available in the developer console even without loading this library` I would guess that depends heavily on the currently loaded website; this is in no way some kind of default –  Jun 03 '22 at 13:11
  • @ChrisG No no, see my edit (example at the end): `$` is directly available in the Chrome dev console even with a website with no library loaded. – Basj Jun 03 '22 at 13:14
  • @ChrisG Try this: 1) Save this in `test.html`: `
    Hello world
    `. 2) Open it in Chrome 3) Open dev console 4) Run `$('#a')`: it matches the div.     – Basj Jun 03 '22 at 13:16
  • @Pointy I know this of course, but try my last comment in the dev console. – Basj Jun 03 '22 at 13:16
  • I did. This seems to be a Chrome dev console only thing, so the answer is still "no", you absolutely cannot rely on that. And your –  Jun 03 '22 at 13:16
  • The developer console uses the currently loaded page as part of its context. If you're looking at a page that has loaded jQuery, then `$` will refer to the library. If Chrome or some other browser explicitly makes it available as a reference to *something* then that's their decision (which I personally would consider a bad decision). Note that `.querySelectorAll()` is in very many ways not at all the same thing as the jQuery main entry point. – Pointy Jun 03 '22 at 13:51
  • @Pointy Yes but of course I was speaking about opening the dev console in the context of a page *without* jquery loaded, such as `test.html`: `
    Hello world
    `.     – Basj Jun 03 '22 at 13:56
  • 1
    See https://developer.chrome.com/docs/devtools/console/utilities/#querySelector-function: *"`$(selector)` returns the reference to the first DOM element with the specified CSS selector. When called with one argument, this function is an alias for the `document.querySelector()` function. ... Note: If you are using a library such as jQuery that uses `$`, this functionality will be overwritten, and `$` will correspond to that library's implementation."* – Felix Kling Jun 04 '22 at 09:41

1 Answers1

2

No you can't. It's only available in developer console in some browsers without importing jQuery library.

See https://developer.chrome.com/docs/devtools/console/utilities/#querySelector-function:

$(selector) returns the reference to the first DOM element with the specified CSS selector. When called with one argument, this function is an alias for the document.querySelector() function.

Here is a simple example:

console.log($('#div'));
<div id="div"></div>
Basj
  • 41,386
  • 99
  • 383
  • 673
EzioMercer
  • 1,502
  • 2
  • 7
  • 23
  • In code, yes. But in the **developer console** it works. Try this: 1) Save this in `test.html`: `
    Hello world
    `. 2) Open it in Chrome 3) Open dev console 4) Run `$('#a')`: it matches the div.     – Basj Jun 03 '22 at 13:15
  • 1
    @Basj as I said it is available ONLY in developer console in some browsers. And you asked: `can we use it directly in our JS code?` so answer is no. You can't use it directly in js code without importing `jQuery` library – EzioMercer Jun 03 '22 at 13:17