$ in jQuery and its use for

Almost every website uses JQuery. jQuery is also a creation of JavaScript. jQuery simplifies HTML DOM tree traversal, CSS animation, and data manipulation. It is an easy and handy language to learn.

Beginners can implement JavaScript and jQuery efficiently with some prior knowledge of programming. There are several special symbols in JavaScript. Here, we shall learn about the dollar sign ($) of jQuery and its uses.

$ mean in jQuery?

The dollar sign acts as a shortcut for the function document.getElementById()and used to define or access jQuery elements.

Below is a code without using the dollar sign ($):

#1 Code:

<html>
<head>
<title>$ in jQuery</title>
</head>
<body>
<p id="demo"> </p> <!-- The id attribute defines the html element--> 
<script> 
	let text = "Hey, Are you coming to the party at John's house"; 
	document.getElementById("demo").innerHTML = text; // We can replace document.getElement with $, and get the same output. 
</script> 
</body>
</html>

Output:

Run Code Snippet

What is the role of $ in jQuery?

Developers usually like to use a variable name with a dollar sign. It is a practice among the developers to identify a variable that holds a jQuery object. Using the dollar sign ($) in a variable indicates that it has a jQuery object and not a string, boolean, a number, etc.

The above program can also be written as below (using $):

#2 Code:

<html>
<head>
<title>$ in jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<p id="demo"></p> <!-- The id attribute defines the html element-->
<script>
	$(document ).ready(function() {
		let text = "Hey, Are you coming to the party at John's house";
		$("#demo").html(text); //use the shortcut $ instead of document.getElement
	});
</script> 
</body>
</html>

Output:

Run Code Snippet

Conclusion:

We hope this tutorial has given a clear idea about the role of the dollar sign ($) in jQuery and how it works as a tailor-made solution to select HTML elements and allows developers to perform action on the elements. It is a special symbol that acts as an identifier for document.getElementById().