jQuery How to Work
First you have to include jQuery library,
<script type="text/javascript" src="jquery-latest.min.js"></script>
jQuery always ready to read Document Object Model(DOM), we use to add some event in the DOM.
When the event is work properly in your page than the inside you are call in the $(document).ready() function. All the DOM event work first inside it will load before the page contents are loaded.
<script type="text/javascript">
$(document).ready(function() {
$("div").click(function() {
alert("Welcome to the start jQuery learn..!");
});
});
</script>
DOM stuff write inside <script> tag. Following code check the DOM element are fully loaded before the page loading is finish. When the page loading is finished then the executed code block look like this...
$(document).ready(function() {
// When DOM is ready this stuff will execute
});
jQuery First Example
Following one jQuery alert box example using jQuery library function how it can be interact with end users.
<html>
<head>
<title>jQuery Demo Example</title>
<script src="jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$("div").click(function() {
alert("Welcome to start jQuery..!");
});
});
</script>
</head>
<body>
<div>
Click here to open Dialog box.
</div>
</body>
</html>
Example Result
How to add external jQuery script?
It is very good way to write the script in external page and than after linked in the document. It main benefit is reducing complex coding and easy to understand and another benefit is external script is use one or more documents to reduce the size of main document.
$(document).ready(function() {
$("div").click(function() {
alert("Welcome to start jQuery..!");
});
});
<!DOCTYPE html>
<html>
<head>
<title>jQuery Demo Example</title>
<script src="jquery-latest.min.js"></script>
<script src="external_script.js"></script>
</head>
<body>
<div>
Click here to open Dialog box.
</div>
</body>
</html>
Example Result