“Vision without execution is just hallucination.” --Henry Ford

Tip: Add The Power of jQuery to your site.

What is jQuery?

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

By adding the jQuery library to your site you enable powerful reusable, cross-browser compatible code.

How do I add the jQuery library to my site?

The easiest way is to use CDN (Content Delivery Network) Hosted jQuery. That may sound difficult but all it means is the jQuery library is already loaded on a server for public use and you just need to link to it. Just add the following code to your web pages and you will have access to the jQuery library for your scripting needs. The CDN I choose to use is Google so I add this line of code at the end of my web pages just before the closing ‘</body>’ tag, like this:

  1.         <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  2.     </body>
  3. </html>
Code Sample 1

What does that code mean?

The beginning of line 1; “<script type="text/javascript" src=” tells the browser to use a script and we are saying it is JavaScript by declaring the ‘type’. The ‘src’ tells the browser where the file or content can be found. Note: I did not use ‘http’ or ‘https’ protocol in the ‘src’ declaration. This is not a mistake. I purposefully omit it so I can use either protocol without having to change the link to the CDN.

The ‘src’ instructs the browser to load the content from the server located at “//ajax.googleapis.com” with the following path “/ajax/libs” and these parameters “/jquery/1/jquery.min.js”. You can specify to load a specific version of the jQuery library by changinging the number parameter. For example, if you want to use version ‘1.5’, set the parameters to “/jquery/1.5/jquery.min.js”.

Using the parameters as shown in Code Sample 1 you will get the latest jQuery library loaded on the CDN server. At the time this article was wriiten the current version was 1.7.2. See jQuery Current Release

How do I use the jQuery library?

You can link to a script file on your server that contains your jQuery code like this:

  1.         <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  2.         <script type="text/javascript" src="/js/script.js"></script>
  3.     </body>
  4. </html>

or write your jQuery code on the page like this:

  1.         <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  2.         <script type="text/javascript">
  3.             jQuery(function($) {
  4.                 // Your code ...
  5.             });
  6.         </script>
  7.     </body>
  8. </html>

By starting your code with “jQuery(function($) {” your code will run when the browser signifies the document is ready and you will not run into collision issues if you choose to use additional libraries on your page.