What is the difference between $() and $.?

Question

I would like to figure out the difference between using $() and $. from other developers.

As far as my understanding goes, $() refers to objects within the DOM, but I am not 100% clear as to how the $. works. I have used the $. format before, but never understood how it works.

For example:

$.each(element, function() {}); or $.fn etc...

It would be nice to shed some light and clarity on this topic.

`$` is referencing a function that's just like any other function. `$()` invokes the function. `$.foo` accesses a property on the function object. — , Aug 16 '13 at 15:02
possible duplicate of [How does jQuery have the $ object constructor and the methods associated with the $?](http://stackoverflow.com/questions/6313192/how-does-jquery-have-the-object-constructor-and-the-methods-associated-with-th) — JJJ, Aug 16 '13 at 15:09

score 13 · Accepted Answer · answered Aug 16 '13 at 15:02

$ is an identifier. It is used as a variable. It has a function assigned to it.

Putting () after a function will call it. The function jQuery assigns to it does lots of different things depending on what sort of arguments you pass to it. (It is horribly overloaded). (e.g. if you pass it a function, it will call that function when the document ready event fires. If you pass it a string of HTML, it will create a DOM representation of that HTML and wrap it in a jQuery object. If you pass it a DOM node, it will wrap that node in a jQuery object. If you pass it a CSS selector, it will search the document for matching DOM nodes and wrap them with a jQuery object).

In JavaScript, functions are objects. Objects can have properties. You can access a property on an object via $.name_of_property. Those properties can also have functions (or other objects) assigned to them.

losnir · Answer 2 · 2013-08-16T15:30:46.113

5

Basically, $() is a constructor function - you pass it a DOM selector, and it returns a jQuery object.

On the other hand, ~~$.each~~ $().each or ~~$.~~ $(). is a prototype function of jQuery.

Edit:

I stand corrected by @apsillers: $().each is a prototype functions, but $. (i.e. $.each) are defiend directly on jQuery, or $.

Code sample from jQuery to back up my claim:

jQuery.fn = jQuery.prototype = {
   .....
   .....
   .....
   // Execute a callback for every element in the matched set.
   // (You can seed the arguments with an array of args, but this is
   // only used internally.)
   each: function( callback, args ) {
      return jQuery.each( this, callback, args );
   },
   ....
   ....
};

As you can see, $().each is a prototype function. jQuery.each is an internal method. defined directly on jQuery.

Taken from jQuery Source Code.

edited Aug 16 '13 at 15:30

answered Aug 16 '13 at 15:02

losnir

1,141
9
14

1

It is *not* a constructor function. You do not call it with `new`. – Quentin Aug 16 '13 at 15:02
4

@Quentint It's not contradictory to what I've said - you can do `new $()` if you wish. Being able to call it without the `new` keyword doesn't mean it's not a constructor function. – losnir Aug 16 '13 at 15:06
1

The first sentence of your answer isn't so bad, though it would be odd to invoke it as a constructor using `new`. The second sentence isn't right. – Aug 16 '13 at 15:07
Nicely explained and simple and also, I agree with you that `$` is a constructor function, I asked a related question **[before](http://stackoverflow.com/questions/17503567/attempt-to-create-a-each-type-jquery-function-using-javascript-from-scratch)**. So basically `$.` are just other methods defined using `prototypical inheritance` correct? – Shivam Aug 16 '13 at 15:14
1

@losnir "*`$.each` is a `prototype` function*" -- That is not correct; `$.prototype.each` is the same as `$().each`, not `$.each`. – apsillers Aug 16 '13 at 15:18
2

@Shivam That is not correct. Functions defined on `$().` can be inherited from `$.prototype`. Functions on `$.` are defined directly. For example, `$().each` is inherited from `$.prototype.each` but `$.ajax` and `$.each` (a different function from `$().each`!) are defined directly on `$`. – apsillers Aug 16 '13 at 15:20
Ahh I see, that is very cleaver. Thanks losnir, apsiller and everyone else who contributed on this discussion. – Shivam Aug 16 '13 at 15:22

apsillers · Answer 3 · 2013-08-16T15:08:45.770

$() creates an jQuery instance object that holds some list of elements. Methods

$ is the one-and-only jQuery object, that has some non-instance-specific methods. (It may be helpful to think of them as "static" methods, to borrow terminology from other languages).

This one-and-only jQuery object, identified by $, is a function (which is why it is callable as $()). However, functions in JavaScript are objects, so they can have properties and member functions themselves.

score 2 · Answer 4 · answered Aug 16 '13 at 15:03

$ is just a variable with a short name that points to the same thing as jQuery. $() is the same as jQuery() (calling jQuery as a function), and $.foo is the same as jQuery.foo. jQuery.foo accesses the foo property of the jQuery object – function objects can have other properties too.

score 2 · Answer 5 · edited Aug 16 '13 at 15:04

2

$ is the jQuery object while $() is an evaluation of that object (which is also a function).

The meaning of $() is (from http://api.jquery.com/jQuery/):

Return a collection of matched elements either found in the DOM based on passed argument(s) or created by passing an HTML string

edited Aug 16 '13 at 15:04

Liam

27,717
28
128
190

answered Aug 16 '13 at 15:04

Will

6,601
3
31
42

What is the difference between $() and $.?

5 Answers5

Edit:

Code sample from jQuery to back up my claim: