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.
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.
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'
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.
{}syntax, that's a JavaScript object literal (also called an object initialiser). For more info read 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, when you pass an object to$()it returns that object wrapped in a jQuery object.