Jquery1.8 CSS module Evaluation

Early on, the core facilities of jquery were taken by De daemon. What selector, Event System, and precise style calculation ...... Now, the CSS module focuses on two great hack of de.

One is used to convert the percentage value to a more useful pixel value in a standard browser.

// A trigger to the "Awesome hack by Dean Edwards" // chrome
One is to refresh the original value in IE to the current calculated value (pixel value ).
// From the awesome hack by Dean Edwards// http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291// If we're not dealing with a regular pixel number// but a number that has a weird ending, we need to convert it to pixels// but not position css attributes, as those are proportional to the parent element instead// and we can't measure the parent instead because it might trigger a "stacking dolls" problemif ( rnumnonpx.test( ret ) && !rposition.test( name ) ) {// Remember the original valuesleft = style.left;rsLeft = elem.runtimeStyle && elem.runtimeStyle.left;// Put in the new values to get a computed value outif ( rsLeft ) {elem.runtimeStyle.left = elem.currentStyle.left;}style.left = name === "fontSize" ? "1em" : ret;ret = style.pixelLeft + "px";// Revert the changed valuesstyle.left = left;if ( rsLeft ) {elem.runtimeStyle.left = rsLeft;}}return ret === "" ? "auto" : ret;
The browser must have a set of mechanisms for obtaining precise pixel values (for some style attributes), and the trigger conditions of these parameters are discovered by de.
In addition, jquery provides two separate APIs, width and height, to obtain the length and width of an element. They can even obtain the length and width of a hidden element. For performance considerations, the browser does not calculate the style of hidden elements. A set of default values are returned to you, and the length and width are 0. This is inconvenient for animations, such as show, slidedown, and other special effects! Therefore, jquery and so on secretly display them, obtain the exact value, and then hide them back. This is done by the jquery. Swap method. However, in jquery1.8, there are strict conditions for calling this swap method,
rdisplayswap = /^(none|table(?!-c[ea]).+)/,jQuery.each([ "height", "width" ], function( i, name ) {jQuery.cssHooks[ name ] = {get: function( elem, computed, extra ) {if ( computed ) {// certain elements can have dimension info if we invisibly show them// however, it must have a current display style that would benefit from thisif ( elem.offsetWidth === 0 && rdisplayswap.test( curCSS( elem, "display" ) ) ) {return jQuery.swap( elem, cssShow, function() {return getWidthOrHeight( elem, name, extra );});} else {return getWidthOrHeight( elem, name, extra );}}},set: function( elem, value, extra ) {}};});
Rdisplayswap indicates the display value starting with none or table (but not-ce or-Ca. In other words, the following display values enter the swap branch.
none table-column table-column-group table-footer-group table-header-group table-row table-row-group
In addition, when we set the width, jquery selects the box model based on the current box-sizing, so we have the augmentwidthorheight method.
In order not to write the prefix of the private Implementation of css3 by yourself, jquery will help you to add them, so the vendorpropname method is available.
Since the private attributes of-WebKit-are basically the de facto standard, opera also supports-WebKit-prefix. We can see thatCssprefixes = ["WebKit", "O", "Moz", "Ms"]Yes!
Some styles have to be added for energy efficiency, while jquery creates a cssnumber to help you add "PX" to styles other than those styles ". In short, jquery has done a lot of things for you. You write a line of code, and jquery has helped you write the remaining 50 or three hundred lines!