Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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 jQuery from JavaScript
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: Basic jQuery Function Call
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: Toggle Box Visibility
Let's create a jQuery function that selects the element with the id box, and add a toggle method that hides the element if it is visible, and shows the element if it is hidden:
<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")
}
};
// Creating a JavaScript function
function javaScriptFunction() {
// Calling the jQuery function with JavaScript function
$.jQueryFunction();
};
</script>
</body>
</html>
Example: Fade Toggle with Color Change
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:
<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");
};
// Creating a JavaScript function
function javaScriptFunction() {
// Calling the jQuery function with JavaScript function
$.jQueryFunction();
};
</script>
</body>
</html>
Key Points
- Use
$.functionName = function() {}to create custom jQuery functions - Call jQuery functions from JavaScript using
$.functionName() - Always include the jQuery library before writing jQuery code
- jQuery functions can be called from event handlers or regular JavaScript functions
Conclusion
Calling jQuery functions from JavaScript allows you to combine the power of both libraries. Use custom jQuery functions for DOM manipulation and call them from JavaScript event handlers or regular functions as needed.
17K+ Views
