The Mystery Of The jQuery Object: A Basic Introduction

Advertisement

Have you ever come across a bit of JavaScript like $(".cta").click(function(){}) and thought, “What the $('#x') is that” If it looks like gibberish to you, then please read on. If you think that snippet of code couldn’t possibly be real, then please browse some jQuery examples1. They are full of such constructions.

This article covers the key concepts that underly such intimidating fragments of code, but we’ll start with a longer example, based on a simple example of animating a square. You are probably not required to do this every day, but it makes for a concise and tidy demonstration:

$(document).ready(function(){
	$("button").click(function(){
		$("div").animate({height:"toggle"}).append("hi");
	});
});

We’ll go through every word and feature of the code above, along with a detailed look at JavaScript functions, the jQuery object and event-driven programming. By the end, you will hopefully no longer feel anxious in the face of such inscrutable code.

What Is $?

At first glance, $ looks like some special, complex JavaScript functionality. It’s not. The dollar symbol has no special significance in JavaScript. In fact, $ is just a function. It is an alternative name for the jQuery function2.

And the jQuery function is the raison d’être of the very popular jQuery library3. jQuery is a compact JavaScript library that irons out many of the annoying differences between browser manufacturers and provides many useful features for manipulating and animating parts of Web pages. You can include the jQuery function (i.e. $) in your page by referencing a copy of the library:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

Alternatively, you can download your own copy from jQuery’s website4:

Downloading jQuery is very easy.5
Downloading jQuery is very easy.

The jQuery function usually takes a single argument, either a selector or a JavaScript reference to something on the page, such as document.

A selector is just a piece of CSS, the part before the {…}. So, $("div") is the same as jQuery("div") and behaves very roughly like the following CSS by selecting all of the <div> tags on the current page:

<style>
	div {…}
</style>

At the beginning of our example, $(document) passes the JavaScript variable document into the jQuery function. The document variable is set automatically by the browser. It refers to the top of the document object model6 (DOM). The DOM is the browser’s own analysis of all of the HTML in the page, upon which the functionality of jQuery is built. For example, jQuery’s $("div") does roughly the same thing as document.getElementsByTagName("div").

Key Takeaway

Remember that $ is just a function, an alternative and handier name for the jQuery function.

The Dot

The . that comes after $(document) signifies a wealth of functionality. The dot is used with JavaScript objects. At its simplest, a JavaScript object is a collection of properties. For example:

var digger = new Object();
digger.species = "gerbil";
digger.name = "Digger";
digger.color = "white";

The inspiration for this JavaScript object.
The inspiration for this JavaScript object.

In this example, the variable digger is an object, and we have assigned it three subvariables: species, name and color. In object-oriented jargon, these are known as member variables. All of the above can be written more concisely as this:

var digger = {species:"gerbil", name:"Digger", color:"white"};

You can also assign functions as properties of an object. Gerbils are generally very quiet rodents, but occasionally they make a high-pitched meeping sort of noise. In JavaScript, that might look like this:

function meepMeep(){
	alert("meep meep");
}

In JavaScript, the boundaries between variables, functions and objects are quite blurred. So, a function can easily be assigned to a (member) variable:

digger.speak = meepMeep;

You can now call this function to make the gerbil speak:

digger.speak();

In object-oriented parlance, this is now a member function, or a method. Methods may refer to other methods and member variables within the same object. Imagine that Digger has learned to speak English, which is quite remarkable for a gerbil:

function myNameIs(){
	alert("Meep! I am a " + this.species);
}
//assign the function
digger.sayMyName = myNameIs;
//call the function
digger.sayMyName();

In the myNameIs function, the special variable this refers to the containing object, and this.species is the same as digger.species and has the value gerbil. If you tried to call myNameIs() by itself, without the object, then this would refer to the JavaScript window object and this.species would be window.species, which is undefined. The page would alert “Meep! I am a undefined.”

Objects can also be used as the return values for functions. This is a nice function that I use all of the time:

function giveMeTheGerbil(){
	return digger;
}

This will return a reference to the (global) variable or object digger, which you can then treat in exactly the same way as the original digger:

