We will use all Google, Microsoft and JQuery foundation provided JQuery library in this post and create a basic example of "Hello World".
Google JQuery Library
To start with Google provided Jquery library; we do not need to download any JQuery library but we need to connect with internet to use it. Google provided JQuery library is hosted at https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js. I launched the notepad as I want to start with very basic and put up following code. I saved it as "Test.html".
<html> <head> <!--Include Google JQuery File--> <script type="text/javascript" language="Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> </head> <body> <h2>Welcome to JQuery</h2> <p> This page will say Hello on page load.</p> <script language="javascript" type="text/javascript"> $(document).ready(function () { alert("Hello World - Google JQuery"); }); </script> </body> </html>
I fired the IE browser and navigated to this file. The browser shows the alert box and displayed Hello World.
Microsoft JQuery Library
To start with Microsoft provided Jquery library; we do not need to download any JQuery library but we need to connect with internet to use it. Microsoft provided JQuery library is hosted at http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js. I launched the notepad as I want to start with very basic and put up following code. I saved it as "Test2.html".
<html> <head> <!--Include Microsoft JQuery File--> <script type="text/javascript" language="Javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"> </script> </head> <body> <h2>Welcome to JQuery</h2> <p> This page will say Hello on page load. </p> <script language="javascript" type="text/javascript"> $(document).ready(function () { alert("Hello World - Microsoft JQuery"); }); </script> </body> </html>
I fired the IE browser and navigated to this file "Test2.html". The browser shows the alert box and displayed Hello World.
JQuery Foundation JQuery Library
To start with Jquery foundation provided Jquery library; we need to download the JQuery library. I downloaded the JQuery file and saved it to my local folders. I launched the notepad as I want to start with very basic and put up following code. I saved it as "Test3.html".
<html> <head> <!--Include JQuery Foundation JQuery File--> <script type="text/javascript" language="Javascript" src="C:\003. Learn\JQuery\jquery-1.7.2.min.js"> </script> </head> <body> <h2>Welcome to JQuery</h2> <p> This page will say Hello on page load. </p> <script language="javascript" type="text/javascript"> $(document).ready(function () { alert("Hello World - JQuery Foundation"); }); </script> </body> </html>
I fired the IE browser and navigated to this file "Test3.html". The browser shows the alert box and displayed Hello World.
As we can observe from the code there is not much difference in Syntax if we are using JQuery library of either of the parent company.
Anything in JQuery begins with $(). JQuery uses “$” as the shortcut for “JQuery”. We can pass the DOM, HTML tags, class name or HTML control IDs as parameter to this. We are telling JQuery that we are dealing with which tag or class in the HTML document. In place of $ we can use JQuery in the scipt code. So $(document) can be written as JQuery(document).
Now in the code we have three elements to understand:
$(document) = this element represents the document which is using the JQuery file. The current document which is loaded in the browser. If you come from Java or .NET background it is your "this".
ready = This is the event name of the current document. So when the document is ready for the browser the ready event is fired and code block written inside this event will fire up.
alert = This is the JavaScript alert box. If you want to show any message to the user you can use alert and pass on message as the parameter.
That is all for our first basic example. Thanks for reading till this point.
