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

本文实例讲解了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为0if（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 ）{//用空格分隔或者只有一个classlabel: 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程序设计有所帮助。