详解js中class的多种函数封装方法
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了详解js中class的多种函数封装方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2790字，纯文字阅读大概需要4分钟。
内容图文
本文实例讲解了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的多种函数封装方法全部内容，希望文章能够帮你解决详解js中class的多种函数封装方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】