How to Use AJAX jQuery for HTML5 and CSS3 Programming

Although many outstanding AJAX/JavaScript libraries are available for HTML5 and CSS3 programmers, jQuery has quickly become one of the most prominent. Here are some reasons for the popularity of jQuery:

  • It's a powerful library. The jQuery system is incredibly powerful. It can do all kinds of impressive things to make your JavaScript easier to write.

  • It's lightweight. You need to include a reference to your library in every file that needs it. The entire jQuery library fits in 55K, which is smaller than many image files. It won't have a significant impact on download speed.

  • It supports a flexible selection mechanism. jQuery greatly simplifies and expands the document.getElementById mechanism that's central to DOM manipulation.

  • It has great animation support. You can use jQuery to make elements appear and fade, move and slide.

  • It makes AJAX queries trivial. You'll be shocked at how easy AJAX is with jQuery.

  • It has an enhanced event mechanism. JavaScript has very limited support for events. jQuery adds a very powerful tool for adding event handlers to nearly any element.

  • It provides cross-platform support. The jQuery library tries to manage browser-compatibility issues for you, so you don't have to stress so much about exactly which browser is being used.

  • It supports user interface widgets. jQuery comes with a powerful user interface library, including tools HTML doesn't have, like drag-and-drop controls, sliders, and date pickers.

  • It's highly extensible. jQuery has a plug-in library that supports all kinds of optional features, including new widgets and tools like audio integration, image galleries, menus, and much more.

  • It introduces powerful new programming ideas. jQuery is a great tool for learning about some really interesting ideas like functional programming and chainable objects.

  • It's free and open source. It's available under an open-source license, which means it costs nothing to use, and you can look it over and change it if you wish.

  • It's reasonably typical. If you choose to use a different AJAX library, you can still transfer the ideas you learned in jQuery.

How to install jQuery

The jQuery library is easy to install and use. Follow these steps:

  1. Go to jquery.com.

  2. Download the current version.

    Currently, the most current version is 1.10.2. There is a 2.X series, but these versions do not support older browsers, so will not be adopted until the older browsers (particularly IE 6 and less) are no longer used at all.

    You may be able to choose from a number of versions of the file. The minimized version is recommended for actual use. To make this file as small as possible, every unnecessary character was removed. This file is very compact but difficult to read. Download the nonminimized version if you want to actually read the code, but it's generally better to include the minimized version in your programs.

  3. Store the resulting file to your working directory.

    jQuery-1.10.2.min.js is the current file.

To incorporate the library in your pages, simply link to it as an external JavaScript file:

 <script type = "text/javascript"
   src = "jquery-1.10.2.min.js"></script>

Be sure to include the preceding code before you write or include other code that refers to jQuery.

How to import jQuery from Google

Easy as it is to add jQuery support, you have another great way to add jQuery (and other AJAX library) support to your pages without downloading anything. Google has a publicly available version of several important libraries (including jQuery) that you can download from its servers.

This has a couple of interesting advantages:

  • You don't have to install any libraries. All the library files stay on the Google server.

  • The library is automatically updated. You always have access to the latest version of the library without making any changes to your code.

  • The library may load faster. The first time one of your pages reads the library from Google's servers, you have to wait for the full download, but then the library is stored in a cache (a form of browser memory) so that subsequent requests are essentially immediate.

Here's how you do it:

<script type = "text/javascript"
  src="http://www.google.com/jsapi"></script>
<script type = "text/javacript">
 // Load jQuery
 google.load("jquery", "1");
 //your code here
</script>

Essentially, loading jQuery from Google is a two-step process:

  1. Load the Google API from Google.

    Use the first <script> tag to refer to the Google AJAX API server. This gives you access to the google.load() function.

  2. Invoke google.load()to load jQuery.

    • The first parameter is the name of the library you want to load.

    • The second parameter is the version number. If you leave this parameter blank, you get the latest version. If you specify a number, Google gives you the latest variation of that version.

Note that you don't need to install any files locally to use the Google approach.

All these options for managing jQuery can be dizzying. Use whichever technique works best for you.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com