var digger2 = giveMeTheGerbil();
//alerts "Meep! I am a gerbil"
digger2.sayMyName();

However, you can skip the intermediary variable and just call sayMyName directly on the returned value of giveMeTheGerbil:

giveMeTheGerbil().sayMyName();

Stripped of the inner code, this is the same programmatic structure as in the first line of our original example:

$(document).ready(…);

The next section describes what ready actually does.

Key Points

The shorthand object notation looks like {name:"Digger", species:"gerbil"}.

The keyword this is used in a function attached to an object (a method) and refers to the containing object.

Anonymous Functions

In JavaScript, there are several ways to create functions. The following is the classic way (a function declaration7), which should be familiar to anyone who has done some programming:

function meepMeep(){
	alert("meep meep");
}

We’ve seen above that functions can be assigned to variables. We created the meepMeep function and assigned it to digger.speak. In fact, functions may be created anonymously (called a function expression), without any name at all, and then assigned to a variable:

var meepMeep = function(){
	alert("meep meep");
};

In JavaScript, functions may be assigned to variables and passed around just like any other variable. Consider this rather useless function:

function runMe(f){
	f();
}

It has one argument, called f. runMe treats that argument like a function and runs it. So, you could call this:

runMe(meepMeep);

This would simply run the meepMeep function. It gets more interesting when you don’t even bother to officially name meepMeep at all. You could simply create it when needed and pass it immediately into runMe:

runMe(function(){
	alert("meep meep");
});

In fact, anywhere meepMeep can appear, so can its anonymous equivalent. Take this:

meepMeep();

Instead of that, you could put an anonymous function in place of meepMeep, although wrapping it in an extra set of parentheses is required:

(function(){
	alert("meep meep");
})();

This is the result of all of the above ways of calling meepMeep().
This is the result of all of the above ways of calling meepMeep().

This technique is often used to provide variable scoping in JavaScript. Can you follow what this code will do?

var x=3;
(function(){
	var x=4; console.log("x is " + x);
})();
console.log ("x is " + x);

The var keyword within the function is important here. It declares a variable within a function. The anonymous function here defines its own local variable, x, assigns it the value 4 and then outputs it. Because of the var keyword, the function’s x remains completely separate from the var x=3 on the previous line. Therefore, this code will output x is 4 and then x is 3.

Because our gerbil is no longer doing any high-pitched squeaking, the code above uses console.log8, rather than alert, to output its result. The console.log is available in modern browsers (in other words, not in old Internet Explorers) and shows its output unobtrusively in the browser’s error, Web or JavaScript console9.

Anonymous functions are the next piece of the puzzle. jQuery’s ready10 method is like a time-delayed version of the runMe function above. The ready method waits until the DOM has fully loaded and then runs the provided function. So, when the document is finally ready, the following anonymous function will run:

function(){
	$("button").click (…)
}

The $(document).ready(…) is a common way for programmers to execute some JavaScript only after all of the HTML document has been processed.

Key Takeaway

Anonymous functions are functions without a name, like function(){alert(1);}. They can be assigned to variables, passed into other functions or run immediately to provide scoping.

Method Chaining

Before delving further into the sample code, we need to review one more concept that often occurs in JavaScript. Method chaining11 refers to running several functions in a row. This is really just an extension of the giveMeTheGerbil() example above:

giveMeTheGerbil().sayMyName();

Let’s redefine the gerbil-related functions to return a reference to themselves.

digger.speak = function(){
	alert("meep meep"); return this;
}
digger.sayMyName = function(){
	alert("Meep! I am a " + this.species); return this;
}

These two functions now do something to digger and then return digger. Not much different, but the addition allows us to chain the functions together:

giveMeTheGerbil().speak().sayMyName().speak();

This line of code will first run giveMeTheGerbil, returning a reference to the digger object. Now, it essentially becomes equivalent to this:

digger.speak().sayMyName().speak();

Next, the speak method of the digger object runs and alerts meep meep. This also returns a reference to digger, and then the code becomes this:

digger.sayMyName().speak();

