Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p><code>{}</code> is object notation in JavaScript. For example:</p> <pre><code>$('selector').plugin({ option1: 'value' }); </code></pre> <p>In this case you're passing an object containing your settings to the plugin. The plugin can deal with this as a object, whatever it's referenced as, for example:</p> <pre><code>settings.option1 //the option you passed in. </code></pre> <p>Of course it has a lot more uses, but this is the most common example in jQuery. The same is true for the <a href="http://api.jquery.com/animate/" rel="noreferrer"><code>.animate()</code></a>, <a href="http://api.jquery.com/jQuery.ajax/" rel="noreferrer"><code>$.ajax()</code></a>, <a href="http://api.jquery.com/css/" rel="noreferrer"><code>.css()</code></a> functions, etc. Anything that takes properties generally uses this format.</p> <hr> <p>As requested, some other examples:<br> Any object inside the passed object can be a function as well, not only properties, for example:</p> <pre><code>$("&lt;input&gt;", { type: "text", focusin: function() { alert("Hi, you focused me!"); } }); </code></pre> <p>This would set the focus event of that input to have an alert. Another is extending an object, adding properties to it, like this:</p> <pre><code>var person = { first_name: "John" }; $.extend(person, { last_name: "Smith" }); //equivalent to: person.last_name = "Smith"; //or: person["last_name"] = "Smith"; </code></pre> <p>Now <code>person</code> has the <code>last_name</code> property. This is often used by plugins as well, to take the default settings, then merge any settings you passed in, overwriting with any settings you specified, using defaults for the rest.</p> <p><strong>Why are we using it?</strong> Well...that's how JavaScript works, and in the jQuery spirit: it's an extremely terse and flexible way to pass information.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload