详解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 相关文章推荐
jQuery each()方法的使用方法
Mar 18 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
jquery遍历table的tr获取td的值实现方法
May 19 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 Javascript
详解JWT token心得与使用实例
Aug 02 Javascript
js计时事件实现圆形时钟
Mar 25 Javascript
详解vue或uni-app的跨域问题解决方案
Feb 21 Javascript
es6数组的flat(),flatMap()函数用法实例分析
Apr 18 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
Jul 26 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 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
php 读取文件乱码问题
2010/02/20 PHP
PHP访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
PHP 多任务秒级定时器的实现方法
2018/05/13 PHP
php+mysql开发中的经验与常识小结
2019/03/25 PHP
js 页面执行时间计算代码
2009/03/04 Javascript
javascript中的new使用
2010/03/20 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
基于js实现的限制文本框只可以输入数字
2016/12/05 Javascript
详解JavaScript树结构
2017/01/09 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
vue+elementUI实现表格关键字筛选高亮
2020/10/26 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
vue 实现图片懒加载功能
2020/12/31 Vue.js
vue-cli中实现响应式布局的方法
2021/03/02 Vue.js
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
Python使用MONGODB入门实例
2015/05/11 Python
python实现学生信息管理系统
2020/04/05 Python
深入了解Django View(视图系统)
2019/07/23 Python
浅谈Python type的使用
2019/11/19 Python
Python进程间通信multiprocess代码实例
2020/03/18 Python
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
《雷雨》教学反思
2016/02/20 职场文书
创业计划书之婴幼儿游泳馆
2019/09/11 职场文书
实用干货:敬酒词大全,帮你应付各种场合
2019/11/21 职场文书
python for循环赋值问题
2021/06/03 Python