詳解js中class的多種函數(shù)封裝方法

更新時間：2016年01月03日 12:42:48 作者：小火柴的藍色理想

這篇文章主要介紹了詳解js中class的多種函數(shù)封裝方法，介紹了不同函數(shù)的封裝方法，感興趣的朋友可以參考一下

本文實例講解了js中class的多種函數(shù)封裝方法，分享給大家供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>關于class的多種函數(shù)封裝</title>
<style>
body{
  margin: 0;
}
li{
  height: 20px;
}
</style>
</head>
<body>
<div class="box" id="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>
//數(shù)組的indexOf方法封裝
function indexOf(arr,value,start){
  //如果不設置start,則默認start為0
  if(arguments.length == 2){
    start = 0;
  }
  //如果數(shù)組中存在indexOf方法，則用原生的indexOf方法
  if(arr.indexOf){
    return arr.indexOf(value,start);
  }
  for( var i = 0; i < arr.length; i++){
    if(arr[i] === value){
      return i;
    }
  }
  return -1;
}
//數(shù)組去重方法封裝
function noRepeat(arr){
  var result = [];
  for( var i = 0; i < arr.length; i++){
    if(indexOf(result,arr[i]) == -1){
      result.push(arr[i]);
    }
  }
  return result;
}
//inArray方法封裝
function inArray(arr,value){
  for(var i = 0; i < arr.length; i++){
    if(arr[i] === value){
      return true;
    }
  }
  return false;
}
//去除首尾空格函數(shù)封裝
function trim(arr){
  var result = arr.replace(/^\s+|\s+$/g,'');
  return result;
}
//getElementsByClassName函數(shù)封裝
function getElementsByClassName(parentObj,classStr){
  var result = [];
  var objs = parentObj.getElementsByTagName('*');
 
  //如果classStr用空格分隔，則表示class必須同時滿足才有效
  var targetArr1 = noRepeat(trim(classStr).split(/\s+/));
  //如果classStr用逗號分隔，則表示class只要有一個滿足就有效
  var targetArr2 = noRepeat(trim(classStr).split(/\s*,\s*/));
   
  if(classStr.indexOf(',') == -1 ){
    //用空格分隔或者只有一個class
    label: for(var i = 0; i < objs.length; i++){
      var arr = noRepeat(trim(objs[i].className).split(/\s+/));
      for( var j = 0; j < targetArr1.length; j++){
        if(!inArray(arr,targetArr1[j])){
          continue label;
        }
      }
      result.push(objs[i]);
    }
    return result;
  }else{
    //用逗號分隔
    label: for(var i = 0; i < objs.length; i++){
        var arr = noRepeat(trim(objs[i].className).split(/\s+/));
        for( var j = 0; j < targetArr2.length; j++){
          if(inArray(arr,targetArr2[j])){
            result.push(objs[i]);
            continue label;
          }
        }
         
      }
      return result;   
    }
}
 
//addclass函數(shù)封裝
function addClass(obj,classStr){
  var array = noRepeat(trim(obj.className).split('\s+'));
  if(!inArray(array,classStr)){
    array.push(classStr);
  }
  obj.className = array.join(' ');
  return obj;
}
//removeclass函數(shù)封裝
function removeClass(obj,classStr){
  var array = noRepeat(trim(obj.className).split('\s+'));
  var index = indexOf(array,classStr);
  if(index != -1){
    classStr.splice(index,1);
    obj.className = classStr.join(' ');
  }
  return obj;
}
//toggleClass函數(shù)封裝
function toggleClass(obj,classStr){
  var array = noRepeat(trim(obj.className).split('\s+'));
  if(inArray(array,classStr)){
    removeClass(obj,classStr);
  }else{
    addClass(obj,classStr);
  }
}
</script>
</body>
</html>

希望本文所述對大家學習javascript程序設計有所幫助。

您可能感興趣的文章: