Qual é o significado do sinal "$" em JavaScript

167

No código JavaScript a seguir, há um $sinal de dólar ( ). O que isso significa?

$(window).bind('load', function() {
    $('img.protect').protectImage();
});
coderex
fonte
1
Veja também: stackoverflow.com/a/553734/43615 (Por que uma variável JavaScript começar com um sinal de dólar?)
Thomas Tempelmann

Respostas:

284

Seu snippet de código parece ser métodos de referência de uma das bibliotecas JavaScript populares (jQuery, ProtoType, mooTools e assim por diante).

Não há nada de misterioso no uso de $JavaScript. $é simplesmente um identificador JavaScript válido.

JavaScript permite letras maiúsculas e minúsculas, números e $e _. O $objetivo era ser usado para variáveis ​​geradas por máquina (como $0001).

Prototype, jQuery e a maioria das bibliotecas javascript usam o $como objeto básico (ou função) principal. A maioria deles também tem uma maneira de abandonar o arquivo $para que ele possa ser usado com outra biblioteca que o utilize. Nesse caso, você usa em jQueryvez de $. Na verdade, $é apenas um atalho para jQuery.

Nosredna
fonte
2
@ Paolo: Não sei exatamente o que você quer dizer. (O meu anteriormente era o aceito, eu assumo.) Bem, eu pensei que o meu estava totalmente correto, pelo menos. Isso inclui um pouco de informação auxiliar, mas não estou certo de que justifica o "muito" ...
Noldorin
1
@ Noldorin: informações auxiliares é uma coisa boa. Sua pergunta não fez absolutamente nenhuma referência ao motivo pelo qual $ foi usado, ao motivo pelo qual ele poderia ser usado e ao fato de o jQuery ser apenas uma das muitas bibliotecas que o utilizam. Tê-lo como resposta aceita significa que é a melhor resposta possível para uma pergunta, e não foi.
Paolo Bergantino
+1 É um identificador JavaScript válido primeiro e frequentemente usado pelas estruturas JavaScript como um segundo apelido.
Gumbo
@Paolo: Muitas vezes sim. Contudo, não havia indicação de que o OP quisesse saber sobre isso. Uma resposta direta também é uma coisa boa. :) Dizendo isso, eu ainda concordaria que esta é uma resposta melhor. Minha única reclamação foi com a ênfase que você estava colocando em um ponto específico.
Noldorin
2
BTW, eu forneci um pouco da história por trás da função $ no meu post aqui: stackoverflow.com/questions/1122690/jquery-and-questions/...
SolutionYogi
44

De outra resposta :

Um pouco de história

Lembre-se, não há nada de inerentemente especial $. É um nome de variável como qualquer outro. Antigamente, as pessoas costumavam escrever código usando document.getElementById. Como o JavaScript diferencia maiúsculas de minúsculas, era normal cometer um erro ao escrever document.getElementById. Devo capital 'b'de 'by'? Devo capital 'i'de Id?Você obter a deriva. Como as funções são cidadãos de primeira classe em JavaScript, você sempre pode fazer isso:

var $ = document.getElementById; //freedom from document.getElementById!

Quando a biblioteca Prototype chegou, eles nomearam sua função, que obtém os elementos DOM, como '$'. Quase todas as bibliotecas JavaScript copiaram essa idéia. Prototype também introduziu uma $$função para selecionar elementos usando o seletor CSS.

O jQuery também adaptou a $função, mas expandiu-se para aceitar todos os tipos de 'seletores' para obter os elementos desejados. Agora, se você já estiver usando o Prototype em seu projeto e quiser incluir o jQuery, estará com problemas, pois '$'pode se referir à implementação do Prototype OU à implementação do jQuery. É por isso que o jQuery tem a opção de noConflict, para que você possa incluir o jQuery em seu projeto, que usa Prototype e migra lentamente seu código. Acho que foi uma jogada brilhante da parte de John! :)

SolutionYogi
fonte
10
var $ = document.getElementById;não funciona no Firefox ou Google Chrome. Você deve usar em seu function $(id) { return document.getElementById(id); }lugar. Consulte stackoverflow.com/questions/1007340 para obter mais informações.
Grant Wagner
Eu não sabia disso, obrigado Grant. Posso confirmar que isso costumava funcionar no IE6 e no Firefox 2, porque eu frequentemente usava essa técnica. Vou atualizar meu post principal.
SolutionYogi
42

É provavelmente o código jQuery (mais precisamente, JavaScript usando a biblioteca jQuery).

O $representa a função jQuery e, na verdade, é um atalho para jQuery. (Diferentemente da maioria dos idiomas, o $símbolo não é reservado e pode ser usado como nome de variável.) É normalmente usado como seletor (ou seja, uma função que retorna um conjunto de elementos encontrados no DOM).

Noldorin
fonte
3
Você deve adicionar que $ é exatamente
211909 hasen
O que esse código significa: $ input.prop ('type') == 'radio';
OKGimmeMoney
21

Como todas as outras respostas dizem; pode ser quase qualquer coisa, mas geralmente é "JQuery".

No entanto, no ES6, é um operador de interpolação de string em um modelo "literal", por exemplo.

var s = "new" ; // you can put whatever you think appropriate here.
var s2 = `There are so many ${s} ideas these days !!` ; //back-ticks not quotes
console.log(s2) ;

resultado:

Existem tantas idéias novas hoje em dia !!

Prumo
fonte
2
Esta é uma resposta útil! Era o que eu estava procurando, pois sabia que não tínhamos jQuery ou qualquer outra biblioteca. É basicamente uma forma de imprimir uma variável dentro de uma seqüência maior, sem o uso de aspas e sinais de mais etc.
Oscar Bravo
4

Além das respostas acima, $não possui um significado especial em javascript, é gratuito para ser usado na nomeação de objetos. Em jQuery , que é usado simplesmente como uma abreviatura para o jQuery objecto e jQuery () função. No entanto, você pode encontrar situações em que deseja usá-lo em conjunto com outra biblioteca JS que também use $, o que resultaria em um conflito de nomenclatura. Existe um método no JQuery apenas por esse motivo jQuery.noConflict(),.

Aqui está um exemplo dos documentos do jQuery :

<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
// Code that uses other library's $ can follow here.
</script>

Como alternativa, você também pode usar um como este

(function ($) {
// Code in which we know exactly what the meaning of $ is
} (jQuery));

Ref : https://api.jquery.com/jquery.noconflict/

Vishnu Mallipudi
fonte
3

Na documentação do jQuery que descreve o objeto principal do jQuery :

Muitos desenvolvedores prefixam $ ao nome de variáveis ​​que contêm objetos jQuery para ajudar a diferenciar. Não há nada mágico nessa prática - apenas ajuda algumas pessoas a acompanharem o que as diferentes variáveis ​​contêm.

Josh Britton
fonte