How jQuery works

• Download demo - 572 B

Introduction

jQuery is the most popular JavaScript library nowadays. It uses CSS selector style syntax to fetch elements in document object model (DOM) into wrapped element set, and then manipulate elements in the wrapped set with jQuery functions to archive different effect. Though the way of using jQuery is very easy and intuitive, we should still understand what is happening behind the scene to better master this JavaScript library.

Basic Concepts in jQuery

There are some basic concepts in jQuery should be known before we dig into the jQuery library

$/jQuery object and $()/jQuery() function

The $/jQuery object is a global object through which all jQuery functions are accessed.

It is also a function object, so the most common approach uses it is via $()/jQuery() function. $()/jQuery() function can be used to select a group of elements in DOM. It is also known as wrapper function. One simple example of using $()/jQuery() function is this

$(“#ABC”);
or
jQuery(“#ABC”);

The parameter passed into $()/jQuery() function is selector. Selector is an expression that has CSS selector style syntax. In above example, I am trying to select elements that have id equal to #ABC.

Wrapped set

Wrapped set is an array-like structure that contains all the selected DOM elements. The above $(“#ABC”) returns back a wrapped set. You can iterate over the wrapped set like an array or access individual elements via indexer. More importantly, you can apply jQuery functions against all the selected elements.

How the jQuery $()/jQuery() function works behind the scene

Because majority of jQuery function calls are started with $()/jQuery() function, so we need to understand what happening inside of it. Before go into $()/jQuery(), let’s take a look where $/jQuery object is defined. The $/jQuery object is the access point to jQuery functions. It’s a global function variable defined in jQuery. Here is the line of source code in jQuery defines it

// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;

var jQuery = (function() {
…

var jQuery = (function ()
{
	// Define a local copy of "k"
	var k = function (selector, context)
	{
		// The k object is actually just the init constructor 'enhanced'
		var kobj = new k.fn.init(selector, context);
		return kobj;
	};

	//Define k’s fn prototype, specially contains init method
	k.fn = k.prototype = {
		init: function (selector, context)
		{
			if (!selector)
			{
				return this;
			}
		}
	};

	// Give the init function the "k" prototype for later instantiation
	k.fn.init.prototype = k.fn;

	// Return "k" to the global object
	return k;
})();

(function () { alert("hello world"); })();

function() { alert("hello word"); }

(function() { alert("hello world"); })

function (selector, context)

function (selector, context)

function display()
{
  alert("hello world");
}

display();

function Car(model)
{
  this.Model = model;

  this.Drive = function() { alert("Go") }  
}

var car = new Car("Ford");

function open() {
  //open logic
}

var o = { }

var apple = {
  type: "macintosh",
  color: "red",
  getInfo: function() {
    return this.color + ‘ ‘ + this.type + ‘ apple’;
  }
}

var add = new Function(a, b, "return a + b;");

var addition = function(numberA) { return function(numberB) { alert (numberA + numberB); }}

var add2 = addition(2);
var add3 = addition(3);
add2(3); // it will display 5
add3(3); // it will display 6

// Define a plugin function Test
jQuery.fn.Test = function () { alert("Test"); }

// Invoke Test function via jQuery() function
jQuery().Test();

Summary

By understanding how jQuery works, we can better master this JavaScript library. What I am showing in this article is just a skeleton of jQuery library. After grasp the basic design principal and mechanism of jQuery library, you can look into the original source code of jQuery library to learn more on how it take advantage of variant JavaScript language features to accomplish the goal of simplicity and extensibility.