Dot notation on a jquery function?

Question

I came across this in a jQuery book:

$(elems).mouseenter(function(e) {
           $(this).css("opacity", 0.5);
        }).mouseout(function(e) {
           $(this).css("opacity", 1.0);
        })

I removed much of the code for easier reading and then got this:

$(elems).mouseenter(function(e)).mouseout(function(e))

It seems like in general you can do this?:

$(elems).mouseenter(function(e)).mouseout(function(e)).mouseSOMETHING1(function(e))

Another words using the . to concatenate functions?

Also if I broke this code into say:

$(elems).mouseenter(function(e) {$(this).css("opacity", 0.5);});
$(elems).mouseout(function(e) {$(this).css("opacity", 1.0);});

Is this the same?

Thanks, Jim

I did not know I had a vote in the matter in any questions I had asked. I always thought others voted. Thanks for this info will go back to prior questions and look for this fish hook. — jim dif
– jim dif, Commented Aug 29, 2012 at 21:51

João Silva · Accepted Answer · 2012-08-29 21:43:00Z

6

Yes, it is. One of the key features of jQuery is precisely chainability. This is done by returning the jQuery object itself in almost every call, allowing you to pass it along to the next method of the chain.

answered Aug 29, 2012 at 21:43

João Silva

91.8k29 gold badges156 silver badges158 bronze badges

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

Comments

Selvakumar Arumugam · Accepted Answer · 2012-08-29 21:44:26Z

2

It works because all those function returns jQuery object.

   $(elems)  //return jquery object
     .mouseenter(/* ...*/)  //return jquery object
     .mouseout(/* ..*/)     //return jquery object

by this way you can chain as many functions.

$(elems).mouseenter(function(e) {$(this).css("opacity", 0.5);});
$(elems).mouseout(function(e) {$(this).css("opacity", 1.0);});

both methods are functionally same.. except that the 2nd method makes an unnecessary jQuery function call to get $(elems).

answered Aug 29, 2012 at 21:44

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

1 Comment

jim dif Over a year ago

My apologies to anyone who took the time to answer any question I have ever asked. It would greatly help for any newbies to Stackoverflow if the checkmark was changed to graphic which read, "Vote this as best answer" or something very similar.

Justin Niessner · Accepted Answer · 2012-08-29 21:44:25Z

2

What you are talking about is called method chaining and yes, it is well supported in jQuery. Take a look at this quick walkthrough:

Method chaining - The complete jQuery tutorial

answered Aug 29, 2012 at 21:44

Justin Niessner

246k40 gold badges416 silver badges546 bronze badges

Comments

scrappedcola · Accepted Answer · 2012-08-29 21:45:13Z

1

Yes $(elems).mouseenter(function(e)).mouseout(function(e)).mouseSOMETHING1(function(e)) is generally acceptable because the jquery functions return the jquery object in question. When you write it out as :

$(elems).mouseenter(function(e) {$(this).css("opacity", 0.5);});
$(elems).mouseout(function(e) {$(this).css("opacity", 1.0);});

It is definitely equivalent to writing it as $(elems).mouseenter().mouseout()

answered Aug 29, 2012 at 21:45

scrappedcola

10.6k1 gold badge36 silver badges48 bronze badges

Collectives™ on Stack Overflow

Dot notation on a jquery function?

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related