jQuery Tutorial


jQuery Example


jQuery References


jQuery How to Work




Description of the Program

First think is including jquery Library as:

<script type="text/javascript" src="jquery.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("Wel-Come to the Learn jQuery..!");
      });
   });
</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 stuff this part
});

jQuery used first Program

Following one jQuery Alert Box Example demo program using jQuery library function how it can be interact with programmer.

<html>
<head>
<title>The jQuery Example</title>
   <script type="text/javascript" 
   src="../jquery.min.js"></script>
   
   <script type="text/javascript">
   $(document).ready(function() {
      $("div").click(function() {
        alert("Wel-Come to the Learn jQuery..!");
      });
   });
   </script>
 
</head>
<body>
<div id="ex1">
Click here to open Dialogue Box.
</div>
</body>
</html>
Online Try This Code Your Self....   »

How to Include External Script using jQuery?

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.

/* Save this Filename: external_demo.js */
   $(document).ready(function() 
   {
      $("div").click(function() 
	  { 
		alert("This Example is External jQuery..!");
	  });
   });

After we can include external_demo.js file in our main html document.

<html>
<head>
<title>The External jQuery Example</title>
   <script type="text/javascript" 
   src="../jquery.min.js"></script>   
   <script type="text/javascript"
   src="external_demo.js"></script>
</head>
<body>
<div id="ex1">
Click here to open Dialogue Box.
</div>
</body>
</html>
Online Try This Code Your Self....   »