JQuery offset () source parsing

The first is the offset method on the prototype, based on the arguments to determine whether the value or set value. If it is set, the traversal calls the static method JQuery.offset.setOffset

If a value is taken. So that's starting with the "Var Docelem,win" here.

JQuery.fn.offset =function(options) {if(arguments.length) {//set element coordinates        returnoptions = = = undefined?//If the parameter passed in is undefined, return directly             This :             This. each (function(i) {//Traverse and then call JQuery.offset.setOffsetJQuery.offset.setOffset ( This, options, i);    }); }    varDocelem, Win, Elem= This[0], Box= {top:0, left:0}, Doc= Elem && elem.ownerdocument;//Current document    if( !doc) {        return; } Docelem=doc.documentelement; //Make sure it's not a disconnected DOM node    if(!jquery.contains (Docelem, Elem)) {//returns 0 0 if the element is not contained by DocumentElement        returnbox; }    //If We don ' t have gbcr, just use 0,0 rather than error    //BlackBerry 5, IOS 3 (original IPhone)    if(typeofElem.getboundingclientrect!== core_strundefined) {//if the element has a Getboundingclientrect methodbox = Elem.getboundingclientrect ();//Call this method} win= GetWindow (DOC);//if it is window, return to window, and if it is document, return to Document.defaultview    return {        //distance of element relative to window + scrolling distance-border widthTop:box.top + Win.pageyoffset-Docelem.clienttop, Left:box.left+ Win.pagexoffset-docelem.clientleft};};

In the value, it takes into account that the element is not included in the DocumentElement case, no rendering, naturally there is no offset, so it magically returned {"Top": 0, "left": 0}.

Because of the jquery 2.x version, here it uses the Getboundingclientrect method, from the name can be seen, it returns relative to the window distance, this is not the offset we need, Jquery.offset returns the distance relative to the document, so further calculations are needed:

    return {        // element Distance from window + scrolling distance-border width        top:box.top + win.pageyoffset- docelem.clienttop ,        + win.pagexoffset- docelem.clientleft    };

For GetWindow, look at the function declaration:

function GetWindow (elem) {return Jquery.iswindow (elem)? elem:elem.nodeType = = 9 && Elem.defa Ultview;}

If Elem is a window, return to window directly, and if it is document, return Document.defaultview.

Not quite understand why to use Document.defaultview, the small group of friends said may be multi-frame situation

Then I found the post on the StackOverflow Http://stackoverflow.com/questions/9183555/whats-the-point-of-document-defaultview There are similar answers, and then another possibility is to fix getcomputedstyle bug in Firefox 3.6 (⊙o⊙) ...

Next is the static method set offset ...

Jquery.offset ={setoffset:function(Elem, Options, i) {varcurposition, Curleft, Curcsstop, Curtop, Curoffset, Curcssleft , calculateposition, Position= Jquery.css (Elem, "position"),//gets the position property of the current elementCurelem = JQuery (Elem),//Cache Current ElementProps = {}; //set position first, In-case Top/left is Set even on static Elem        if(Position = = = "Static") {//if the original element is statically positioned, it is changed to relative positioningElem.style.position = "relative"; } Curoffset= Curelem.offset ();//gets the offset of the current elementCurcsstop = Jquery.css (Elem, "top" ); Curcssleft= Jquery.css (Elem, "left" ); //if the element's position is absolute or fixed, and the value of at least one of its top and left properties is auto,calculateposition to TrueCalculateposition = (Position = = = "Absolute" | | position = = "fixed") && (Curcsstop + curcssleft). IndexOf ("Aut O ") >-1; //need to being able to calculate position if either top or left are auto and position is either absolute or fixed        if(calculateposition) {curposition= Curelem.position ();//gets the offset position of the element relative to the parent elementCurtop =Curposition.top; Curleft=Curposition.left; } Else{//if Calculateposition is false, the element is positioned relative to the original or has a top, left valueCurtop = parsefloat (curcsstop) | | 0; Curleft= parsefloat (curcssleft) | | 0; }        if(Jquery.isfunction (options)) {//If the options is a function, the traversal callOptions =Options.call (Elem, I, curoffset); }        //calculates the props value because offset is relative to the document location, and the Top/left value of the new CSS        //It needs to be calculated based on the original offset and CSS top/left values.        if(Options.top! =NULL) {Props.top= (options.top-curoffset.top) +Curtop; }        if(Options.left! =NULL) {Props.left= (Options.left-curoffset.left) +Curleft; }        //If you have using this parameter, you can call the Using method        if("Using"inchoptions)        {Options.using.call (elem, props); } Else{//if not, set the CSS offset. curelem.css (props); }    }};

The using option is not previously seen in the jquery API. Discover hidden Skills (⊙o⊙) ...??

Well, I just tried it on Baidu.

$ (' #page '). Offset ({"Top": +, "left": +, "using":function(prop) {Console.log (prop)}}); //

JQuery offset () source parsing