This article explains the various functions encapsulation methods of class in js, and shares them for your reference. The specific content is as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>aboutclassMultiple function encapsulation</title>
<style>
body{
margin: 0;
}
li{
height: 20px;
}
</style>
</head>
<body>
<div class="box" >
<ul class="list">
<li class="in abc ab "></li>
<li class="in ac b "></li>
<li class="in a "></li>
<li class="in acb "></li>
<li class="in ba "></li>
<li class="abc"></li>
</ul>
</div>
<script>
//Embroidery indexOf method of arrayfunction indexOf(arr,value,start){
//If you do not set start, the default start is 0 if( == 2){
start = 0;
}
//If the indexOf method exists in the array, use the native indexOf method if(){
return (value,start);
}
for( var i = 0; i < ; i++){
if(arr[i] === value){
return i;
}
}
return -1;
}
//Array deduplication method encapsulationfunction noRepeat(arr){
var result = [];
for( var i = 0; i < ; i++){
if(indexOf(result,arr[i]) == -1){
(arr[i]);
}
}
return result;
}
//InArray method encapsulationfunction inArray(arr,value){
for(var i = 0; i < ; i++){
if(arr[i] === value){
return true;
}
}
return false;
}
//Remove the front and tail space function encapsulationfunction trim(arr){
var result = (/^\s+|\s+$/g,'');
return result;
}
//getElementsByClassName function encapsulationfunction getElementsByClassName(parentObj,classStr){
var result = [];
var objs = ('*');
//If classStr is separated by spaces, it means that the class must be satisfied at the same time to be valid var targetArr1 = noRepeat(trim(classStr).split(/\s+/));
//If classStr is separated by commas, it means that the class is valid as long as one satisfies it var targetArr2 = noRepeat(trim(classStr).split(/\s*,\s*/));
if((',') == -1 ){
//Separate with spaces or only one class label: for(var i = 0; i < ; i++){
var arr = noRepeat(trim(objs[i].className).split(/\s+/));
for( var j = 0; j < ; j++){
if(!inArray(arr,targetArr1[j])){
continue label;
}
}
(objs[i]);
}
return result;
}else{
//Separate with commas label: for(var i = 0; i < ; i++){
var arr = noRepeat(trim(objs[i].className).split(/\s+/));
for( var j = 0; j < ; j++){
if(inArray(arr,targetArr2[j])){
(objs[i]);
continue label;
}
}
}
return result;
}
}
//Addclass function encapsulationfunction addClass(obj,classStr){
var array = noRepeat(trim().split('\s+'));
if(!inArray(array,classStr)){
(classStr);
}
= (' ');
return obj;
}
//Removeclass function encapsulationfunction removeClass(obj,classStr){
var array = noRepeat(trim().split('\s+'));
var index = indexOf(array,classStr);
if(index != -1){
(index,1);
= (' ');
}
return obj;
}
//toggleClass function encapsulationfunction toggleClass(obj,classStr){
var array = noRepeat(trim().split('\s+'));
if(inArray(array,classStr)){
removeClass(obj,classStr);
}else{
addClass(obj,classStr);
}
}
</script>
</body>
</html>
I hope this article will be helpful to everyone to learn JavaScript programming.