Apa arti dari tanda "$" dalam JavaScript

167

Dalam kode JavaScript berikut ada tanda dolar ( $). Apa artinya?

$(window).bind('load', function() {
    $('img.protect').protectImage();
});
javascript coderex
sumber
1
Lihat juga: stackoverflow.com/a/553734/43615 (Mengapa variabel JavaScript akan dimulai dengan tanda dolar?)
Thomas Tempelmann

Jawaban:

284

Cuplikan kode Anda sepertinya adalah metode referensi dari salah satu pustaka JavaScript yang populer (jQuery, ProtoType, mooTools, dan sebagainya).

Tidak ada yang misterius tentang penggunaan $dalam JavaScript. $hanyalah pengidentifikasi JavaScript yang valid.

JavaScript memungkinkan huruf besar dan kecil, angka, dan $dan _. Itu $dimaksudkan untuk digunakan untuk variabel yang dihasilkan mesin (seperti $0001).

Prototipe, jQuery, dan sebagian besar pustaka javascript menggunakan $sebagai objek dasar (atau fungsi). Sebagian besar dari mereka juga memiliki cara untuk melepaskannya $sehingga dapat digunakan dengan perpustakaan lain yang menggunakannya. Dalam hal ini Anda menggunakan jQuerybukan $. Padahal, $ini hanya jalan pintas untuk jQuery.

Nosredna
sumber
2
@ Paolo: Tidak yakin apa yang Anda maksud. (Asumsi saya yang diterima, saya kira.) Yah, saya pikir saya setidaknya sepenuhnya benar. Ini termasuk sedikit informasi tambahan, tapi aku tidak yakin itu membenarkan "banyak" ...
Noldorin
1
@Noldorin: informasi tambahan adalah hal yang baik. Pertanyaan Anda sama sekali tidak menyebutkan alasan $ digunakan, alasan mengapa itu bisa digunakan, dan fakta jQuery hanyalah salah satu dari banyak perpustakaan yang menggunakannya. Menjadikannya sebagai jawaban yang diterima berarti itu adalah jawaban terbaik untuk sebuah pertanyaan, dan ternyata tidak.
Paolo Bergantino
+1 Ini adalah pengidentifikasi JavaScript yang valid pertama dan sering digunakan oleh kerangka kerja JavaScript sebagai alias kedua.
Gumbo
@ Paolo: Seringkali, ya. Namun tidak ada indikasi OP ingin tahu tentang ini. Jawaban langsung juga merupakan hal yang baik. :) Mengatakan itu, saya masih setuju ini adalah jawaban yang lebih baik. Berdalih saya satu-satunya adalah dengan penekanan yang Anda berikan pada titik tertentu.
Noldorin
2
BTW, saya memberikan sedikit sejarah di balik $ function dalam posting saya di sini: stackoverflow.com/questions/1122690/jquery-and-questions/…
SolutionYogi
44

Dari jawaban lain :

Sedikit sejarah

Ingat, pada dasarnya tidak ada yang spesial $. Ini adalah nama variabel seperti yang lainnya. Pada hari-hari sebelumnya, orang biasa menulis kode menggunakan document.getElementById. Karena JavaScript peka terhadap huruf besar-kecil, wajar untuk membuat kesalahan saat menulis document.getElementById. Haruskah Aku modal 'b'dari 'by'? Haruskah Aku modal 'i'dari Id?Anda mendapatkan arus. Karena fungsi adalah warga negara kelas satu dalam JavaScript, Anda selalu dapat melakukan ini:

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

Ketika perpustakaan Prototipe tiba, mereka menamai fungsinya, yang mendapat elemen DOM, sebagai '$'. Hampir semua perpustakaan JavaScript menyalin ide ini. Prototipe juga memperkenalkan $$fungsi untuk memilih elemen menggunakan pemilih CSS.

jQuery juga mengadaptasi $fungsi tetapi diperluas untuk membuatnya menerima semua jenis 'penyeleksi' untuk mendapatkan elemen yang Anda inginkan. Sekarang, jika Anda sudah menggunakan Prototipe dalam proyek Anda dan ingin memasukkan jQuery, Anda akan berada dalam masalah karena '$'bisa merujuk ke implementasi Prototipe ATAU implementasi jQuery. Itu sebabnya jQuery memiliki opsi noConflict sehingga Anda dapat memasukkan jQuery dalam proyek Anda yang menggunakan Prototipe dan secara perlahan memigrasikan kode Anda. Saya pikir ini adalah langkah brilian dari pihak John! :)

SolutionYogi
sumber
10
var $ = document.getElementById;tidak berfungsi di Firefox atau Google Chrome. Anda harus menggunakannya function $(id) { return document.getElementById(id); }sebagai gantinya. Lihat stackoverflow.com/questions/1007340 untuk informasi lebih lanjut.
Grant Wagner
Saya tidak tahu itu, terima kasih Grant. Saya dapat mengkonfirmasi bahwa ini berfungsi di IE6 dan juga Firefox 2 karena saya sering menggunakan teknik ini. Saya akan memperbarui posting utama saya.
SolutionYogi
42

Itu kemungkinan besar kode jQuery (lebih tepatnya, JavaScript menggunakan perpustakaan jQuery).

Yang $mewakili Fungsi jQuery , dan sebenarnya adalah alias singkatan untuk jQuery. (Tidak seperti di sebagian besar bahasa, $simbol tidak dicadangkan, dan dapat digunakan sebagai nama variabel.) Biasanya digunakan sebagai pemilih (yaitu fungsi yang mengembalikan sekumpulan elemen yang ditemukan di DOM).

Noldorin
sumber
3
Anda harus menambahkan bahwa $ adalah seperti x, itu bisa menjadi apa pun yang Anda tetapkan untuk itu
Hasen
Apa arti dari kode ini: $ input.prop ('type') == 'radio';
OKGimmeMoney
21

Seperti semua jawaban lainnya katakan; bisa hampir apa saja tetapi biasanya "JQuery".

Namun, dalam ES6 itu adalah operator interpolasi string dalam template "literal" misalnya.

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) ;

hasil:

Ada begitu banyak ide baru hari ini !!

Bob
sumber
2
Ini jawaban yang bermanfaat! Itu yang saya cari karena saya tahu kami tidak punya jQuery atau perpustakaan lain. Ini pada dasarnya cara mencetak variabel di dalam string yang lebih besar tanpa menggunakan tanda kutip dan tanda tambah dll.
Oscar Bravo
4

Selain jawaban di atas, $ tidak memiliki arti khusus dalam javascript, bebas untuk digunakan dalam penamaan objek. Dalam jQuery , itu hanya digunakan sebagai alias untuk jQuery objek dan jQuery () fungsi. Namun, Anda mungkin menghadapi situasi di mana Anda ingin menggunakannya bersama dengan pustaka JS lain yang juga menggunakan $, yang akan menghasilkan konflik penamaan. Ada metode di JQuery hanya untuk alasan ini,jQuery.noConflict() ,.

Berikut adalah contoh dari jQuery doc's:

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

Atau, Anda juga dapat menggunakan yang seperti ini

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

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

Wisnu Mallipudi
sumber
3

Dari dokumentasi jQuery yang menguraikan objek Inti jQuery :

Banyak pengembang memberikan awalan $ ke nama variabel yang berisi objek jQuery untuk membantu membedakan. Tidak ada yang ajaib tentang praktik ini - itu hanya membantu beberapa orang melacak apa yang berisi berbagai variabel.

Josh Britton
sumber