Use JS to implement jQuery's addClass, removeClass, hasClass function, jqueryaddclass

Use JS to implement jQuery's addClass, removeClass, hasClass function, jqueryaddclass

Let's just talk about the code.

Copy codeThe Code is as follows:
Function addClass (obj, cls ){
Var obj_class = obj. className, // obtain the class content.
Blank = (obj_class! = '')? '':''; // Determines whether the obtained class is empty. If not, add a 'space' to the front '.
Added = obj_class + blank + cls; // combines the original class with the class to be added.
Obj. className = added; // replace the original class.
}
 
Function removeClass (obj, cls ){
Var obj_class = ''+ obj. className +''; // obtain the class content and add a space at the beginning and end. ex) 'abc bcd'-> 'abc bcd'
Obj_class = obj_class.replace (/(\ s +)/gi, ''), // replace unnecessary null characters with a space. ex) 'abc bcd'-> 'abc bcd'
Removed = obj_class.replace (''+ cls +'', ''); // Replace the class with spaces at the beginning and end of the original class. ex) 'abc bcd'-> 'bcd'
Removed = removed. replace (/(^ \ s +) | (\ s + $)/g, ''); // remove spaces at the beginning and end. ex) 'bcd'-> 'bcd'
Obj. className = removed; // replace the original class.
}
 
Function hasClass (obj, cls ){
Var obj_class = obj. className, // obtain the class content.
Obj_class_lst = obj_class.split (/\ s +/); // convert cls to an array using the empty characters of split.
X = 0;
For (x in obj_class_lst ){
If (obj_class_lst [x] = cls) {// a loop array to determine whether the array contains cls
Return true;
}
}
Return false;
}

How do I use addClass and removeClass of jquery?

$ (Document ). ready (function () {$ (""). click (function () {$ (""). each (function () {$ (this ). removeClass ("select")}), $ (this ). addClass ("select"), return false })})

Questions about addClass js jquery function

In the browser's debugger window, check $ (. edit_img ), in general, some plug-ins like jQuery or jQuery mobile will decorate components, and finally. after adding CSS to the content hit by edit_img, the possible result is not what you want, because it may not be on the specified level path, your CSS rules may be overwritten by other CSS rules with higher priority. In the Chrome debugger, rules that are not covered due to insufficient priority are marked with strikethrough. the CSS currently in effect can be seen in the current style list.