How to call jQuery function with JavaScript function?

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.

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.

   
     
      
   
   
      
 Calling a jQuery function with JavaScript function. 
      
Click on the button to hide the box 
      
 Box 
      HIDE
      
   

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.

   
      
      
   
   
      
 Calling a jQuery function with JavaScript function. 
      
Click on the button to toggle fading of the box 
      
Box
      Fade
      
   

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