Fork me on GitHub

有无JQ利用正则操作Class对比

发表于 | 分类于

无JQ下代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
//切换参数
var param = {
		'easyClose' : true,
		'mask' : true,
	};
function toggleParam(elem,type,value,defaultValue){
	if(param[type]){
		param[type] = defaultValue;
		removeCls(elem,'isSelected');
	}else{
		addCls(elem,'isSelected');
		param[type] = value;
	}
}
/**
* 判断dom是否拥有某个class
*/
function hasCls(dom,classSingle){
	return dom.className && dom.className.match(new RegExp('(\\s|^)' + classSingle + '(\\s|$)')) || false;
}
/**
* 移除dom中的class
*/
function removeCls(dom,cls){
	if (hasCls(dom, cls)) {
        var reg = new RegExp('(\\s+|^)' + cls + '(\\s+|$)');
        dom.className = dom.className.replace(reg, ' ');
      }
}
/**
* 增加dom中的class
*/
function addCls(dom,cls){
	if(!this.hasCls(dom,cls)) dom.className+=""+cls;
}

有JQ下操作Class

1
2
3
4
5
6
7
8
function toggleParam(elem,type,value,defaultValue){
	$(elem).toggleClass('isSelected')
	if(param[type]){
		param[type] = defaultValue;
	}else{
		param[type] = value;
	}
}

对比之后发现JQ的对于开发速度上确实会快，很多操作都简便了。