jQuery, Javascript : Javascript wrapped in jQuery(), $() - what does it mean?

Question

I'm having trouble understanding a type of jQuery selection, and I hope someone can explain it to me in clear terms.

It's taken from this Stack Overflow question.

Basically, it has the common jQuery: $( selector ).

But inside that it has $({ y: iFrameScrollY }).

I've never seen this before. What does it mean to have { ... } and someVal: anotherVal inside the brackets?

Also, please recommend a different title for this question, to make it easier for others to find it.

That would be jQuery selector wrapped with object. http://api.jquery.com/jQuery/ — Dr. Dan, Aug 13 '12 at 09:30
Regarding the `{}` syntax, that's a JavaScript object literal (also called an object initialiser). For more info read [Working With Objects](https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects) or some other JS tutorial about objects. If you haven't seen it before then chances are it won't (yet) make sense to you when I say that according to [the `$()` function documentation](http://api.jquery.com/jquery/), when you pass an object to `$()` it returns that object wrapped in a jQuery object. — nnnnnn, Aug 13 '12 at 09:30
Thanks Dr Dan and nnnnnn, that's really helpful. I'll read up on those docs. — shrewdbeans, Aug 13 '12 at 09:34
@nnnnnn: +1 on your comment, very nice explanation and nice article on working with objects you linked. — Nope, Aug 13 '12 at 09:39

score 3 · Answer 1 · answered Aug 13 '12 at 09:33

Wrapping plain JavaScript object inside jQuery object you can use few jQuery methods including: .data(),.prop(),.bind(), .unbind(), .trigger() and .triggerHandler().

Here is an example taken from jQuery.com:

// 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'

score 3 · Accepted Answer · answered Aug 13 '12 at 09:34

What $({ y: iFrameScrollY }) does is wrap a jQuery selector object around the JavaScript object { y: iFrameScrollY }.

The JavaScript object is declared { y: iFrameScrollY }, meaning it contains a property named y set to the value of iFrameScrollY.

By wrapping the object into a jQuery object one can avail of executing jQuery methods against the wrapped object.

See this documentation for more details.

score 1 · Answer 3 · edited Jun 20 '20 at 09:12

That's a call to the jQuery() function, which is overloaded to do a lot of different things, depending on the arguments being passed.

The {someVal : anotherVal} is a JavaScript object with a property named someVal with a value equal to the value of the anotherVal variable.

If you join those two pieces of information together, and look at the linked page, you'll see this:

jQuery( object )

object A plain object to wrap in a jQuery object.

jQuery, Javascript : Javascript wrapped in jQuery(), $() - what does it mean?

3 Answers3