Are $(function(){}) and $(document).ready(function(){}) different?
As a web developer, you most probably have realized that every time you see jQuery code anywhere, it is usually within either $(function(){}) or $(document).ready(function(){}) function.
You could be wondering why there is a need to have the jQuery code wrapped within a function, and why there exist two different ways of doing it.
Well... this article will help clear this out for you once and for all.
In order to use the jQuery library in your web pages, you need to first import the library into the page before writing any jQuery code.
You can either download the jQuery library from their official download page, add it to your web project, and reference it in your pages, or you can use a CDN where you won't have to download it but just add a line of code to your pages.
Here are popular jQuery CDNs: Google CDN, CDNJS CDN, jsDelivr CDN, and Microsoft CDN.
One major advantage of using CDN over a self-hosted jQuery library is that most users have already downloaded jQuery from CDNs when visiting other sites. Therefore, jQuery will be loaded from the browser cache when they visit your site, which will in turn cut the load time. Most CDNs also ensure that once a user requests a file from it, it gets served from the server closest to them thus also increasing site load speed.
Whatever method you use to import the jQuery library, be it self-hosted or from a CDN, it will look like below. What only will differ is the URL.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
This can be placed either in the <head> section or just before closing the </body> tag. The latter is recommended.
After this, you can add your jQuery code anywhere on your web page as long as it is below the library importation line (what we have done above).
All you have to do is put your code between the Javascript opening <script> and closing </script> tags in your HTML page, just like in normal JS. You can also create a .js file and place your code in it, then import it into your web pages.
Example
<script>
$("p").hide(); //To hide paragraph(s)
$("button").click(); //To trigger button click
$("div").append("<p>New paragraph</p>"); //To add a new paragraph to a div
$("h1").addClass("page-title"); //To add a class to H1 heading
//Etc
</script>
It is a good practice to prevent any of your jQuery code from running before the document(web page) has fully loaded. The page/document is said to be ready when it is done loading. This is the appropriate time now to run your jQuery code.
The reason why running jQuery code before the page has finished loading is discouraged is because some of its actions are likely to fail to work. This is because the jQuery methods will run before the HTML elements they are supposed to work on are loaded.
Below are the two methods of implementing it. This way, your jQuery code won't run until the page is fully loaded.
Method 1
<script>
$(document).ready(function(){
// Write all your jQuery code here...
});
</script>
Method 2
<script>
$(function(){
// Write all your jQuery code here...
});
</script>
Both of the methods above will work the same way.
So... Are they different? Which one do you have to use?
The simple answer is No. The two methods are equivalent and work exactly the same. $(function() {}) is the short form of $(document).ready(function(){}). It's upon you to choose your preferred syntax. Some developers prefer the former because it is shorter and quicker to write while others prefer the latter since it is easier to understand when reading the code.
Personally, I prefer using $(function() {}). I got used to it long ago when I was learning to code in jQuery.
Below is an example of jQuery code inside the ready function. The paragraph disappears when you click on it.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h1>Sample heading</h1>
<p>Sample paragraph text</p>
<script>
$(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</body>
</html>
Well... That's all for this article. It's my hope it has helped you. Follow us on Social Media or subscribe to our email newsletter to get notified when we add new similar content.
