Now to prove that JQUERY works on your pc you write a simple program and we run it in different browser and see what happens. Our program is to show a alert when the page loads.
Program for Showing alerts when the web page loads
First step:
First of all we have to include a reference to the jQUERY library in our web page. For this we insert a script reference to the jQUERY. To do this insert the following code in <head></head> section after <title></title>.
<script type="text/javascript" src="jquery-1.x.x.x.js"> </script>
On the src attribute provide the full path where your save the downloaded jQUERY library. Also provide the name as downloaded copy.
Second Step:
The second step is to select the event handler that triggers when the page load complete. Normally the traditional javascript code we use for this is as follow
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>First jQUERY Example</title> </head> <body> <script type="text/javascript"> window.onload = whenload; function whenload(){ alert("page loaded"); } </script> </body> </html> |
But the problem with this code is that this event trigger when all the page content such as image are fully loaded. So when you have larger website that will be a problem. Also it’s very hard to run multiple onload functions too, you need use DOM event model which different for different browser. But using jQUERY we can do it very easily. JQUERY has an event that runs when the DOM of the page is ready. So no need to load all the contents to run this event, Just DOM of the page need to be ready. It is the document.ready event.
So now you can write your first jQUERY statement. jQUERY object is represented by $(dollar) sign.
| <script type="text/javascript"> $("document").ready(function() { alert("page loaded"); }); </script> |
What will happen here we can explain. With $ sign we write the jQUERY object and calling the function with parameter of document and then .ready and passing an anonymous function for simplification and it will show a message page loaded when DOM is ready.
Another advantage of this document.ready event is that you can run it for multiple times independently. Now add this script tag.
| !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> First jQUERY Example </title> <script type="text/javascript" src=" jquery-1.x.x.x.js "></script> <script type="text/javascript"> $("document").ready(function() { alert("The page just loaded!"); }); </script> </head> <body>
</body> </html> |
Be sure your src attribute name is ok and you put your js formatted library file on the root folder. Otherwise you need to provide the full path.
Posts
