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)

afeldspar
  • 1,343
  • 1
  • 11
  • 26
  • In the second example, it's actually applying a CSS rule to the elements in the selector, and not setting a class. (`.addClass()`). – emerson.marini Aug 24 '14 at 00:04
  • +1 for a really good question anyway. – emerson.marini Aug 24 '14 at 00:07
  • Ooops, you're right. Do you think I should update the question to fix that error? – afeldspar Aug 24 '14 at 00:08
  • Yes, I think it's OK to do that. :) – emerson.marini Aug 24 '14 at 00:19
  • A regular JavaScript parser parses it because it's regular JavaScript. I don't understand the point of your Q&A. Object keys are not accessed with `()`. – cookie monster Aug 24 '14 at 01:17
  • 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 Aug 24 '14 at 01:30
  • So you didn't understand what `$` was. Is that right? – cookie monster Aug 24 '14 at 01:56
  • I knew that `$` was an alias for the jQuery library, because every jQuery resource explains that. But no jQuery resource I'd turned to (before the library book I got this morning mentioned it in passing) explained that the jQuery object is a function. – afeldspar Aug 24 '14 at 02:01
  • I really don't see how anyone can consider this a duplicate of the other question. Perhaps they look the same to someone who already **knows** the answers, but serving such people is not why Stack Overflow encourages us to write these Q&As. – afeldspar Aug 24 '14 at 12:10

1 Answers1

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.

afeldspar
  • 1,343
  • 1
  • 11
  • 26
  • 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 Aug 23 '14 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 Aug 23 '14 at 23:54
  • 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 Aug 24 '14 at 00:07