模仿jQuery css及each实现基本功能

模仿jQuery css及each实现基本功能

jQuery - css() 方法

• css() 方法设置或返回被选元素的一个或多个样式属性。

• 返回 CSS 属性

$("p").css("background-color");

• 设置 CSS 属性

$("p").css("background-color","yellow");

• 设置多个 CSS 属性

$("p").css({"background-color":"yellow","font-size":"200%"});

each定义和用法

• each() 方法规定为每个匹配元素规定运行的函数。
• 提示：返回 false 可用于及早停止循环。
• 语法

$(selector).each(function(index,element))

• each接受3个参数：数组、回调函数（回调函数的参数是第三个参数数组的元素，函数里的this就是遍历元素自己）、一个额外的参数数组

$.each([1,2,3], function(arg1, arg2) {
  	console.log(this + "," + arg1 + "," + arg2);
}, [4, 5]);
//输出	1 4 5 	2 4 5	3 4 5 

模仿jQuery css及each实现基本功能

let utils = (function(){
	//获取样式
	let getCss = (ele,attr)=>{
		let val = null,
			reg = /^-?\d+(\.\d+)?(px|rem|em)?$/;
			if('getComputedStyle' in window){
				val = window.getComputedStyle(ele)[attr]
				if(reg.test(val)){
					val = polatFolat(val)
				}
			}
			return val
	}
	//设置样式
	let setCss = (ele,attr,value)=>{
		if(!isNaN(value)){
			if(!/^(opacity|zIndex)$/.test(attr)){
				value +='px';
			}
		}
		ele['style'][attr] = value;
	}

//批量设置样式
	let setGroupCss = (ele,options)=>{
		for(let attr in options){
			if(options.hasOwnProperty(attr)){
				setCss(ele,attr,options[attr])
			}
		}
	}
	let css=(...arg)=>{
		let len  = options.length,
			fn = getCss;
		len===3?fn = setCss:null;
		len===2&& typeof arg[1]==='object'?fn=setGroupCss :null
		return fn(...arg)
	}

	//=>EACH：遍历对象、数组、类数组
	let each =(obj,callback)=>{
		if('length' in obj){
			for(let i =0;i<obj.length;i++){
			 	let item = obj[i],
			 		 res = callback  && callback.call(item,i,item) 
			 		 if(res===false){
			 		 		break;
			 		 }
			}
		}
		for(let attr in obj){
			if(obj.hasOwnproperty(attr)){
				let item = obj[attr],
					res = callback  && callback.call(item,i,item);
					if(res===false){
						break;
					}
			}
		}
	}

	return {css,each}
})();