Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

The Mystery Of The jQuery Object: A Basic Introduction

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:


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.

Further Reading on SmashingMag: Link

What Is $? Link

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 function5.

And the jQuery function is the raison d’être of the very popular jQuery library6. 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=""></script>

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

Downloading jQuery is very easy.8
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:

	div {…}

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 model9 (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 Link

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

The Dot Link

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";
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:


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

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"

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


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


The next section describes what ready actually does.

Key Points Link

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 Link

In JavaScript, there are several ways to create functions. The following is the classic way (a function declaration10), 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){

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


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:

	alert("meep meep");

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


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

	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;
	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.log11, 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 console12.

Anonymous functions are the next piece of the puzzle. jQuery’s ready13 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:

	$("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 Link

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 Link

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


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:


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


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:


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 string15 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 jQuery and appears in our example:


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 chain16, 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 Link

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 Link

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 NodeList17) in the DOM. These nodes are also objects18 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 documentation19.)

Key Takeaway Link

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 Link

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:


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:

	$("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 Bin20 to see the whole thing in action:

<button>Click me</button>
<div style="width:100px;height:100px;background:green;"></div>
<script src=""></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 Link

This snippet looks innocent enough:

//set h to 200
var h = 200; 
		//animate up to h, 200 pixels high

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 programming21, 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
	//when any <button> element is clicked
		//change the height of all <div>s

Conclusion Link

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 YUI22 (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 Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22

↑ Back to top Tweet itShare on Facebook

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.

  1. 1

    Very helpful, thank you for posting.

  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!!!

  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!

  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.

    • 5

      Dylan Valade

      May 30, 2014 12:40 am

      Matt, are you referring to attaching events like this?

      $(document).on(“click”,”.button”, function() {

    • 6

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

    • 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.

    • 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.

  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.

    • 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.

  6. 11

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

  7. 12

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

    • 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.

  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! :)

  9. 17

    Sunday Everyday

    May 31, 2014 6:49 am


    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.

    • 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:

      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.

  10. 19

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

  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.

    • 21

      Haters gonna hate. It is a great article. This is new material for some of us.

  12. 22

    Dendy B. Sulistyo

    June 1, 2014 4:14 pm

    Thanks Paul. Now jquery is easy to understand

  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…

  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.

  15. 25

    Really for a beginners it is very helpful article.

  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.

  17. 27

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

  18. 28

    Iain Campbell

    June 17, 2014 7:40 pm

    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.

    • 29

      You mean going with “//” instead of the protocol ways, right? ;)

      cu, w0lf.

  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 !

  20. 31

    Excellent title and article. Great job!!

  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 .

  22. 33

    Tanguy Thomas

    January 8, 2015 11:37 pm

    Really well written, sometimes hard but pleasant to read (especially when the Gerbil says “meep meep, Meep! I am a gerbil, meep meep.” :) ) and really didactive.
    It helps a lot understanding without having to memorize abscond sequences of characters like $(…) not understanding what they mean.
    Thanks a lot for this contribution.

  23. 34

    Greetings from Ohio! I’m bored at work so I decided to browse your website on my iphone during lunch break. I enjoy the information you present here and can’t wait to take a look when I get home. I’m surprised at how quick your blog loaded on my cell phone .. I’m not even using WIFI, just 3G .. Anyhow, great site!

  24. 35

    I tried the example (modified a little) on an online Forth web page here, ,
    I think $(“button”) means *all buttons* and $(“.box”) means *all boxes* so I make multiple of them. And it works, click any of the buttons animates all of the boxes, so much fun. So I copy-paste the below code again to the jeForth web page, guess what? The existing buttons do the click event TWICE and the new buttons do it only once. That means $(“button”).click(function(){…}); actually *ADD* the handling function to the click event of those buttons it can see at that moment, instead of replace the existing event handler. So much fun. Thank you very much paul.
    —- copy-paste the below code to the mentioned Forth language online —-

    Click me

    Click me


  25. 36

    This is one of the best programming-related articles I’ve ever read. I’ve been working with jQuery and just could not understand what all the $’s and ()’s were for, which made it difficult to remember how to type jQuery code. I knew there were reasons for all of it, and I really appreciate that this article explains each part of the syntax completely so everything makes sense. Now I’m not nearly as intimidated as I was.

    Thank you for such a well-written and well-thought-out article!!!!

  26. 37

    Thank you, that was clear crystal explanation


↑ Back to top