详解js中class的多种函数封装方法
本文实例讲解了js中class的多种函数封装方法，分享给大家供大家参考，具体内容如下
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>关于class的多种函数封装</title>
<style>
body{
margin:0;
}
li{
height:20px;
}
</style>
</head>
<body>
<divclass="box"id="box">
<ulclass="list">
<liclass="inabcab"></li>
<liclass="inacb"></li>
<liclass="ina"></li>
<liclass="inacb"></li>
<liclass="inba"></li>
<liclass="abc"></li>
</ul>
</div>
<script>
//数组的indexOf方法封装
functionindexOf(arr,value,start){
//如果不设置start,则默认start为0
if(arguments.length==2){
start=0;
}
//如果数组中存在indexOf方法，则用原生的indexOf方法
if(arr.indexOf){
returnarr.indexOf(value,start);
}
for(vari=0;i<arr.length;i++){
if(arr[i]===value){
returni;
}
}
return-1;
}
//数组去重方法封装
functionnoRepeat(arr){
varresult=[];
for(vari=0;i<arr.length;i++){
if(indexOf(result,arr[i])==-1){
result.push(arr[i]);
}
}
returnresult;
}
//inArray方法封装
functioninArray(arr,value){
for(vari=0;i<arr.length;i++){
if(arr[i]===value){
returntrue;
}
}
returnfalse;
}
//去除首尾空格函数封装
functiontrim(arr){
varresult=arr.replace(/^\s+|\s+$/g,'');
returnresult;
}
//getElementsByClassName函数封装
functiongetElementsByClassName(parentObj,classStr){
varresult=[];
varobjs=parentObj.getElementsByTagName('*');
//如果classStr用空格分隔，则表示class必须同时满足才有效
vartargetArr1=noRepeat(trim(classStr).split(/\s+/));
//如果classStr用逗号分隔，则表示class只要有一个满足就有效
vartargetArr2=noRepeat(trim(classStr).split(/\s*,\s*/));
if(classStr.indexOf(',')==-1){
//用空格分隔或者只有一个class
label:for(vari=0;i<objs.length;i++){
vararr=noRepeat(trim(objs[i].className).split(/\s+/));
for(varj=0;j<targetArr1.length;j++){
if(!inArray(arr,targetArr1[j])){
continuelabel;
}
}
result.push(objs[i]);
}
returnresult;
}else{
//用逗号分隔
label:for(vari=0;i<objs.length;i++){
vararr=noRepeat(trim(objs[i].className).split(/\s+/));
for(varj=0;j<targetArr2.length;j++){
if(inArray(arr,targetArr2[j])){
result.push(objs[i]);
continuelabel;
}
}
}
returnresult;
}
}
//addclass函数封装
functionaddClass(obj,classStr){
vararray=noRepeat(trim(obj.className).split('\s+'));
if(!inArray(array,classStr)){
array.push(classStr);
}
obj.className=array.join('');
returnobj;
}
//removeclass函数封装
functionremoveClass(obj,classStr){
vararray=noRepeat(trim(obj.className).split('\s+'));
varindex=indexOf(array,classStr);
if(index!=-1){
classStr.splice(index,1);
obj.className=classStr.join('');
}
returnobj;
}
//toggleClass函数封装
functiontoggleClass(obj,classStr){
vararray=noRepeat(trim(obj.className).split('\s+'));
if(inArray(array,classStr)){
removeClass(obj,classStr);
}else{
addClass(obj,classStr);
}
}
</script>
</body>
</html>
希望本文所述对大家学习javascript程序设计有所帮助。