Please visit my new Web Site https://coderstechzone.com
In a single line jQuery is a fast, lightweight client side library that is CSS3 compliant and supports almost all browsers. The jQuery framework is extensible and very nicely handles DOM manipulations, CSS, AJAX, Events and Animations. By using JQuery you can dramatically reduce your client side code. Jquery code is completely separate from your HTML code. Around the world many JQuery gurus develops handy plugins for you which you can use to boost up user experience while browsing your application. You can easily integrate JQuery with your AJAX application as well as Microsft start to provide intelligence on writing JQuery from VS 2008.
OK now start.
To Start JQuery first visit the JQuery site and download latest JS file.
Now create a project. Add a folder named Script and add the JQuery js file in this folder.
Now open your Default.aspx page and include the JQuery library just after the Title tag within Head section in your page like below:
<script src="Script/jquery.js" type="text/javascript"></script>
Now your application is ready to use JQuery. Ok first we try to write Hello World ! as usual. For this modify your default.aspx page Head tag HTML markup like below:
<head runat="server"> <title>An introduction to JQuery</title> <script src="Script/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { alert('Hello World !'); }); </script> </head>
Now run the project & you will get below output:
Another example:
Add a button control in your page & run the page & click on the button. You will get Hello World ! message again. To do that modify your default.aspx page Head tag & Body tag HTML markup like below:
<head runat="server"> <title>Untitled Page</title> <script src="Script/jquery.js" type="text/javascript"></script> <script language="javascript"> $(document).ready(function() { $('#btn').click(function() { alert('Hello World !'); }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <asp:Button runat="server" ID="btn" Text="Click Me" /> </div> </form> </body>
The output will be:
If you look at the button control HTML you wouldn't get any extra code to implement this click example like javascript. This is the beauty of JQuery which tell us that "Separate javascript code from HTML mark-up".
Now read the documentation from jquery site to enrich yourself and keep in mind that JavaScript is a language whereas jQuery is a library written using JavaScript.
0 comments:
I WOULD BE DELIGHTED TO HEAR FROM YOU