After that, sayMyName runs and again returns a reference to digger, etc. It will cause three alerts: meep meep, Meep! I am a gerbil, meep meep.

This sort of chaining often happens in JavaScript. You might see it with string12 objects:

var s = "I have a dagger."; 
console.log(s.substring(9, 15).replace("a", "i").toUpperCase());

The code above starts with the full string s, extracts a substring, replaces the letter “a” with “i,” changes the resulting word to uppercase and returns the resulting string, which is shown in the console log.

Of course, chaining happens all over the place in jQuery13 and appears in our example:

$("div").animate({height:"toggle"}).append("hi");

The $("div") looks up all <div> elements in the page and returns them as part of a jQuery object. It runs the animate method on the jQuery object and then runs append, each time returning and operating on a jQuery object.

These chains can get long. Below is a particularly long jQuery chain14, proudly posted several years ago:

A very long jQuery chain.
A very long jQuery chain.

Generally speaking, long chains like this are hard to debug and maintain. So, avoiding really long ones is usually a good idea, but they can be useful in miniature.

Key Takeaway

Functions belonging to objects (i.e. methods) that return references to themselves may be chained together, allowing you to execute a lot of code without storing the intermediate results.

The jQuery Object

Our example uses several jQuery methods: ready, click, animate and append. These are all functions attached to the jQuery object, similar to how speak and myNameIs are functions attached to the digger object and to how substr, replace and toUpperCase go with strings.

These functions are all methods of the jQuery object, and they all return a jQuery object. Internally, though, the jQuery object is far more sophisticated than digger or a string could ever hope to be.

As mentioned earlier, the barriers between concepts can get blurry in JavaScript. The jQuery object behaves like an object and an array. You treat it like an object when you chain, but you can also treat it like an array:

var mydivs = $("div");
for (var i = 0; i < mydivs.length; i++) {console.log(mydivs[i].innerHTML);}

In this example, $("div") looks up all <div> elements in the page and stores the resulting jQuery object in the mydivs variable. The code loops through the jQuery object as if it were an array of nodes (actually, a NodeList15) in the DOM. These nodes are also objects16 with properties of their own, such as outerHTML and innerHTML.

Achieving the same result by turning these nodes back into jQuery objects and then calling the jQuery method html is also possible. To do this, pass them into $, which turns pretty much anything into a jQuery object:

var mydivs = $("div");
for (var i = 0; i < mydivs.length; i++) {console.log($(mydivs[i]).html());}

Both of these will output the HTML contents of each <div> on the page.

Note that when you run a piece of jQuery such as $("div").animate(…).append(…);, the animation happens on all of the <div> elements in the jQuery object, and they are all passed to the next function in the chain as part of the jQuery object. (This is true of most but not all jQuery functions. See jQuery’s documentation17.)

Key Takeaway

The jQuery function $ and many of the jQuery methods like click and animate return a jQuery object, which is part object and part array. The array-like part contains references to nodes in the DOM.

Putting It All Together

We can now look at the example as a whole. The $(document) returns a jQuery object referring to the page itself. The .ready(…) is passed a function that runs when the page has finished parsing and the DOM is fully available:

function(){
	$("button").click(…);
}

This function uses the main jQuery function to look up all <button> elements in the page. It returns a jQuery object that has a click method. The click method is passed another anonymous function:

function(){
	$("div").animate ({height:"toggle"}).append("hi");
}

This function looks up all <div> elements, returns a jQuery object, and first calls its animate method. The argument to jQuery’s animate method is a list of properties to animate, passed in as the shorthand object {height:"toggle"}. This tells jQuery to toggle the height of all <div> elements in the page. The first time, it will reduce their heights to zero. The next time, it will animate them back up to their original heights.

The animate method also returns a jQuery object. This is chained to the append method that adds the “hi” string to every <div> each time the button is pressed. Paste this into an HTML page or view it on JS Bin18 to see the whole thing in action:

<button>Click me</button>
<div style="width:100px;height:100px;background:green;"></div>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$("div").animate({height:"toggle"}).append("hi");
	});
});
</script>

