Main Tutorials

JavaScript vs jQuery function calling examples

This article shows different function calling in both JavaScript and jQuery. At the end, we will show an example of how to call a function to create dynamic content after a page is loaded, both in JavaScript and jQuery.

Table of contents:

1. JavaScript Function Calling

A function can be defined and called directly in JavaScript using the language’s syntax. JavaScript supports function declarations, function expressions, and ES6 arrow functions,


// Function declaration
function sayHello() {
  console.log("Hello, JavaScript!");
}
sayHello(); // Calling the function

// Function expression
const sayGoodbye = function() {
  console.log("Goodbye, JavaScript!");
};
sayGoodbye(); // Calling the function

// ES6 Arrow function
const greet = () => {
  console.log("Hello, ES6!");
};
greet(); // Calling the function

2. jQuery Function Calling

on the other hand, jQuery typically operates on DOM elements using a $(dollar sign) function, which is a shorthand for jQuery().


$(document).ready(function() {
  // This is a jQuery function call that waits for the DOM to be fully loaded
  $('#btn').click(function() {
    // Attaching a click event handler to an element with the ID 'btn'
    alert('Button clicked!');
  });
});

3. JavaScript – Function calling after page loaded

In modern JavaScript, the most common way to run code after loading the page is by listening to the document object’s DOMContentLoaded event. This event fires when the initial HTML document has been completely loaded and parsed without waiting for stylesheets, images, and subframes to finish loading.


document.addEventListener('DOMContentLoaded', function() {
  console.log('The page has loaded!');
  // Your code goes here
});

Another approach, though less commonly used for waiting for the DOM to be ready, is the load event on the window object, which waits for the whole page, including all dependent resources like stylesheets and images, to be loaded.


window.addEventListener('load', function() {
  console.log('The page fully loaded, including all dependent resources!');
  // Your code goes here
});

4. jQuery – Function calling after page loaded

jQuery simplifies waiting for the DOM to be ready with its .ready() method. This method will be called once the DOM hierarchy has been entirely constructed, equivalent to the DOMContentLoaded event in plain JavaScript.


$(document).ready(function() {
  console.log('The page has loaded!');
  // Your jQuery code goes here
});

Or, using the shorthand for .ready():


$(function() {
  console.log('The page has loaded!');
  // Your jQuery code goes here
});

5. Function calling after page loaded

A complete HTML for jQuery and Javasctiion function calling examples.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript vs jQuery function calling examples</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<div id="container">Hello World!</div>

<script>

// jQuery function calling
$(document).ready(function() {
  console.log('The page has loaded! 1');
});

$(function() {
  console.log('The page has loaded! 2');
});

// Javascript function calling
document.addEventListener('DOMContentLoaded', function() {
  console.log('The page has loaded! 3');
});

window.addEventListener('load', function() {
  console.log('The page fully loaded, including all dependent resources!');
});
</script>

</body>
</html>

See the browser console output; the Javascript function calling runs first.


The page has loaded! 3
The page has loaded! 1
The page has loaded! 2
The page fully loaded, including all dependent resources!

6. References

About Author

author image
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

Subscribe
Notify of
8 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Manju
6 years ago

How to write jquery form validation..

7204004491
6 years ago

How to write jquery form validation ….

saravan
9 years ago

Yong, I am facing an issue where cross domain parent page refresh is not happening.. I have xyz.com is my main website and i have a link to open a popup which will load the contents from http://www.abc.com.. And i have a button called close in the popup and when i click on close i need to close as well as i have to refresh the http://www.abc.com..
I have tried many ways to do through Javascript but i have ended up seeing an error “Access denied” in IE and mozilla no action is performed also..

Any thoughts?.

Note: This xyz.com and abc.com is deployed in the 2 different servers..

sath
10 years ago

Your writing style is great , very clear and very clever.

sindhu
10 years ago

i received “This is HelloWorld by HTML” this output only.

manivasakan
10 years ago

https://mkyong.com/jquery/different-call-between-javascript-and-jquery/
$(function(){
$(“#msgid2”).html(“This is Hello World by JQuery 2”);
});
this function didn’t call but output came….

Asha
10 years ago
Reply to  manivasakan

$(function() in equivalent to $(document).ready(function()

Toby Lindelof
11 years ago

Thanks for another wonderful post. Where else could anyone get that kind of info in such an ideal method of writing? I have a presentation subsequent week, and I’m at the look for such information.