about javascript / jquery syntax

Question

I couldn't find the syntax something like this anywhere:

var mz = jQuery.noConflict();
mz('#zoom01, .cloud-zoom-gallery').CloudZoom();

This means: jQuery.noConflict()('#zoom01, .cloud-zoom-gallery').CloudZoom();

And something like this:

$(window)[this.off?'off':'on']("scroll", fixDiv );

So, I'm wondering about the syntax something like of these:

jQuery.noConflict()(syntax) and $(window)[syntax](syntax) and I also think there might be something like this $(selector){syntax}

Can anyone elaborate of those syntax?

adeneo · Accepted Answer · 2014-01-24 14:11:50Z

5

+100

The best place to start is the documentation

$.noConflict()

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If you need to use another JavaScript library alongside jQuery, return control of $ back to the other library with a call to $.noConflict(). Old references of $ are saved during jQuery initialization; noConflict() simply restores them.

In other words, noConflict() sets a variable to equal jQuery, so this

var mz = jQuery.noConflict();
mz('#zoom01, .cloud-zoom-gallery').CloudZoom();

is the same as

$('#zoom01, .cloud-zoom-gallery').CloudZoom();

or

jQuery('#zoom01, .cloud-zoom-gallery').CloudZoom();

noConflict() does not directly take selectors, it's just a function that sets jQuery in a certain scope to a variable so you can have multiple versions of jQuery (which you shouldn't) or use other libraries that also uses $ for something, it does not mirror the selector engine or anything else, even if it might seem so at first glance, it simply returns an instance of jQuery

In javascript there is dot notation and bracket notation, so an object can be accessed as

object.propertyName

or

object['propertyName']

as everything in javascript is an object, even jQuery methods, they can be accessed as

$('#element').fadeIn(200);

or

$('#element')['fadeIn'](200);

it's the same thing, so doing

$(window)['on']("scroll", fixDiv );

is the same as

$(window).on("scroll", fixDiv );

the advantage of using brackets is that they can contain any string, even variables, or in this case ternary statements, or the returned result of a function

var event = 'on';
$(window)[event]("scroll", fixDiv );

or

var event = this.off ? 'off' : 'on';

$(window)[event]("scroll", fixDiv );

that one also uses this, which in the global scope would be window, and it's the same as

$(window)[this.off ? 'off' : 'on']("scroll", fixDiv );

The ternary statement itself is just a fancy condition, and this

var event;

if (this.off) {
   event = 'off';
} else {
   event = 'on';
}

is exactly the same as

var event = this.off ? 'off' : 'on';

Added for the edited question :

jQuery() or $() is a function, something we can tell from the parenthesis, so it's something like

function jQuery(arguments) {
    // do something
}

which can be called as

jQuery(some_arguments);

and as var $ = jQuery one can also do $();

Now that we know it's a function, it makes sense that we can do

$('#element_id')

and internally jQuery checks what kind of argument we passed, it sees that is's a string, and it's starting with #, so it's an ID, and then jQuery can do document.getElementById() and get that DOM element, and at the same it wraps that element in a new array-like object, usually referred to as a jQuery object.

We can also pass in a DOM node, array, object or anything else, and jQuery tries to figure out what it is, and wrap in that jQuery object for us to use with other jQuery methods, so this :

$({x:10, y:20})

is the same as

var obj = {x:10, y:20};

$(obj)

and its turned into one of those jQuery objects with the properties x and y. Passing in an object like this means we can chain on methods, and those properties are available in the methods.

$({x:10, y:20}).animate({x:50}, 1000);

And that's basically how it works, simplified a lot.

As for passing objects to methods, that's a very common way to pass arguments.
To see how it works, it's easiest to create a method:

$.fn.doStuff = function(argument) {
     this.css(argument);
}

inside a jQuery plugin, this is the jQuery object, and we can now use the mothod above that does nothing more than pass the arguments to jQuery's css().
We know we can pass an object to css() like this :

$('#element').css({left: '10px', top: '20px'});

so using our plugin we can do the same

var obj = {left: '10px', top: '20px'};

$('#element').doStuff(obj);

and it ends up doing exactly the same thing. Of course, we could do anything with the object :

$.fn.doStuff = function(args) {
    if ( typeof args == 'string' ) {

          alert(args); // if it's a string, just alert it

    } else if ( typeof args == 'object' ) {

          for ( var key in args ) { // if it's an object, iterate

              this[0].style[key] = args[key]; // and do something

          }

    }
}

edited Jan 24, 2014 at 14:11

answered Jan 6, 2014 at 6:05

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

lastr2d2 Over a year ago

should var event = on; be var event = 'on';?

adeneo Over a year ago

@lastr2d2 - was missing some quotes several places, think everything is in order now ?

Bhojendra Rauniyar Over a year ago

Please see award description.

adeneo Over a year ago

@C-link - There is no valid way I could think of that would use curlybraces after the selector, like this $(selector){syntax}, it just wouldn't make much sense. There's still a possibility that some framework or templating engine does it like that, but then you'd have to post an example and tell us exactly what's using that syntax, as it's not really something you'd use in plain javascript.

adeneo Over a year ago

@C-link - Oh, but that's not $(selector){curlybraces} it's $({object}).method({object}) which is valid.

|

xdazz · Accepted Answer · 2014-01-06 06:02:01Z

2

foo['bar'] syntax is to get the property bar from object foo.

foo() is to execute the function foo.

And you can combine these as you wish.

jQuery.noConflict() returns a function so you could execute the result by jQuery.noConflict()(syntax).

$(window) returns an object so you could get a property from it by $(window)[syntax], and if the property is a function, then you could execute it by $(window)[syntax](syntax).

answered Jan 6, 2014 at 6:02

xdazz

161k38 gold badges255 silver badges278 bronze badges

Comments

Edgar Villegas Alvarado · Accepted Answer · 2014-01-06 06:04:29Z

This is just javascript syntax.

person.name is exactly the same as person["name"]

The same happens with methods

$(window).on(...) is exactly the same as $(window)["on"](...)

One cool thing about the second way is that you can make the member name variable, for example:

So doing:

var windowMethod = "on";
$(window)[windowMethod](...)

is the same as

$(window)["on"](...)

And you can have an expression inside the brackets, so this:

$(window)[this.off ? 'off' : 'on']("scroll", fixDiv );

would be exactly the same as doing this:

if(this.off)
    $(window).off("scroll", fixDiv);
else
    $(window).on("scroll", fixDiv);

But the former is shorter.

Hope this helps. Cheers

PS: The jQuery.noConflict()(syntax) is straightforward, .noConflict() just returns a function and then we append some other parens to call it just as any other function.

Collectives™ on Stack Overflow

about javascript / jquery syntax

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related