您的位置:首页 > 前端开发 > 练手

原生写仿jquery简易选择器

2016-06-18 00:35:02


;!function(win,doc){
	var chose={
		id:'getElementById',
		class:'getElementsByClassName',
		tag:'getElementsByTagName'
	};
	//检测数组
	function isArray(obj){
		return Object.prototype.toString.call(obj)==="[object Array]";
	}
	//返回选择器类型和选择器的名字
	function _getSelectorType(selectorName){
		var type=selectorName.charAt(0);
		var name=selectorName.substr(1);
		if(type=="#"){
			return {
				type:"id",
				name:name
			}
		}
		if(type=="."){
			return {
				type:"class",
				name:name
			}
		}
		return {
			type:"tag",
			name:selectorName
		}
	}
	//获取结点
	function _getEle(selectorName){
		var targetInfo=_getSelectorType(selectorName);
		return doc[chose[targetInfo.type]](targetInfo.name);
	}
	//遍历子结点 nodes为子结点数组
	function _eachChild(nodes,cb){
		for(var i=0;i0){
				_eachChild(nodes[i].childNodes,cb);
			}
		}
	}
	//元素中插入元素
	function _writeEle(objH,obj,cb){
		var doc=document;
		var topElements=objH.elements,i;
		var fragment=doc.createDocumentFragment(); //创建文档片段
		//传入html字符串
		if(typeof(obj)==="string"){
			var tempNode=doc.createElement("div");
			tempNode.innerHTML=obj;
			var childNodes=tempNode.childNodes;
			for(i=0;i<childNodes.length;i++){
				fragment.appendChild(childNodes[i].cloneNode(true));
			}
			for(i=0;i<topElements.length;i++){
				if(cb && typeof(cb)=="function"){
					cb(topElements[i],fragment.cloneNode(true));
				}
			}
			childNodes=null;
		}
		//传入_H对象
		if(obj instanceof _H){
			for(i=0;i<obj.elements.length;i++){
				fragment.appendChild(obj.elements[i]);
			}
			for(i=0;i<topElements.length;i++){
				if(cb && typeof(cb)=="function"){
					cb(topElements[i],fragment.cloneNode(true));
				}
			}
		}
		fragment=null;
	}

	//构建
	function _H(ele){
		this.elements=[];
		if(ele.nodeType){
			this.elements.push(ele);
		}else{
			var nodes=_getEle(ele);
			var elems=[];
			elems.length=0;
			if(nodes instanceof NodeList || nodes instanceof HTMLCollection){
				for(var i=0;i<nodes.length;i++){
					var element=nodes[i];
					if(element.nodeType==1){
						elems.push(element);
					}
				}
			}else{
				elems.push(nodes);
			}
			this.elements=elems;
		}
	}

	//各种方法
	_H.prototype={
		length:function(){
			return this.elements.length;
		},
		each:function(cb){
			var topElements=this.elements;
			if(cb && typeof(cb)=="function"){
				for(var i=0;i<topElements.length;i++){
					cb.call(topElements[i],i);
				}
			}
			return this;
		},
		html:function(html){
			var topElements=this.elements;
			var i;
			if(!html){
				var tempAry=[];
				for(i=0; i<topElements.length;i++){
					tempAry.push(topElements[0].innerHTML);
				}
				return tempAry.join('\n');
			}else{
				for(i=0; i<topElements.length;i++){
					topElements[i].innerHTML=html;
				}
				return this;
			}
		},
		text:function(text){
			var topElements=this.elements;
			var i;
			if(!text){
				var tempAry=[];
				for(i=0; i<topElements.length;i++){
					tempAry.push(topElements[0].innerText);
				}
				return tempAry.join('');
			}else{
				for(i=0; i<topElements.length;i++){
					topElements[i].innerText=text;
				}
				return this;
			}
		},
		find:function(selectorName){
			var selectorInfo=_getSelectorType(selectorName);
		
			var topElements=this.elements;
			var tempElems=[];
			for(var i=0;itopElements.length || n<0){
				return this;
			}
			var tempNode=topElements[n];
			var newH=Object.create(this);
			newH.__proto__=_H.prototype;
			newH.elements=[];
			newH.elements[0]=tempNode;
			return newH;
		},
		addClass:function(className){
			var topElements=this.elements;
			for(var i=0;i<topElements.length;i++){
				topElements[i].classList.add(className);
			}
			return this;
		},
		removeClass:function(className){
			var topElements=this.elements;
			for(var i=0;itopElements.length || n<0){
				return this;
			}
			return topElements[n];
		},
		append:function(obj){
			//obj有时为html字符串,有时为_H对象,统一在writeEle内处理,回调函数topElement为要添加内容的node,fragment为将obj统计处理好的document片段
			_writeEle(this,obj,function(topElement,fragment){
				topElement.appendChild(fragment);
			});
			return this;
		},
		before:function(obj){
			_writeEle(this,obj,function(topElement,fragment){
				var thisParentNode=topElement.parentNode;
				thisParentNode.insertBefore(fragment,topElement);
			});
			return this;
		},
		after:function(obj){
			_writeEle(this,obj,function(topElement,fragment){
				var thisParentNode=topElement.parentNode;
				var thisLastNode=thisParentNode.lastChild;
				if(topElement.isEqualNode(thisLastNode)){
					thisParentNode.appendChild(fragment);
				}else{
					thisParentNode.insertBefore(fragment,topElement.nextSibling);
				}
			});
			return this;
		},
		val:function(text){
			var topElements=this.elements;
			if(typeof(text)!="undefined"){
				for(i=0; i<topElements.length;i++){
					if(topElements[i].nodeType==1){
						var tagName=topElements[i].tagName;
						if(tagName=="input" || tagName=="textarea"){
							console.log(text);
							topElements[i].value=text;
						}
					}

				}
				return this;
			}else{
				var value="";
				for(i=0; i<topElements.length;i++){
					if(topElements[i].nodeType==1){
						var tagName=topElements[i].tagName;
						if(tagName=="input" || tagName=="textarea"){
							value=topElements[i].value;
							break;
						}
					}

				}
				
				return value;
			}
		},
		attr:function(key,value){
			var topElements=this.elements;
			if(typeof(value)!="undefined"){
				for(var i=0,l=topElements.length;i<l;i++){
					topElements[i].setAttribute(key,value);
				}
				return this;
			}else{
				
				return topElements[0].getAttribute(key);
			}
		},
		removeAttr:function(attrName){
			var topElements=this.elements;
			for(var i=0,l=topElements.length;i<l;i++){
				topElements[i].removeAttribute(attrName);
			}
			return this;
		},
		tap:function(cb){
			var topElements=this.elements;
			for(var i=0,l=topElements.length;i<l;i++){
				topElements[i].addEventListener("tap",function(e){
					if(cb && typeof(cb)=="function"){
						cb.call(this,e);
					}
				});
			}
		}
	};
	//接口
	window.H=function(){
		return new _H(arguments[0]);
	}
	H.aryEach=function(ary,fn){
		var a=[];
        for(var i=0,l=ary.length;i<l;i++){
            var n=fn.call(this,ary[i]);
            a.push(n);
        }
        return a;
	};
}(window,document);


//使用

var hBox=H("#box").find(".class");

hBox.html("<div>haha</div>");


把jquery的$换成H就行啦,

有each、html、append、before、after等方法。各位同行,望多多指导。

more 最近