Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
16K+ Views
