
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
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.
<!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.
- Related Articles
- How to call a jQuery library function?
- How to call a Java function inside JavaScript Function?
- Call a function with onclick() – JavaScript?
- JavaScript Function Call
- How to call a function in JavaScript?
- How to call a jQuery plugin function outside the plugin?
- How to make a jQuery function call after “X” seconds?
- How to call a jQuery function after a certain delay?
- How to call a function that returns another function in JavaScript?
- How to delay a JavaScript function call using JavaScript?
- How to call a JavaScript function on click?
- How to use setInterval function call in JavaScript?
- How to call a JavaScript function from C++?
- How to call a JavaScript function in HTML?
- How to call a function inside a jQuery plugin from outside?
