Print Shortlink

$ in jQuery?

During the initial days of coding with Prototype and jQuery libraries what used to baffle me is the $ (dollar) syntax. I used to wonder what really this dollar sign meant in the following jQuery statements.

$().ready(function(){
     …
});
$(“#message”).html()

Let me explain what I think happens behind the screens. JavaScript is pretty interesting as a language. You can write a function or define a variable with $ as the name. i.e.,
You can define a variable
var $ = “Confused”;

You can write a function like below
var $ = function(name){
     alert(“Hi  ” + name);
}
and invoke it $(“Sam”) and the output is.



You can see what effectively $ means. So here is what I feel may be a pseudo implementation of $(“message”).html()
<!DOCTYPE html>
<html>
<head>
<script>
var $ = function(expression){
this.html = function(){
if(expression.indexOf(“#”) == 0)
return document.getElementById(expression.substring(1)).innerHTML;
return null;
}
return this;
}
function init(){
alert($(“#message”).html());
}
</script>
</head>
<body onload=”init();”>
<div id=”message“>This is very confusing!!!</div>
</body>
</html>

html() is a public function defined inside the $ function. And the output of this code is

Leave a Reply