JQuery3.1.1 Source code Interpretation (18) "Class"

See JQuery source code is almost over, there are several important content, including Ajax and animation operations, refueling them to read, Baidu front-end College's new batch of courses also began. Baidu front-end college.

Class operation should be more enjoyable, because the content is not many, or, the content involved in the original operation is not very large, a className or getattribute, mainly to see it involves some of the compatibility operation. class Operation

First of all, a more interesting class operation, the link is affixed first.

JS has a very big flaw, that is, can not control the pseudo-elements of the style, such as after and before, this will lose a lot of fun (also brings a lot of fun). The above link is the answer to StackOverflow.

1. Class Mode

Resolve by defining class in advance:

P:before {
  content: "C1"
}
P.click:before {
  content: "Click"
}

//JS
$ ("P"). On ("click", function () {
  $ (this). Toggleclass (' click ');
})

2. Inline style mode

This approach is not elegant, but also a solution.

var str = "click";
$ (' <style>p:before{content: ' + str + ' ""}</style> '). AppendTo (' head ');

3. JQuery data-attr to address

This approach relies on the features of the content:

P:before {
  content:attr (Data-click);
}

JS
var str = ' click ';
$ ("P"). On ("click", Function () {
  $ (this). attr ("Data-click", str);
})

This approach should be a dynamic change.

The application of JQuery is quite extensive. Fn.hasclass

The class operation in JQuery is still very interesting and will use a lot of regular expressions, I like the regular expression very much.

If I use the native JS to implement class operation, I will think of two ways, one is className, it is very good compatibility, all browsers support, including mobile. The second one is getattribute, which is supported by all browsers (with version restrictions).

Let's start with the Hasclass:

Get Class-name
function GetClass (elem) {
  return elem.getattribute && elem.getattribute ("class") | | ";
}

The class name is processed by
function Stripandcollapse (value) {
  var tokens = Value.match (/[^\x20\t\r\n\f]+/g) | | [];
  Return Tokens.join ("");
}

JQuery.fn.extend ({
  hasclass:function (selector) {
    var className, elem,
      i = 0;

    ClassName = "" + selector + "";
    while ((Elem = this[i++])) {
      if (elem.nodetype = = = 1 &&
        ("" + Stripandcollapse (getclass (elem ) + ""). IndexOf (ClassName) >-1) {
          return true;
      }
    }

    return false;
  }
} );

You can see that the GetClass function uses the GetAttribute method. Fn.addclass

Next look at adding add:

JQuery.fn.extend ({addclass:function (value) {var classes, elem, cur, Curvalue, Clazz, J, finalvalue, i =
    0; parameter is function ... if (jquery.isfunction (value)) {return This.each (function (j) {JQuery (this). Addclas
      S (Value.call (this, J, GetClass (This)));
    } ); } if (typeof value = = = "string" && value) {//can add multiple class classes = Value.match (/[^\x20\t\r\ n\f]+/g) | |

      [];
        while ((Elem = this[i++])) {Curvalue = GetClass (elem);

        Cur = Elem.nodetype = = = 1 && ("" + stripandcollapse (curvalue) + ");
          if (cur) {j = 0; while ((Clazz = classes[j + +)) {if (Cur.indexof ("" + Clazz + "") < 0) {cur + = c
            Lazz + ""; }}//Here set class, there is a diff judgment finalvalue = stripandcollapse (cur); Remove both spaces if (Curvalue!== finalvalue) {Elem.setattribute ( "Class", finalvalue);
  }}}} return this; }
} );

JQuery roughly deals with the idea of taking the current Elem class out of the cur, adding value if the value indexOf in cur does not exist, after cur. Fn.removeclass

Removing may be a little cumbersome:

JQuery.fn.extend ({removeclass:function (value) {var classes, elem, cur, Curvalue, Clazz, J, Finalvalue, I
    = 0; Do not know where to use value for function condition if (jquery.isfunction (value)) {return This.each (function (j) {JQ
      Uery (This). Removeclass (Value.call (This, J, GetClass (This)));
    } );
    }//No parameter means remove all class ... if (!arguments.length) {return this.attr ("Class", ""); } if (typeof value = = = "string" && value) {classes = Value.match (rnothtmlwhite) | |

      [];

        while ((Elem = this[i++])) {Curvalue = GetClass (elem); This expression was here for better compressibility (see addclass) cur = Elem.nodetype = = 1 && ("" +

        Stripandcollapse (Curvalue) + "");
          if (cur) {j = 0; while ((Clazz = classes[j + +)) {//Remove all class while (Cur.indexof ("" + Clazz + ") that need to be removed
             ) >-1) { cur = cur.replace ("" + Clazz + "", "");
          }}//Only assign if different to avoid unneeded rendering.
          Finalvalue = stripandcollapse (cur);
          if (Curvalue!== finalvalue) {Elem.setattribute ("class", finalvalue);
  }}}} return this; }
} );

You can see that the remove operation is basically the same as add, except that the class is handled slightly differently:

Here with while, is skillful while
(Cur.indexof ("" + Clazz + ") >-1) {
  cur = cur.replace (" "+ Clazz +" "," " );
}

Replace the matching clazz with replace with a space. Fn.toggleclass

Toggleclass are also used more frequently.

To take a look at the approximate usage, you will definitely ignore the meaning of its second argument: Toggleclass (), when the second argument is true, is AddClass, false, Removeclass, from the source, is directly called the two functions.

In addition to the two parameters, there are no parameters and only false cases, the following also have a clear approach.

JQuery.fn.extend ({toggleclass:function (value, stateval) {var type = typeof value; The second parameter is a Boolean if (typeof stateval = = = "Boolean" && type = = = "string") {return stateval? this.add
    Class (value): This.removeclass (value);
          } if (Jquery.isfunction (value)) {return This.each (function (i) {jQuery (this). Toggleclass (
      Value.call (This, I, getclass (this), stateval), stateval);
    } );

      } return This.each (function () {var className, I, self, classnames;
        if (type = = = "string") {//Toggle individual class names i = 0;
        Self = jQuery (this); Classnames = Value.match (rnothtmlwhite) | |

        [];
            while ((ClassName = classnames[i++])) {//have delete, none add, logic is simple if (Self.hasclass (ClassName)) {
          Self.removeclass (ClassName);
          } else {self.addclass (className);
      }  }//When there is no parameter or only one false, all classes execute} else if (value = = Undefined | | type = = = "Boolean") {CLASSN
        Ame = GetClass (this);
        if (className) {//Store ClassName If set Datapriv.set (this, "__classname__", className);
            } if (This.setattribute) {This.setattribute ("class", ClassName | | | value = = = False?
          "": Datapriv.get (This, "__classname__") | | ""
        );
  }
      }
    } ); }
} );

As you can see, this logic is much like the first two, but when there is no parameter or only one Boolean and false, the current className is saved to the data cache, and then the toggle operation is implemented:

if (this.setattribute) {
  This.setattribute ("Class",
    ClassName | | | value = = = False?//Judgment Condition
    "" "://There is set empty 
  
   datapriv.get (This, "__classname__") | | "//None from data cache
  );
}
  

Summary

Feel that the class operation in JQuery is not very complex, is it my progress, haha. Reference

JQuery 2.0.3 Source Analysis style operation

Selecting and manipulating CSS:

. Toggleclass ()