5

Numa página qualquer vazia (sem biblioteca alguma), ao digitar um $ no console do navegador é retornado uma função, como mostra a saída abaixo:

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

Se eu digitar dois $ o resultado é parecido:

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

Se digitar três $, recebo erro:

Uncaught ReferenceError: $$$ is not defined

Testei nos outros navegadores (IE11, Edge, Firefox) e todos retornam uma função, em alguns casos com saída ligeiramente diferente.

Mas se eu fizer console.log($) em um <script> da página, irá mostrar o erro $ is not defined:

<html>
<head></head>
<body>
   <script>
   console.log($);
   </script>
</body>
</html>

Gostaria de saber exatamente o que significa esse $ (simples ou duplo) ou a função que ele retorna no console e qual seria a sua aplicação na prática?

4
  • 2
    Basicamente é uma utilidade para depurações do Chrome, se você não se importar com uma fonte externa, pode ler isso
    – Andre
    Commented 29/02/2020 às 23:07
  • @user140828 Que legal! Não conhecia essas funcionalidades do console. Obg! Passei a vista na página que mandou e já saquei logo o que isso significa. Já dá até pra postar uma resposta :D
    – Sam
    Commented 29/02/2020 às 23:10
  • 3
    Nota: no FF é a mesma coisa, não é exclusividade do Chrome
    – Largato
    Commented 29/02/2020 às 23:49
  • 2
    Variáveis $0, $1, $2, etc também podem ser criadas pela aba ele "Elements" para armazenar elementos HTML desejados. Apenas uma curiosidade
    – Costamilam
    Commented 1/03/2020 às 4:25

1 Resposta 1

10

São atalhos presentes nas ferramentas do desenvolvedor.

  • O cifrão $ funciona como um atalho para document.querySelector.
  • Já o $$ funciona como um alias para document.querySelectorAll. A única diferença é que, ao invés de retornar uma NodeList, retorna-se um Array. Provavelmente para a conveniência de se poder utilizar métodos do construtor Array diretamente.

É importante frisar que esses atalhos não devem ser usados em códigos "de produção", já que funcionam somente nas ferramentas de desenvolvedor.

Vale mencionar, ainda, que esse cifrão em questão $ não é do jQuery. Ele só irá se referir à jQuery caso essa biblioteca for incluída na página. Nesse último caso, o atalho padrão à document.querySelector não estará mais disponível.

Existem diversas outras "utilidades" no console das ferramentas do desenvolvedor. Este artigo fornece mais informações.

1
  • 1
    É isso mesmo. Mt bom!
    – Sam
    Commented 1/03/2020 às 1:02

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .