详解js中class的多种函数封装方法


Posted in Javascript onJanuary 03, 2016

本文实例讲解了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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 实现??打印?理
Apr 28 Javascript
jquery中prop()方法和attr()方法的区别浅析
Sep 06 Javascript
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
jQuery中click事件的定义和用法
Dec 20 Javascript
基于jQuery+JSON的省市二三级联动效果
Jun 05 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
BootStrap组件之进度条的基本用法
Jan 19 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 Javascript
用Axios Element实现全局的请求loading的方法
Mar 15 Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 Javascript
VUE中V-IF条件判断改变元素的样式操作
Aug 09 Javascript
js中利用tagname和id获取元素的方法
Jan 03 #Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
Jan 03 #Javascript
基于javascript实现简单计算器功能
Jan 03 #Javascript
详解Javascript事件驱动编程
Jan 03 #Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 #Javascript
js实现搜索框关键字智能匹配代码
Mar 26 #Javascript
javascript合并表格单元格实例代码
Jan 03 #Javascript
You might like
六酷社区论坛HOME页清新格调免费版 下载
2007/03/07 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
javascript继承机制实例详解
2014/11/20 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
jQuery中outerWidth()方法用法实例
2015/01/19 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
深入浅出ES6之let和const命令
2016/08/25 Javascript
js实现简单的网页换肤效果
2017/01/18 Javascript
JSONP跨域请求
2017/03/02 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
2017/03/09 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
浅析Vue 防抖与节流的使用
2019/11/14 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
Python运维之获取系统CPU信息的实现方法
2018/06/11 Python
Python字典常见操作实例小结【定义、添加、删除、遍历】
2019/10/25 Python
Python3爬虫中识别图形验证码的实例讲解
2020/07/30 Python
利用python3筛选excel中特定的行(行值满足某个条件/行值属于某个集合)
2020/09/04 Python
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
20年同学聚会感言
2014/02/03 职场文书
副校长竞聘演讲稿
2014/09/01 职场文书
教师自查自纠工作情况报告
2014/10/29 职场文书
护理医院见习报告
2014/11/03 职场文书
西安导游词
2015/02/12 职场文书
2014年终个人总结报告
2015/03/09 职场文书
导游词之安徽巢湖
2019/12/26 职场文书
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android
德生TECSUN S-2000使用手册文字版
2022/05/10 无线电