4

I'm trying to understand jQuery, but I'm hindered by the syntax looking so strange to me. I don't even understand how a regular JavaScript parser parses it! I can read sample code and I'll understand from the accompanying material what it's doing, but I don't understand how.

I understand that $ is just an alias for jQuery, but that doesn't answer the question. Take the classic jQuery function used to delay things until the page is fully loaded:

$(document).ready(function() {
  ...
});

or a jQuery selector that selects all p elements in the DOM and applies a CSS rule:

$('p').css('color', 'blue');

So... somehow document and 'p' are recognized as keys, and associated with the appropriate values, right? Except that doesn't seem like it could be true, because then jQuery would have to pre-calculate the results it was going to return for any possible key it could be asked for, including element ids that jQuery probably couldn't know about! So how on earth does it really work?

(edited to fix an error in describing code)

9
  • In the second example, it's actually applying a CSS rule to the elements in the selector, and not setting a class. (.addClass()). Commented Aug 24, 2014 at 0:04
  • +1 for a really good question anyway. Commented Aug 24, 2014 at 0:07
  • Ooops, you're right. Do you think I should update the question to fix that error?
    – afeldspar
    Commented Aug 24, 2014 at 0:08
  • Yes, I think it's OK to do that. :) Commented Aug 24, 2014 at 0:19
  • 1
    But if you don't realize that $ IS a function, then you may know that jQuery MUST BE regular Javascript, but have no idea how the parser is seeing it. Reasoning that object keys are not accessed with parens won't explain what IS being accessed and how. And you won't be able to search on StackOverflow for 'How is jQuery's $ a function and an object?' if you don't know that it's a function.
    – afeldspar
    Commented Aug 24, 2014 at 1:30

1 Answer 1

10

The answer is simpler than you think. The $ is indeed an alias for the jQuery library... which is implemented as a single function. When you see code that looks like this:

$(document).ready(function() {
  ...
});

What you are seeing is:

  1. The jQuery function ($) being called...
  2. ... with the argument document ...
  3. ... which returns an object ...
  4. ... which has a ready method, that gets called ...
  5. ... with an anonymous function for its argument.

I had trouble with this when I first ran into it. I knew that in JavaScript, functions are first-class objects (which is why you can pass one as an argument) but somehow, that didn't make clear to me that something which was clearly a large, sophisticated object (i.e., the jQuery library) might also be a function.

In fact, it's both. It's a function, and it's also an object that has its own properties, which include functions. That's why sometimes you'll see code like the following:

$.getJSON('http://www.foo.com/search?q=....

In our previous code, $ was the function we were calling. In this code, $ is the object on which the function we are calling, getJSON, is located.

3
  • Yes, as explicitly encouraged in the FAQ. The question is basically how I would have asked it this morning at 10 o'clock; the answer is what I know now, having stumbled on a resource which happened to mention that key fact that the jQuery library is implemented as a single function.
    – afeldspar
    Commented Aug 23, 2014 at 23:51
  • That IS the reason, after all, that when you go to the screen for asking a question, there's a very big checkbox there that asks you if you want to answer your own question, and lets you compose both question and answer at once. Again, it's explicitly encouraged.
    – afeldspar
    Commented Aug 23, 2014 at 23:54
  • 1
    Sorry if I seem defensive - from Meta on this and other sites, it seems like there are some users who just remain convinced that answering your own question is somehow 'cheating', which it isn't. As for why it's written as if it was two different people, that's the best way I've found so far to make question and answer clear, to write it as an exchange between Pre-Understanding Me and Post-Understanding Me. They're both me, but that doesn't seem to be relevant to the question or answer, so I don't mention it.
    – afeldspar
    Commented Aug 24, 2014 at 0:07

Not the answer you're looking for? Browse other questions tagged or ask your own question.