本文实例讲解了js中class的多种函数封装方法,分享给大家供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于class的多种函数封装</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>
//数组的indexOf方法封装
function indexOf(arr,value,start){
  //如果不设置start,则默认start为0
  if(arguments.length == 2){
    start = 0;
  }
  //如果数组中存在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;
}
//数组去重方法封装
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;
}
//去除首尾空格函数封装
function trim(arr){
  var result = arr.replace(/^\s+|\s+$/g,'');
  return result;
}
//getElementsByClassName函数封装
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函数封装
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函数封装
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函数封装
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程序设计有所帮助。

标签:
js,class,函数,封装

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“详解js中class的多种函数封装方法”

暂无“详解js中class的多种函数封装方法”评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。