How to call jQuery function with JavaScript function?

Javascript Web Development Front End Technology

JavaScript is the core of any website, it adds functionalities to a website, make the overall website responsive. But in JavaScript, it is hard to select an element and add different functions like toggling an element, fade-in an element, and more.

jQuery provides many methods for making it easy to add functionality to a website like fade-in, fade-out, hide, show, toggle, etc.

Concatenating jQuery and JavaScript makes it easy to use the jQuery function in JavaScript function whenever needed, instead of calling them separately.

Syntax

To call a jQuery function with a JavaScript function, you can use the following syntax

$(document).ready(function() {
   // Your jQuery code here
});

Alternatively, you can use the following syntax

$(function() {
   // Your jQuery code here
});

Inside the document ready function, you can call any jQuery function that you want to execute. For example

$(document).ready(function() {
   $("#element").hide(); // This will hide the element with the ID "element"
});

You can also pass a parameter to the jQuery function, like this

$(document).ready(function() {
   $("#element").hide(1000); // This will hide the element with the ID "element" over a period of 1 second (1000 milliseconds)
});

Steps

To call a jQuery function with a JavaScript function, you can follow these steps −

STEP 1 − Include the jQuery library in your HTML file. You can do this by adding the following script tag to your HTML file

STEP 2 − Create a jQuery function. This function should contain the code you want to execute when you call it.

STEP 3 − Create a JavaScript function. This function will be used to call the jQuery function.

STEP 4 − Add an event listener to an element in your HTML to trigger the JavaScript function.

STEP 5 − When the user clicks on the button, the JavaScript function will be called, which will in turn call the jQuery function.

Example

To call jQuery function with a JavaScript function, try the following code.

<!DOCTYPE html>
<html>
   <body>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script>
         $.myjQuery = function() {
            alert("jQuery");
         };
         $(document).ready(function() {
            alert("Welcome!");
         });
         function display() {
            $.myjQuery();
         };
      </script>
      <input type="button" value="submit" onclick=" display();">
   </body>
</html>

Example

Let’s create a jQuery function that selects the element with the id root, and add a toggle method that hides the element if it is not hidden, and shows the element if it is hidden.

After that, let’s create a JavaScript function that calls the jQuery function.

<html>
   <head>
     <style>
         #box {
            width: 100px;
            height: 100px;
            padding: 4px;
            background-color: #333;
            color: white;
            margin-bottom: 10px;
            font-size: 22px;
         }
      </style>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   </head>
   <body>
      <h2> Calling a jQuery function with JavaScript function. </h2>
      <p>Click on the button to hide the box </p>
      <div id="box"> Box </div>
      <button type="button" id="btn" onclick="javaScriptFunction();">HIDE</button>
      <script>
        
         // Creating a jquery function
         $.jQueryFunction = function () {
            $('#box').toggle();
            if ($("#btn").text() == "HIDE") {
               $("#btn").text("SHOW")
            } else {
               $("#btn").text("HIDE")
            }
         };
         
         // Craeting a Javascript function
         function javaScriptFunction() {
         
         // Calling the jquery function with Javscript function
            $.jQueryFunction();
         };
      </script>
   </body>
</html>

Example

Let’s create another jQuery function that selects the element, and adds a fadeToggle method, which fades the element and then changes the color of that element to red.

After that, let’s create a JavaScript function that calls the jQuery function.

<html>
   <head>
      <style>
         #box {
            width: 100px;
            height: 100px;
            padding: 4px;
            background-color: #333;
            color: white;
            margin-bottom: 10px;
            font-size: 22px;
         }
      </style>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   </head>
   <body>
      <h2> Calling a jQuery function with JavaScript function. </h2>
      <p>Click on the button to toggle fading of the box </p>
      <div id="box">Box</div>
      <button type="button" onclick="javaScriptFunction();">Fade</button>
      <script>
         
         // Creating a jquery function
         $.jQueryFunction = function () {
            $('#box').fadeToggle();
            $('#box').css("color", "red");
         };
         
         // Craeting a Javascript function
         function javaScriptFunction() {
         
            // Calling the jquery function with Javscript function
            $.jQueryFunction();
         };
      </script>
   </body>
</html>

In this tutorial, we learned how to call jQuery function with JavaScript function.