Understanding Javascript Concepts

Understanding Javascript Concepts

I am reviewing some javascript/jQuery code and having trouble understanding a few lines of the code.  I'd like to ask about one here.

It's probably not necessary, but here's where the code is from.  

I cannot understand this bit of the code. Let's call it the 'original form'. 

        var textEl = chart.renderer.text(text)
                // ensures our text is centered
                .css({ 'text-anchor': 'middle'})
                // add the attributes
                .attr(attr);
This is really:
 var textEl = chart.renderer.text(text).css({ 'text-anchor': 'middle'}).attr(attr);
My first question: is this equivalent?
 chart.renderer.text(text);
 chart.renderer.text().css({ 'text-anchor': 'middle'});
 chart.renderer.text().css().attr(attr);
Let's call that the 'expanded form'.

Question 2. I'm a C++ programmer and used to identifying methods and attributes of classes.
'.css()' looks like a method to me.  How can it have another method '.attr(attr)'?  In C++
classes have methods. Methods don't.  Also I've never seen this concept presented in any of the
learning material I've read.

Question 3.  Is the 'original form' considered good practice?  Does it always execute as expected or 
does its execution depend on the underlying code, and if so, wouldn't the expanded form be better
because it's execution would be more predictable?  If not, in what order are the various methods in the 
line of code executed?