jQuery summary (I)

First of all, jQuery is a JavaScript library, and all reference and relative API document can be found at Official website. So for the explanation of “jQuery”, that website’s definition on the first page can be referenced: It is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

1. Why bother jQuery

a. Overcoming browser differences
Different browsers handle DOM manipulation, transparency effects, and animation in different ways,using a JavaScript library allows you to completely bypass most of those challenges, giving you access to an API that deals directly with the effects or result you actually want to accomplish. Revoking jQuery allows you to integrate functionality without wondering whether or not it will work in a particular browser.

b. Unobtrusive JavaScript
Another reason to use a JavaScript library is that all libraries allow you to include JavaScript in your pages unobtrusively, thus keeping your behavior layer (the JavaScript) separate from the content and presentation layers (the XHTML and CSS).

c. Accomplishing complex tasks with ease
jQuery is a very powerful library and may the most mature and stable Javascript library comparing with others. It can manipulate any element or set of elements on a web page with just one line of code, which you may compose/test your own function to achieve the same effects for at least hours(Maybe I am just writing slow….).

2. Pre knowledge for jQuery

a. Understand CSS concepts especially the selector usage
jQuery often utilizes CSS-based syntax to manipulate DOM elements. When I first develop function by jQuery, googled quite a few code snippet, but really confused the way jQuery used to reference an element. As in javascript, normally you just use document.getElementByID or similar etc. But after being familiar with the CSS selector syntax, I can feel the power and charming of the jQuery way. Read the following article you can get a basic idea of how CSS selector works 30 CSS Selector you need to know and the way to use it in jQuery Find the element you want

b. JavaScript concept

As jQuery is an essential a JavaScript library, so understand JavaScript concept, syntax is a must. Most of us already understand OO concepts which is the core mechanic of JS, but JS has some specialties comparing the other OO language. Some important concept you may need to consider in your development
@ It is a parsed language and not a compiled one;

@ Anonymous function. In C#, delegation has the similar feature. you will noticed that jQuery use anonymous function to bind a function to the element event, such as button click, mouse hover etc.

@ JS doesn’t support a notion class. This may be changed in JS 2.0? But JS function can behave similarly as class. See the car object creation below.

/**
 * @constructor
 */
function Car(make, model, year, color) {
  this.Make = make;
  this.Model = model;
  this.Year = year;
  this.Color = color;
  this.FullName = this.Year + " " +
  "<b>" + this.Make + "</b> " +
  this.Model;
}
var mySUV = new Car("Toyota", "4Runner SR5",2001, "Thundercloud");
document.write ("I drive a " + mySUV.FullName);

@ JSON. JSON can let you build javascript object, when jQuery call ajax, if the back webservice methods’ parameter needs an object, then you need build JSON object (can deliver XML but JSON object is much more convenient than XML parser) then “stringify” it and parse to the web service. (This will explain more in my “jQuery AJAX” article). JSON details can be referenced to JSON Tutorial. Before use JSON, you need download the .js file and reference. JSON official website

3. Finally jQuery itself

Before getting started with any jQuery development, you’ll first have to download the latest version of the jQuery library from the official website and include it in your pages:

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

After that, I think the best jQuery tutorial are already on Internet, so just put some links. An overview video tutorial Video tutorial, tutorial for beginner, Official tutorial (Official normally is boring…) 51 best tutorial Another absolute beginner tutorial

4. Performance.

jQuery is so powerful, however if you abused to use jQuery, the web page loading or switching could be slow and sometime the animation will be stuck. So use jQuery only when it really needs and also consider the following tips to improve the performance as well, all of them are very straight forward.
10 tips to improve jQuery performance