How the page looks after a few clicks.
How the page looks after a few clicks.

Every time the <button> is clicked, the green <div> collapses or expands and gets an extra “hi” added to it. This snippet of code won’t get you out of any life-threatening situations, but it is good to fully understand.

Event-Driven Headaches

This snippet looks innocent enough:

//set h to 200
var h = 200; 
$(document).ready(function(){
	$("button").click(function(){
		//animate up to h, 200 pixels high
		$("div").animate({height:h});
	});
});

You would expect the <div> to expand to 200 pixels. But a lot could happen in between the variable h being assigned the value of 200 and the animation actually running. In a complex jQuery application, the variable name h might get reused, or some other part of your application might change the value. And you will stare intently at those few lines of code wondering why on Earth your box animates to only 50 pixels high, instead of 200. It’s because somewhere else in your code, you might have an unobtrusive for (h=1; h<50; h++) {…} changing the value of h.

To be fair, this issue is not caused by jQuery or by anonymous functions, but it is a hazard of event-driven programming in general. The lines above run at three different times: when they are first processed ($(document).ready(…)), when the document loads ($("button").click(…)) and when the button is clicked ($("div").animate(…)).

Server-side code written in languages such as PHP runs sequentially and in order, from beginning to end, outputting HTML to make a Web page and then finishing. JavaScript can do this, too, but it is most powerful when attached to events, such as button clicks. This is event-driven programming19, and it’s not only JavaScript. The programming behind smartphone apps is also largely event-driven, with Objective-C or Java or C++ responding to touchscreen events on your Apple, Android or Windows phone.

If the code above were translated into Java and run on an Android phone, then the reference to h in the innermost function would cause an error. This is because h has not been declared as a global (or static in Java) variable, and so the inner code has no idea what its value should be. While that wouldn’t change the issue, it would at least force you to think more clearly about how to use variables.

One quick way to avoid headaches like this is to scope your variables. This example can be fixed by declaring the variable var h in the first anonymous function. Now, that h will take precedence over any other global h:

$(document).ready (function(){
	//set h to 200
	var h = 200;
	$("button").click (function(){
		//animate up to h, 200 pixels high
		$("div").animate ({height:h});
	});
});

If you must use a global configuration variable, then another technique is to name and group the variables well. And clearly commenting your code is always recommended:

//properties of the animation
var animationConfig = {upToHeight:200};
//when document is loaded
$(document).ready(function(){
	//when any <button> element is clicked
	$("button").click(function(){
		//change the height of all <div>s
		$("div").animate({height:animationConfig.upToHeight});
	});
});

Conclusion

This article is a beginners’ guide to JavaScript syntax and how it is used by jQuery. jQuery is just a JavaScript library that has a special-looking function, $, and that encourages the use of shorthand objects, anonymous functions and method chaining. jQuery is not alone — libraries like YUI20 (Yahoo User Interface) do similar things.

You can now look a complex piece of jQuery directly in the face with no doubt or uncertainty in your mind. You know what it does. Due to the complexities of event-driven programming, you might not be sure when, but you do know how.

(al, ml)

Footnotes

  1. 1 http://learn.jquery.com/about-jquery/how-jquery-works/
  2. 2 https://api.jquery.com/jquery/
  3. 3 http://jquery.com/
  4. 4 http://jquery.com/download/
  5. 5 http://jquery.com/download/
  6. 6 https://developer.mozilla.org/en/docs/Web/API/Document
  7. 7 http://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/
  8. 8 https://developer.mozilla.org/en-US/docs/Web/API/console.log
  9. 9 http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers
  10. 10 http://api.jquery.com/ready/
  11. 11 http://en.wikipedia.org/wiki/Method_chaining
  12. 12 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String
  13. 13 http://schier.co/post/method-chaining-in-javascript
  14. 14 http://forum.jquery.com/topic/jquery-my-longest-chain-so-far
  15. 15 https://developer.mozilla.org/en-US/docs/Web/API/NodeList
  16. 16 https://developer.mozilla.org/en-US/docs/Web/API/Element
  17. 17 http://api.jquery.com/
  18. 18 http://jsbin.com/rikemiho/1
  19. 19 http://en.wikipedia.org/wiki/Event-driven_programming
  20. 20 http://yuilibrary.com/

