jQuery property control module total of four partial herein, this talk about 3 parts: a class style operating portion for modifying the DOM element class attribute, for the operation pattern type is, not defined jQuery static methods, and We define only example of a method, as follows:
- addClass (value); adding one or more classes of pattern matching in each set of elements, modify the style by modifying the DOM property class className, value may be separated by spaces or the type style of a function (or a plurality of return separated by a space class style)
- hasClass (selector); any element detecting whether the matching element comprising a specified class style, it returns true as long as one of the elements comprising, Selector is a class style.
- removeClass (value); removing one or more or all of the class style, value can be empty (full removal), separated by a space class styles (styles plurality removed) from the set of matching elements in each element, or is a function (the function returns one or more classes of patterns separated by spaces)
- toggleClass (value, stateVal); settings or removing one or more classes selected switching element, there are five usage
writer by: Desert QQ: 22969969
· ToggleClass (); not pass parameters; then if the current element contains the style you remove all of the classes, if not then try to recover.
· ToggleClass (stateVal); only pass a Boolean value type; if stateVal is true, this is equivalent to toggleClass (); if it is false to always remove all classes.
· ToggleClass (value); string or a function parameter 1, parameter 2 is passed in; value is a string of one or more patterns, separated by a space, the same below; value is a function returns a string format. If the matching element contains the specified class style, remove, or add the style.
· ToggleClass (value, stateVal); string or a function parameter 1, parameter 2 is a Boolean value; when the stateVal is always added when true, is always removed when the false
For toggleClass when switching styles, internal jQuery for all classes will be temporarily stored in the data cache __className__ data objects, such as trying to read the next time to recover.
For chestnut it:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script> <style> .color{color: #f00;} .back{background: #ccc;</} style > </ head > < body > < P > the Hello World! </ P > < Button ID = "B1" > set all styles </ Button > < Button ID = "B2" > switching color style </ Button > < Button ID = "B3" > cancel all styles </ Button > < Script > the let B1 = Document.getElementById ( ' b1 '), b2 = document.getElementById('b2'), b3 = document.getElementById('b3'); b1.onclick = ()=>{ $('p').addClass('color back'); //添加所有样式 } b2.onclick = ()=>{ $('p').toggleClass('color'); // switch color style } b3.onclick = () => { $ ( ' P ' ) .removeClass (); // cancel all styles } </ Script > </ body > </ HTML >
Here we have the two style custom class: color and Back, change the font color former, which modify the font background color, and then define the style for operating the three buttons are rendered as follows:
Click Settings all styles, add color and class in two back on this p DOM elements, as follows:
When you click to switch color style, due to the color on the p elements of this class has been in existence, and therefore cancel:
When you click this button again to switch the color style, due to the color on the p elements of this class has been canceled, so this time will be displayed, as follows:
When we click on all styles will cancel all class on p element to be deleted, back to the initial state, as follows:
Source code analysis
JQuery for internal operation is to modify the pattern corresponding to the DOM element className attributes to achieve, through the intermediate indexOf to find and replace string and replace operations for adding and deleting style style logic is as follows:
jQuery.fn.extend ({ . addClass: function (value) { // add class style var classNames, I, L, elem, the setClass, C, Cl; IF (jQuery.isFunction (value)) { // if the value is a function return the this .each ( function (J) { the jQuery ( the this ) .addClass (value.call ( the this , J, the this .className)); // execute the function on each of the matching element and as a return value to be added whichever class style, then call .addClass (className) was added class style execute the function, with two arguments, namely the element index and the current position in the set of style value.. }); } IF (value && typeof=== value "String") { // If the value is a character string, may be separated by spaces plurality of styles classNames = value.split (rspace); // with / \ s + / value pair are separated for (I = 0 , L = the this .length; I <L; I ++) { // iterate matching elements elem = the this [I]; IF (elem.nodeType ===. 1) { // only the element node IF ! (&& elem.className === 1 classNames.length) { // If elem.className not exist, the number of patterns is added Judai 1, directly provided elem.className elem.className = value; } the else{ The setClass = "" + + elem.className ""; // around className class style to be added spaces for (C = 0, Cl = classNames.length; C <Cl; C ++) { // calendar to be added style class value IF (~ setClass.indexOf ( "" + classNames [C] + "")!) { // If classNames in a style that does not exist setClass setClass classNames + = [C] + ""; // the style add } } elem.className = jQuery.trim (the setClass); // spaces on both sides of the last class style removed, and then provided to the elem.className } } } } Return the this ; }, removeClass: function (value) { // removing one or more or all of the classes from the pattern matching element in the set of each element. To remove a class style by modifying the DOM property className. var classNames, I, L, elem, className, C, Cl; IF (jQuery.isFunction (value)) { // if the value is a function return the this .each ( function (J) { // iterate matching elements the jQuery ( the this ) .removeClass (value.call ( the this , J, the this .className)); // call removeClass each matching element () function, the parameter is the return value of the function value }); } IF ((value && typeof value === "String") || === undefined value) { // if value exists and is a value or string undefined classNames = (value || "") .split (rspace); // with the value separated by spaces to remove multiple classes support styles. If this value is null, the result is [ ""], length of the array is equal. 1 for (I = 0, L = the this .length; I <L; I ++) { // iterate matching elements elem = the this [I ]; // elem element is matched if(Elem.nodeType ===. 1 && elem.className) { // only the support has been provided with the element node className. IF (value) { // if the incoming value of the value, then the style is set className = ( "" + elem.className + "") .replace (RClass, ""); // classNames type style of the current element is , plus spaces on both sides, and then removing the wrap, tabs, carriage returns. RClass = var / [\ n-\ T \ R & lt] / G, for (C = 0, Cl = classNames.length; C <Cl; C ++) { // class style array traversal classNames to remove className = className.replace ( "" + classNames [c] + "", ""); JQuery.trim = (className); // remove the white space characters, properties provided elem.className } the else { elem.className = "" ; } } } } return the this ; }, / * skip * / })
When we do all kinds of animation in the page will still use this API, very convenient, with the css can achieve a variety of animation effects.