Dec 31, 2009

Learn JQuery Here! How to Invoke JQuery?

Of late, JQuery seem to have more features than mere javascripting for web development. Go through this post and get to know how to invoke a simple jquery from a html page.
  • For using jquery, forst and foremost, you need to download the JQuery API (which is just a .js file available at http://docs.jquery.com/Downloading_jQuery#Current_Release).
  • Place this file jquery-1.3.2.js (current release when this post is being written) into a folder "test".
  • Write out a sample html page as shown below and place it in the same folder 'test'
<html>
<head>
<script language="javascript" src="jquery-1.3.2.js"></script>
<script language="javascript" src="sample.js"></script>
Heading of the Sample HTML Page
</head>
<title>
Title of the sample HTML Page
</title>
<body>
<p>
This is a sample HTML Page which invokes a jquery before page loads!
</body>
</html>
  • As per the above code, you have included the JQuery API into the html file using the following code
<script language="javascript" src="jquery-1.3.2.js"></script><br />
  • Now, your browser would understand that you would be using jquery for the html that is being rendered.
  • Further to this, you can have a separate js file by name sample.js, where you can write all teh jquery functions that would be invoked when the html page is rendered. For the sample, lets consider that teh sample.js has the following lines. Place this file too in the 'test' folder and invoke sample.html by opening it in IE or mozilla.
<br />$(document).ready(function() {<br />alert('invoked jquery');<br />   <br /> });<br />
  • In the above case, the $(document).ready(function() is equivalent to javascripts body onLoad() function. So when the html is loaded, the jquery is invoked.<br>The ready() function of jquery gets executed and the message is alerted.
  • So, now you have understood how to invoke jquery from a very simple html page!! You are set to go ahead! All the best!






No comments:

Post a Comment