↑ Back to topShare on Twitter

Paul Tero is an experienced PHP programmer and server administrator. He developed the Stockashop ecommerce system in 2005 for Sensable Media. He now works part-time maintaining and developing Stockashop, and the rest of the time freelancing from a corner of his living room, and sleeping, eating, having fun, etc. He has also written numerous other open sourcish scripts and programs.

Advertising
  1. 1

    Very helpful, thank you for posting.

    5
  2. 2

    You can´t have it clearer than this!! . I´m just starting to learn Jquery and this is the best tutorial I´ve seen. Thank you!!!

    11
  3. 3

    Thank you for writing this article. After reading every “introduction” post, article, etc.. about jquery, this post brought the “aha moment”. So again, thank you!

    1
  4. 4

    Why does an article written in 2014 have screenshots of Chrome before the hamburger menu? Also, why are you attaching events directly to the element and not using delegate binding? I can’t share this article because delegate events are the only way events should be bound.

    -17
    • 5

      Matt, are you referring to attaching events like this?

      $(document).on(“click”,”.button”, function() {
      console.log(“Clicked”);
      });

      1
    • 6

      That’s simply not true. Who says that’s the only way? You’re just talking big…

      3
    • 7

      I don’t see how that would be the only respectable way. Delegation is very useful if you work with a dynamic lists of items that have the same behaviour. Especially in case of a paginated list, delegation makes it easy to avoid having to assign event behaviour to every single instance.

      Yet there are many cases (in particular if it comes to static content) where delegation would not make any sense because it adds an extra abstraction. Saying that delegation should always be used for event binding, is like enforcing design patterns everywhere without contemplating if it actually makes sense in a particular case.

      3
    • 8

      It’s actually ONLY then a must have, IF you plan on using nasty stuff like replacing or adding content with innerHTML (jQuery’s version being html()). This pattern or scheme is replacing the .live() function call which has been rewritten and is being deprecated in jQuery v1.7+

      Using functions like insertAdjacentHTML will avoid this situation. Sadly, not many developers actually know JS that well, so in most cases, this is still a requirement for proper event handling with jQuery.

      cu, w0lf.

      1
  5. 9

    Thank you for your article, Paul.

    I understand the need to address different audiences with different backgrounds (absolute beginner to seasoned developer) and I am not going to complain that this is clearly addressed to the complete beginner who has never used jQuery before. However, the issue I take is that all the information provided in this article is available on the jQuery website in a very understandable and straight-forward way.

    Don’t take this the wrong way, as you clearly have put a lot of effort into this article. You seem to be an experienced developer, so I would hope for an article that brings something new to the table that can’t be read elsewhere – and I am convinced your experience allows you to write about subjects that haven’t been written about a billion times.

    3
    • 10

      karissa wingate

      June 12, 2014 4:55 pm

      You may think that it’s written in a very clear way on the jquery site, but as someone who comes from a non-technical background, the jquery site is very intimidating and difficult to understand. This article nicely repeats some of the basic information about jquery in an easy to consume way, in small manageable pieces. Excellent job Paul, I look forwards to reading more of your articles.

      3
  6. 11

    Thanks for demystifying jquery (and javascript to an extent) for the lesser mortals like me. Looking forward to more tips!

    3
  7. 12

    Oh, smashingmagazine, where is your old good days..

    -1
    • 13

      I kind of have to agree (at least that is if your mean it the way I do ;)). To allow basic tutorials to be featured prominently on the front page kind of changes things. Maybe it’s about exploring a different target audience, but I’d rather see that in a separate section and keep the main magazine about the best practices and expert views.

      0
  8. 14

    I hate to say it but… This article confused me more than anything else… I have been using jQuery for a while and understand how it works. JavaScript on the other hand I dislike very much. In fact, I avoid it. So this article confused me. Now I don’t understand JS or jQuery…

    Bummer… :(

    If I knew what I was reading I would say “Great Read!”

    Either way, Great Read! :)

    -3
  9. 17

    Sunday Everyday

    May 31, 2014 6:49 am

    Honestly,

    what is the point of posting an article about PLAIN jQuery syntax in the YEAR 2014?
    Judging by the title of the article, I thought you would be explaining some inner mechanisims of the jQuery object, but my dish was left unserved. Who on the world would ever wonder what $(“.anyclass”).click(function() { … }) was in 2014 when jQuery has been around for more then half a decade, with literally tons of books and articles out there and you explain to me that the dollar sign is just an alias for the jQuery object? That should be fairly trivial for everyone after having read a few decent web development tutorials.

    You should have tagged this article as “Only for beginners” and better rename it to Introduction to Basic jQuery Syntax or something.

    So pointless.

    0
    • 18

      I actually wrote a blog article explaining how some of the code behind jQuery works. Here is the link if you want to check it out: http://traviswimer.com/blog/how-jquery-works

      Coincidentally, I posted it on the same day as this article, and both posts actually use most of the same sub-sections ($, method chainging, jQuery object). For a second I actually thought someone had ripped off my article, until I realized this post was basically just a jQuery tutorial.

      2
  10. 19

    This article feels like it gad been on hold since 2010 or so.

    0
  11. 20

    Thank you for your comments. Sorry that some of you found it too basic – it does say “a basic introduction” in the title. jQuery has been around for a while, but there are always new people coming to it. I like to explain things that I have had difficulty with in the past and this was one of them.

    @Matt – I took the screenshots on an old computer. Delegates are more efficient in some situations, but I wanted to keep it as simple as possible.

    @Ivan – I don’t see how you can use jQuery but avoid Javascript, but sorry this article has made it worse.

    4
  12. 22

    Dendy B. Sulistyo

    June 1, 2014 4:14 pm

    Thanks Paul. Now jquery is easy to understand

    1
  13. 23

    For sure this article proves how word ‘object’ in title boosts traffic :) I would also complain about to basic stuff going on, but…

    I remember 2009 as it was day before yesterday. Back then I started to read Smashing and it also happen that I started to use WordPress. That time there was a few milestone articles here, digging deep into various aspects of WordPress (Advanced power tips part 1 & part 2 was always my favourite). Then after some time I’ve got dissapointed that the ‘good articles’ has stopped to appear. But after a little thinking it came to me… What new to say? If most of the stuff has been covered, and it’s all still fully valid – what you can do? Just sit and wait as some new advanced topic will appear over a time and write about it, or start publishing way more basic articles and get complains from old readers. Or just repeat the old content in new form?

    All I say is – we can not expect to have new, exciting and advanced articles every day, as most of that kind of stuff has been written down long time ago. The only problem with this article is that the title made to some of us a promise that you will find inside something on the level of a chapter from John Resin’s book “JavaScript Ninja”. Just my few cents…

    2
  14. 24

    You have explained the most complex thing of javascript in a simplest words. Thanks a lot for the article. No one has explained about chaining of methods by this kind of simple way.

    2
  15. 25

    Really for a beginners it is very helpful article.

    2
  16. 26

    You have explained the most complex thing of javascript in a simplest words. Thanks a lot for the article. No one has explained about chaining of methods by this kind of simple way.

    1
  17. 27

    Thank you for this! It doesn’t seem all that daunting afterall!

    0
  18. 28

    Hey Paul,

    Great article for getting started. The only thing that I’d mention is regarding protocols.

    By hardcoding an http link to the jQuery library, any secure site will be ‘broken’.

    Better to ignore the protocol altogether:

    which means it then works over both http and https.

    1
  19. 30

    Thanks for such nicely written article explaining the basics of that confusing syntax. Not all were around the time jquery came about, there will always be new guys picking up everyday !

    0
  20. 31

    Excellent title and article. Great job!!

    0
  21. 32

    Divyanshu Agrawal

    October 29, 2014 3:45 pm

    Wow! I had been trying to learn jquery for a long time. But THIS is the only place where I could understand what it reyally is! :) Thanks a lot .

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top