How is jQuery's $ a function and an object?

Question

I mean object as in {} [object Object]. How does it do $(selector) and $.fn.init at the same time?

Can you give me a simple example please?

Answer 1

This isn't unique to jQuery, but an aspect of javascript. All functions are objects. E.g.:

var f = function() { alert('yo'); }
f.foo = "bar";

alert(f.foo); // alerts "bar"
f();          // alerts "yo"

Answer 2

Javascript is an object oriented language, so functions ARE objects, just fancy ones that you can call.

foo = function() { console.log("foo") }
foo.bar = function() { console.log("bar") }
foo() //=> prints "foo"
foo.bar() //=> prints "bar"

Answer 3

$ is a function. a method of $ can return any thing.

For example:

$ = function() {
     return {
                 foo : function() { return 'baa'; },
                 r1: 1,
                 r2 : 'string'
            }
};

typeof $ <- function 
typeof $() <- object
typeof $().foo <- function 
typeof $().foo() <- string
typeof $().r1; <- number 
typeof $().r2 <- string

Answer 4

jQuery or $ is an function(you know $ is an alias of jQuery).

// Define a local copy of jQuery
jQuery = function( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context, rootjQuery );
},

In Javascript, everything is an object even function too. Hence You can directly add properties to function.

   jQuery.find = function () {
   }

Answer 5

var q=function(){};

var s = function(){
    alert("base");
    window.s = s;
    return new q()};

q.fn = q.prototype = {};

q.fn.x = s.x = function(){alert("x");return this;};
q.fn.y = s.y = function(){alert("y");return this;};
q.fn.z = s.z = function(){alert("z");return this;};

s().y().z().x();
s.z().x().y();

Answer 6

It is an object.

$ holds different functions.

You can test this yourself by making your own object:

var $ = {
     select: function(id){return document.getElementById(id);}
}

function $(id){
      return $.select(id);
}

Answer 7

people play around with javascript functions and it leads to interesting design patterns.. Jquery uses of many of these patterns and creates a nice wrapper around many functions.. so ultimately jquery is like a static class using which one can do really neat stuff..

like all classes it has a name and the default Name is jQuery. The $ is nothing buy an identifier that is tied into the jQuery Library and stops you from having to type “jQuery” as the identifier.

The fact that it is a $ symbol is arbitrary. At some point a decision was made to use the $ symbol but the fact of the matter is that it could have been almost any type of ECMAScript acceptable identifier.

The main reason we use $ as the identifier is that you are less likely to make simple typo mistakes when typing one character instead of a string.

Hope that makes things clear.. please correct me guys if I hv got something wrong

A simple example of say my own library would be say a calculator class

var Calculator= (function()
{

    function add(a,b)
    {
     return a+b;
    }
    function subtract(a,b)
    {
     return a-b;
    }
    function multiply()
    {
     return a*b;
    }
    function log()
    {
      console.log("log 123")
    }
    return
    {
     add: add,
     subtract: subtract,
     multiply: multiply
    }
}());

Now I can perform operation using the Calculator class as follows:

Calculator.multiply(Calculator.add(2,3),5);

add my local functions are private and are not exposed to be used outside. In this case my log function can't be accessed using Calculator.log it will say method not found on object.

Now coming back to your question you could do something like this:

var _=Calculator;

and now use the calc functions like

_.multiply(_.add(2,3),5);

Interestingly there is a library called underscore too..

Answer 8

var s = function(){};
s.test = function(){console.log('inside s');}
s.test();

is perfectly legal code.