Wednesday, April 23, 2014

Starting with jQuery - Part 1

How to start with jQuery?

1. Go to http://jQuery.com and download either jQuery 1.x if you're planning on supporting older browsers (e.g. IE 6-8) or jQuery 2.x if you'd like more slimmer version that doesn't have the overhead of supporting older versions and it's much leaner. In other words jQuery 2.x is meant for IE 9 and higher.

You'll find two different versions for each of the versions one with *.min and the other without the *.min. The *.min is a very condensed version of jQuery with all the whitespace removed and shortened variables and is generally meant for production. If you're developing code and would like to be able to step through it, I recommend downloading one without the suffix .min.

2. Reference it in your page:

<head>
  <script type="text/javascript" src="jquery.js"></script>
</head>

Alternatively, you can use Content Delivery Network or CDN - either from Microsoft or Google 


<head>
 <script type="text/javascript"
   src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.js">
</script>
</head>
OR from Google:
<head><script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script></head>

- We're almost Ready()

When jQuery is loaded the window document or object gets a property called jQuery and that property is initialized IFF jQuery is loaded. i.e. window.jQuery.
You can either use window.jQuery or you can use the alias of it which is a $.
If you were going to peek at the jQuery source code at the end of the file you would find this line:
window.jQuery = window.$ = jQuery;
So to detect when the page is 'ready' (the DOM hierarchy is loaded) we can simply use:
$(document).ready(function(){
              // do something useful here..
            });
          </script>
This is it for the first post.



No comments:

Post a Comment