JQuery-1.9.1 source code analysis series (13) location size operations, jquery-1.9.1 source code

JQuery-1.9.1 source code analysis series (13) location size operations, jquery-1.9.1 source code

First, list these Apis.

JQuery.fn.css (propertyName [, value] | object)(The function is used to set or return the css style attribute values of the elements matched by the current jQuery object. To delete a specified css attribute, use this function to set its value to a null string ("")

Note: 1. If the value parameter is omitted, the property value is obtained. If this parameter is specified, the property value is set. 2. All "Settings" operations of the css () function are for each element that the current jQuery object matches. All "read" operations are only for the First Matching Element .)

JQuery. fn. offset ([coordinatesObj])(Set or return the offset between the current Matching Element (content + padding + border as a whole) and the current document, that is, the coordinates of the current document. This function is only valid for visible elements. This function returns an Object with the left and top attributes. Attribute values are all numbers in pixels. Unlike position (), offset () returnsCurrent documentPosition () returns the coordinates of the ancestor element relative to the position .)

JQuery. fn. position ()(Return the offset of the current Matching Element (content + padding + border + margin as a whole) relative to the located ancestor element, that is, the coordinates of the located ancestor element. This function is only valid for visible elements. The so-called "element to be located" means that the element's CSS position attribute value is absolute, relative, or fixed (as long as it is not the default static ). This function returns a coordinate object with the left and top attributes. Attribute values are all numbers in pixels. For the difference from offset (), see offset. In addition, the position () function cannot be used for setting operations. If all the ancestor elements of the current element are static by default, the offset position returned by this function is the same as that returned by the offset () function)

JQuery. fn. scrollLeft ([value])(Sets or returns the offset of the current matching element to the left of the horizontal scroll bar. When the actual width of an element exceeds the width of the display area, the browser displays the corresponding horizontal scroll bar for the element with certain settings. In this case, scrollLeft () returns the width (in pixels) of the hidden part on the left side of the visible rolling area ).

If the horizontal scroll bar is at the leftmost (that is, the left side of the visible area is not hidden), or the current element cannot be horizontally rolled, scrollLeft () returns 0. Valid for both visible and hidden elements .)

JQuery. fn. scrollTop ([value])(Set or return the offset of the current Matching Element relative to the top of the vertical scroll bar. When the actual height of an element exceeds the height of the display area, the browser displays the corresponding vertical scroll bar for the element with certain settings. In this case, scrollTop () returns the height (in pixels) of the hidden part of the element above the visible area ). If the vertical scroll bar is at the top (that is, the content not hidden above the visible area), or the current element cannot be vertically rolled, scrollTop () returns 0. Valid for both visible and hidden elements)

JQuery. fn. height ([value])(Set or return the height of the currently matched element. The height value does not include the height of the margin (margin), padding (padding), and border (border) of the element. For example

　　

If you want to obtain the height of a part, use innerHeight () and outerHeight (). This function is a jQuery object (instance) and still valid for invisible elements)

JQuery. fn. innerHeight ([value])(Set or return the inner height of the currently matched element. The height value includes the padding, but does not include the height of the margin (margin) and border (border) of the element. For example:

　　

This function is a jQuery object (instance) and still valid for invisible elements)

JQuery. fn. outerHeight ([includeMargin])(Set or return the outer height of the currently matched element. The height value includes the padding and border, but does not include the height of the margin (margin) part of the element. You can also specify the parameter to true to include the height of the margin (margin) Section, for example:

　　

This function is a jQuery object (instance) and still valid for invisible elements)

JQuery. fn. width ([value])(Description: omitted)

JQuery. fn. innerWidth ([value])(Description: omitted)

JQuery. fn. outerWidth ([includeMargin])(Description: omitted)

Detailed diagram of the blue wind color of the lone moon

　　

 

Next, analyze some functions.

A. jQuery. fn. offset Analysis

The method for obtaining offset is as follows (taking top as an example ):

　　Offset. top = the location of elem from the top of the browser window + the section rolled up at the top of the document-elem is top from the top of the border on the parent element.

JQuery processing becomes:

    box = elem.getBoundingClientRect()；    offset.top = box.top  + ( win.pageYOffset || docElem.scrollTop )  - ( docElem.clientTop  || 0 )；

 

Here, modern browsers such as ie8-and ie9.pdf use document.doc umentElement. getBoundingClientRect (); the top/left value of IE8-is-2px; the top/left value of other modern browsers is 0px; it can be seen that IE8-browser is window (2, 2) coordinates are the origin coordinates.

By default, the browser has an 8px gap between the body and the window. Therefore, the top/left value obtained by using document. body. getBoundingClientRect (); is 8px.

 

The offset setting method is as follows (taking top as an example ):

Before setting, if the current position of elem is static, it must be set to relative for processing.

The calculation method of the top css feature value to be set to elem is as follows:

　　SetTop = (offset top value to be set-offset top value of the current element) + top css feature value of elem

Set setTop to the css top feature of elem.

JQuery's processing becomes:

Var curElem = jQuery (elem), curOffset = curElem. offset (), curCSSTop = jQuery.css (elem, "top"), props ={}, curPosition ={}, curTop; // if the top value is auto and the position is absolute or fixed, you need to calculate the value of the css feature top of the current elem if (calculatePosition) {curPosition = curElem. position (); curTop = curPosition. top;} else {curTop = parseFloat (curCSSTop) | 0;} if (options. top! = Null) {props. top = (options. top-curOffset. top) + curTop;} curElem.css (props );

 

B. jQuery. fn. position

Position can only be obtained but cannot be set. The method for obtaining position is as follows (taking top as an example ):

Position. top = The marginTop value of offsetTop-elem of the ancestor element to which elem is located

Here, the top is the top value of the css attribute of elem. For jQuery, this elem regards width + padding + border + margin as a whole, so the final result is that the overall distance of elem is determined as the distance between the inner edge of the parent element.

The processing of jQuery becomes:

Var offsetParent, offset, parentOffset = {top: 0, left: 0}, elem = this [0]; // when the element is fixed, its parent element is located in the window (parentOffset = {top: 0, left: 0} if (jQuery.css (elem, "position ") === "fixed") {// assume that the offset is available for getBoundingClientRect = elem. getBoundingClientRect ();} else {// get offsetParent = this. offsetParent (); // Get correct offsets offset = this. offset (); if (! JQuery. nodeName (offsetParent [0], "html") {parentOffset = offsetParent. offset ();} // Add the border parentOffset. top + = jQuery.css (offsetParent [0], "borderTopWidth", true);} return {top: offset. top-parentOffset. top-jQuery.css (elem, "marginTop", true )};

 

In it, the jQuery. fn. offsetParent () function gets the closest ancestor location element.

OffsetParent: function () {return this. map (function () {var offsetParent = this. offsetParent | document.doc umentElement; while (offsetParent &&(! JQuery. nodeName (offsetParent, "html") & jQuery.css (offsetParent, "position") = "static") {offsetParent = offsetParent. offsetParent;} return offsetParent | document.doc umentElement ;});}View Code

　　

C. jQuery. fn . ScrollLeft andJQuery. fn . ScrollTop

　　The acquisition and setting of the two functions are relatively simple. To obtain the position of the scroll bar with scrollTop, there are only two functions window [pageYOffset] Or elem [scrollTop]. The setting directly uses window [scrollTo] Or elem [scrollTop]

 

If you think this article is good, click [recommendation] in the lower right corner ]!