在jquery $（{}）中包装普通的javascript对象

Question

I have this fragment of code from a book I am reading. And want to understand what $({}) means and what is its use exactly.

I tried searching on several search engines and even on SO. $({}) wasn't a search-friendly term.

    var Events = {
       bind: function(){
          if ( !this.o ) this.o = $({});
          this.o.bind.apply(this.o, arguments);
       },

       trigger: function(){
          if ( !this.o ) this.o = $({});
          this.o.trigger.apply(this.o, arguments);
       }
    };

I did find a similar question about $([]) but I don't think it is quite the same thing.

Answer 1

You're just wrapping a basic javascript object as a jQuery one.

From jquery documentation :

Working With Plain Objects

At present, the only operations supported on plain JavaScript objects wrapped in jQuery are: .data(),.prop(),.bind(), .unbind(), .trigger() and .triggerHandler(). The use of .data() (or any method requiring .data()) on a plain object will result in a new property on the object called jQuery{randomNumber} (eg. jQuery123456789).

 // define a plain object var foo = {foo:'bar', hello:'world'}; // wrap this with jQuery var $foo = $(foo); // test accessing property values var test1 = $foo.prop('foo'); // bar // test setting property values $foo.prop('foo', 'foobar'); var test2 = $foo.prop('foo'); // foobar // test using .data() as summarized above $foo.data('keyName', 'someValue'); console.log($foo); // will now contain a // jQuery{randomNumber} // property // test binding an event name and triggering $foo.bind('eventName', function (){ console.log('eventName was called'); }); $foo.trigger('eventName'); // logs 'eventName was called' 

Should .trigger('eventName') be used, it will search for an 'eventName' property on the object and attempt to execute it after any attached jQuery handlers are executed. It does not check whether the property is a function or not. To avoid this behavior, .triggerHandler('eventName') should be used instead.

 $foo.triggerHandler('eventName'); // also logs 'eventName was called' 

Here's a (not really useful) example :

​var a =$({});
a.data('b', 3);
console.log(a.data('b')); // this prints 3

If you keep your object created with $({}) , you may use it as callee for data , bind , and so on. This is probably the minimal non DOM keepable jquery object you can make.

Answer 2

this really has more to do with javascript syntax than jQuery.

{} is for objects like so:

 //makes an empty object
 var myObject = {}; 

 //makes an object containing 'foo' and 'bar' as 'firstItem' and 'secondItem'
 var myObject = { firstItem : foo, secondItem : bar }; 

[] is for arrays like so:

 //makes a blank array
 var myArray = [];

 //makes an array containing 'foo' and 'bar' at postions 0 and 1
 var myArray = [foo, bar];

() is for functions (which jQuery generally is). This is abit more complicated because it can have multiple meanings.

 //running an existing function
 myFunction();

 //running an anonymous function
 (function(){  
    //doSomething }
 )();

 //running a function with an argument
 myFunction(arg);

jQuery is generally just a function called $ instead of myFunction so...

 //runs jQuery as a function on 'arg'
 $(arg);

The argument you pass jQuery can be almost anything. If you pass it a string like '#myDiv' jQuery will use that argument as a selector to get an element from the html. If you pass it something else like an object or an array, it can still do some things with it like: http://api.jquery.com/jQuery/ as @dystroy said.

So $({}) is the same as $(myBlankObject) , for example:

var myBlankObject = {};
$(myBlankObject);
//is the same as
$({});

and

var myObjectWithStuff = { firstItem :  foo, secondItem : bar };
$(myObjectWithStuff);
//is the same as
$({ firstItem :  foo, secondItem : bar });

$('selector') works. $({'selector'}) or $(['selector']) does not, because you are not passing jQuery a string, but another data type.