Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What are jQuery events .load(), .ready(), .unload()?
jQuery load() method
The load() method is used to attach event handler to load event.
Example
You can try to run the following code to learn how to work with jQuery load() method.
Note: The method deprecated in jQuery 1.8. It got finally removed in jQuery 3.0. To run the following code, add jQuery version lesser than 1.8,
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("img").load(function(){
alert("This is an image.");
});
});
</script>
</head>
<body>
<img src="/videotutorials/images/coding_ground_home.jpg" alt="Coding Ground" width="310" height="270">
<p>This image will load only in jQuery version lesser than 1.8</p>
</body>
</html>jQuery ready() method
Easily specify what happens when a ready event occurs, with the ready() function.
Example
You can try to run the following code to learn how to work with ready() method. For an example, we're hiding an element here:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<p>This is demo text.</p>
<button>Hide</button>
</body>
</html>jQuery unload() method
If you want to trigger an event while navigate away from the page, use the unload() method.
Note: The jQuery unload() method deprecated in jQuery 1.8. It got finally removed in jQuery 3.0.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).unload(function(){
alert("Thanks! Bye!");
});
});
</script>
</head>
<body>
<p>Event triggers when you leave the page.</p>
</body>
</html>
747 Views
