jquery css in detail (i)

By reading the source code, you can find that CSS is an example of JQ. And in the internal invocation of the JQ tool method access to implement, the method does not understand the friend please click the jquery tool method, Access detailed

In the callback of access, a judgment is made that value is not equal to undefined call JQ's Tool method style, otherwise invoke the JQ tool method css

As you can see, the style is set and CSS is getting. In other words, to understand the example method of JQ CSS, you must first understand the JQ tool method style and CSS

 jquery.fn.extend ({css:  function  Span style= "color: #000000;" (name, value) { return  jquery.access (this , function   (Elem, name, value) {  return  value!== undefined?          Jquery.style (elem, Name, value): Jquery.css (Elem, name);    }, name, value, Arguments.length  > 1); },    ...............................});

JQUERY.CSS has 4 parameters, the first 2 to understand, Elem is the element, name is the style name, and the next 2 is used to convert the style value to a numeric type
For example: $ (selector). css (' width ')//100px
$ (selector). Width ()//100
In fact $ (selector). Width () is called Jquery.css and passes the next 2 parameters, turning the band px into a numeric type. We'll analyze this later, and then look down.

jquery.extend ({...). css ( ........):function(elem, name, numeric, extra) {varVal, num, hooks, OrigName=jquery.camelcase (name); //Make sure, we ' re working with the right nameName = jquery.cssprops[OrigName] | | (jquery.cssprops[origname] =vendorpropname (Elem.style, OrigName)); //gets hook for the prefixed version        //followed by the unprefixed versionHooks = jquery.csshooks[Name] | |jquery.csshooks[OrigName]; //If A hook is provided get the computed value from there        if(Hooks && "get"inchhooks) {Val= Hooks.get (Elem,true, extra); }        //Otherwise, if a to get the computed value exists        if(val = = =undefined) {Val=curcss (elem, name); }        //convert "normal" to computed value        if(val = = = "normal" && nameinchcssnormaltransform) {Val=cssnormaltransform[name]; }        //Return, converting to number if forced or a qualifier is provided and Val looks numeric        if(Numeric | | extra!==undefined) {num=parsefloat (Val); returnnumeric | | Jquery.isnumeric (num)? num | | 0: Val; }        returnVal; },        ...................});

We proceed to the following analysis:
OrigName = jquery.camelcase (name); This code is the style name to the camel style, such as: Background-color turn into BackgroundColor
Let's take a look at CamelCase source code:

var rmsprefix =/^-ms-/,    =/-([\da-z])/gi,    function(all, letter) {         return (Letter + "" ). toUpperCase ();    }; Jquery.extend ({    ...     )................ function (String) {        return string.replace (Rmsprefix, "ms-" ). Replace (Rdashalpha, fcamelcase) ;    },    ..............................});    

Go down ....
This code is an assignment to name, and when the Jquery.cssprops property contains OrigName it is assigned to name, otherwise the Vendorpropname method is called and a Jquery.cssprops property is dynamically generated and assigned to name
Cssprops inside no then through Vendorpropname generation, and then directly to the cssprops inside take, should be this thought.
Let's take a look at what Cssprops and vendorpropname these guys are.

Name = jquery.cssprops[OrigName] | | (jquery.cssprops[OrigName] = Vendorpropname (Elem.style, OrigName));

Cssprops default defines a float property with a value of cssfloat and stylefloat
Because the float is JS reserved words, so can not be used directly in the style, as the same as class, need to change to classname.

cssprops: {    //  normalize float CSSproperty    "float": jQuery.support.cssFloat? "Cssfloat": "Stylefloat"},

Vendorpropname is mainly for CSS3 style name processing, we know CSS3 style are prefixed, such as moz,ms,webkit, etc.
We do not need to write prefixes when we use JQ, for example: $ (selector). CSS (' tranfroms ')

Well, we have a general understanding of the Vendorpropname role we analyze the source
Vendorpropname inside is divided into 3 pieces, below we analyze each.

functionVendorpropname (style, name) {//Shortcut for names that is not vendor prefixed    if(Nameinchstyle) {        returnname; }    //Check for vendor prefixed names    varCapname = Name.charat (0). toUpperCase () + name.slice (1), OrigName=name, I=cssprefixes.length;  while(i--) {Name= cssprefixes[I] +Capname; if(Nameinchstyle) {            returnname; }    }    returnOrigName;}

First make a judgment, if the style found in the name is directly returned to name, stating that name is already prefixed with the style name, such as: $ (selector). CSS (' moztranfroms '), otherwise go to the following code.

if inch style) {    return  name;}

The first letter of name is assigned to Capname,capname and then to Origname,i equals cssprefixes length.

var capname = Name.charat (0). toUpperCase () + name.slice (1),     = name,     = Cssprefixes.length;

Cssprefixes = ["Webkit", "O", "Moz", "MS"],

Traverse I, assign a prefix style name to name, and once again name in style

 while (i-- ) {    = cssprefixes[i] + capname;     if inch style) {        return  name;}    }

The analysis is over vendorpropname we continue to look at the CSS code
This is done hooks processing, such as transparency, width, etc. by default are empty, using hooks to the value 0

Hooks = jquery.csshooks[Name] | | jquery.csshooks[OrigName]; // If A hook is provided get the computed value from there if inch hooks) {    true, extra);}

After the various processing above, call Curcss to get the value of the style

if (val = = = undefined    ) {= curcss (elem, name);}

Some style defaults are normal and call Cssnormaltransform to do the processing

if inch cssnormaltransform) {    = cssnormaltransform[name];}

Cssnormaltransform = {    0,    +},

This is where the 2 parameters behind the CSS work, converting the value of the style to the numeric type

if (Numeric | | extra!== undefined) {    = parsefloat (val);     return Numeric | | Jquery.isnumeric (num)? num | | 0 : Val;}

Final return Val

jquery css in detail (i)