詳解js中class的多種函數封裝方法_javascript技巧
- WBOY原創
- 2016-05-16 15:22:101627瀏覽
本文實例講解了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程式設計有所幫助。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn