How To Call Jquery Function In Jquery

by

In this tutorial, you’ll learn how to call a jQuery function in jQuery. This can be helpful if you’re working with jQuery and need to call another function or method within the same script.

First, let’s briefly discuss what jQuery is. jQuery is a popular JavaScript library that simplifies the process of working with HTML documents, making it easier to perform common tasks like event handling, animation, and DOM manipulation.

Step 1: Including jQuery in your project

Before you can use jQuery functions, make sure you have included the jQuery library in your HTML file. You can include it using the CDN (Content Delivery Network) by adding the following code within the <head> section of your HTML document: 

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Step 2: Creating a function in jQuery

Now that you have included the jQuery library, let’s create a simple function called helloWorld. This function will display an alert box with the message “Hello, World!”. 

$(document).ready(function() {
  function helloWorld() {
    alert("Hello, World!");
  }
});

Step 3: Calling a jQuery function

To call the helloWorld function in jQuery, simply reference the function by its name followed by parentheses. In this example, let’s call the helloWorld function when a button with the ID #btn-call-function is clicked: 

$(document).ready(function() {
  function helloWorld() {
    alert("Hello, World!");
  }

  $("#btn-call-function").on("click", function() {
    helloWorld();
  });
});

In the example above, the helloWorld function is called when the button with the ID #btn-call-function is clicked thanks to the .on() method.

Conclusion

Calling a jQuery function in jQuery is as simple as referencing the function name followed by parentheses. By following the steps in this tutorial, you’ve learned how to create and call a simple jQuery function. You can now apply these concepts to your own projects, and continue exploring the powerful features of jQuery.